block - Kurs HTML i CSS
Szablon strony na DIV-ach / Responsywny szablon...and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #INFORMACJE { display: block; background-color: #ccc; width: 150px; float: right; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; margin-right: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left...
- Dobre praktyki / CSS Zorientowane Obiektowo
...a W arkuszu CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we...
- Pozycjonowanie CSS / Przyleganie {clear}
selektor { clear: sposób } Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block). Jako "sposób" należy podać: left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego right - prawy bok nie przylega both - żaden bok nie przylega none - brak ograniczeń Polecenie pozwala ustalić pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...menu0 dt a { background: url("submenu.gif") no-repeat 140px 8px; padding-right: 20px; } #menu0 a:link, #menu0 a:visited { display: block; color: #000; text-decoration: none; padding: 4px 5px; } #menu0 a:hover { color: #fff; background-color: #008; } #menu0 dl { position: absolute; border: 0; } #menu0 dl dd { position: relative; left: 151px; bottom: 22px; border-left: 1px solid #eee; border-right: 1px solid #aaa; } Aby ustawić kolejne...