Sekcje w szablonach
13 października 2005
Sekcje w szablonach, czyli najczęstsze błędy i nieporozumienia podczas tworzenia układów za pomocą sekcji.
Osoby pragnące zaznajomić się z szablonami stron tworzonymi na divach często napotykają problemy, których wielokrotnie nie rozumieją. Nie potrafiąc ich rozwikłać własnymi siłami (bo czasam wystarczy pogooglać) wracają do tabelek rzucając hasło "divy ssą".
Prawda jest taka, że najczęściej przyczyną złych wyników pracy jest niedouczenie i niedoinformowanie. W erze tabelek nikt nie potrzebował wiedzieć co to jest element blokowy bądź liniowy, jak działa oblewanie i pozycjonowanie. Szablony działające na sekcjach (<div/>) są sterowane CSSem i nie wystarczą tylko empiryczne ćwiczenia.
Problem 1
Najprostszy do rozwikłania. Otóż sekcje to nie tabelki. Żadna nie pokaże Ci się, jeśli niczego w niej nie ma.
<div id="container"><div id="box"></div></div>
Nie ma nic w środku, nie ma ich na stronie (chyba, że mają ustawione rozmiary). Zwykle wystarczy wstawić jakiś <p></p> z Lorem Ipsum dla wypełnienia bądź dla celów testowych parę <br/>.
Problem 2
<p>Lorem ipsum…</p><blockquote style="float: right"><p>To jest jakiś tam cytat.</p></blockquote>
Blockquote jest floatowane na prawo. Wszystko wygląda bardzo dziwacznie, a przecież chcieliśmy żeby tekst opływał ten cytat.
Otóż, żeby pływanie bloków wyglądało w tym przypadku ok, blockquote musi się znaleźć przed akapitem w kodzie. Dodatkowo powienineś przypisać mu szerokość.
Zapamiętaj sobie, jeśli nie wynika Ci to z wiedzy o blokach i floatach, że aby coś wyfloatować w poziomie, musisz to umieścić w źródle strony przed elementem, który będzie opływał ten pierwszy. No ale wtedy może się pojawić…
Problem 3
„Mam dwie kolumny, floatuję jedną ale nic się nie dzieje, argh.”
Zapomniałeś do drugiej dostawić marginesu o długości równej szerokości pierwszej.
Korzystając z przykładu wcześniejszego możemy określić szerokość (width) elementu <blockquote/> i margines z prawej strony, dla akapitu i być może efekt Cię zadowoli (bo będzie odmienny).
Możesz też floatować ją w drugą stronę, ale wtedy pamiętaj że wystąpi…
Problem 4
Jest sekcja, w niej dwie kolejne.
<div id="main"><div id="content">Left</div><div id="sidebar">Right</div></div>
Sekcja główna ma kolor tła, dwie w niej są floatowane na lewo i prawo. Problem jest taki, że tło sekcji main jest wysokie na jeden wiersz. Ilustruje to obrazek:
Problem wynika z tego, że nie rozumiesz jak działa pływanie elementów. Wyrywasz je ze strumienia dokumentu. Blok główny nie ma się czego przyczepić, więc zostaje „skrócony”. Rozwiązanie jest proste. Należy rozciągnąć sekcję main. Można to uczynić przez height, ale jest to bardzo nieeleganckie rozwiązanie.
Wystarczy umieścić pod koniec main dowolny element z właściwością clear="both".
<div id="main"><div id="content">Left</div><div id="sidebar">Right</div><hr style="clear: both" /></div>
Właściwość ta spowoduje, że element <hr/> nie będzie mógł opływać kolumn przez co spadnie poniżej najdłuższej z nich. Co automatycznie rozciągnie sekcję main. Prawda, że proste? :)
O wiele lepiej ustawić właściwość overflow (hidden albo auto) dla kontenera, rezygnując z dodatkowego elementu pod kolumnami.
To by było na tyle. Oczywiście problemów związanych z sekcjami i tworzeniem układów za ich pomocą jest o wiele więcej, ja jedynie zaznaczyłem najczęstsze i najbardziej frustrujące, a jednocześnie najłatwiejsze do rozwiązania.
nbw 3
13 października 2005, 15:04
Ja-Joanna 6
13 października 2005, 16:08
Puck 9
13 października 2005, 18:24