Błędne założenia podczas projektowania kolumn w CSS
08 sierpnia 2006
W Internecie można często natknąć się na strony, które zostały złożone przy pomocy CSS-a, a ich wspólnym motywem jest stała szerokość, wycentrowanie i dwie kolumny. Z powodu niesamowitej popularności takich układów od lat, przypadkowi oglądający biorą wypełnienia kolorem kolumn za pewien standard projektowania (co nie jest niczym złym, ponadto wspomniane układy są zwykle estetyczne) i próbują zaaplikować u siebie taki efekt. Z różnym skutkiem.
Wśród takich twórców stron nierzadko mamy do czynienia z początkującymi w kaskadowych arkuszach stylów, którzy wychowali się na tabelkach i no cóż - nie do końca umieją się przestawić na nowoczesne układy. Pierwsze zderzenie z rzeczywistością to zrozumienie, że elementy blokowe, takie jak div nie rozciągają się jak tabele, tylko w zależności od ilości zawartości. Uniemożliwia to wypełnienie kolorem sidebara i głównego kontenera, jak kiedyś wypełniano komórki tabelki.
Istnieją sprytne sztuczki pozwalające obejść „problem”, niektórzy modyfikują wysokość kolumn JavaScriptem, niektórzy rozciągają kolumny do nieprawdopodobnych wysokości i potem je przycinają marginesami, lecz większość używa techniki zwanej Faux Columns dla wspomnianych layoutów o stałej szerokości, opisanej dawno temu w A List Apart.
I okej, nie ma nic niepoprawnego w takiej technice, jeśli stosujący ją ma lekkie pojęcie co robi.
Dodając tło dla kontenera tych kolumn musisz pamiętać o mechanizmie wybijania elementów z przepływu tekstu w dokumencie pozycjonując je, albo aplikując float. W tamtym artykule opisałem sposób radzenia sobie ze znikaniem tła przez dodanie elementu z clear: both poniżej kolumn. Jest to prawie zawsze złe rozwiązanie.
Wyobraźmy sobie, że na stronie w menu umieszczasz masę linków, przycisków (oraz animowanych flashowych zegarków ;-)). Wyświetlanie się tych elementów spowalnia załadowanie wszystkiego poniżej nich w kodzie - także elementu z clear. Nic nie rozciąga kontenera dla kolumn i tło nie pokaże się dopóki nie zostanie wczytana (zazwyczaj) stopka.
Gdy operujemy kontrastującymi kolorami teł, to jest całkiem możliwe, że gość nie będzie w stanie odczytać tekstu dopóki nie wczyta mu się cała strona. Nie o to nam chyba chodziło. Przykładowo u Rafiego widzimy jak strona się zachowuje przed załadowaniem:
Istnieje właściwość CSS, która pozwala kontenerowi rozciągać się samoczynnie w miarę jak przybywa w niej zawartości, nawet tej pływającej. Mowa o overflow. Ustawiony na hidden nie spowoduje wielkich problemów (Firefox 1.0 miał problemy z auto), Internet Explorer zaakceptuje taki styl, jeśli blok będzie miał włączony hasLayout (zwykłe nadanie szerokości wystarczy - bo przecież o takich szablonach mówimy).
Gdybym u siebie na blogu korzystał z clear to dopóki nie załadowałyby się wszystkie wpisy, komentarze oraz menu boczne, to część strony przesłaniałaby trawka. Także jeśli mimo wszystko używasz mechanizmu resetowania pływania kolumn, zastanów się czy zawsze Twoja strona będzie wyglądała okej - nawet jeśli jeszcze nie jest cała załadowana.
Aule 1
08 sierpnia 2006, 10:55
Grucha 3
08 sierpnia 2006, 11:29
marcin 10
09 sierpnia 2006, 21:39
