Wykorzystanie kaskadowych arkuszy stylów do tworzenia układów strony to już wśród webmasterów obowiązująca norma. Nadal jednak zdarzają się sytuacje, kiedy aż chce się sięgnąć po sprawdzone i prostsze tabelki. Jednym z takich przykładów są kolumnowe układy stron. Z tego artykułu dowiesz się, w jaki sposób rozwiązać ten problem, bazując jedynie na CSS.
Użycie CSS do budowy układów kolumnowych
ma wiele niezaprzeczalnych
zalety. Zaawansowane łączenie HTML
i CSS w znacznym stopniu ułatwia pisanie kodu,
zwiększając jego czytelność. Nie jest on już
wielką, trudną do ogarnięcia stertą kilkudziesięciu
zagnieżdżonych tabel. Dzięki temu łatwiejsze stało
się także wprowadzanie późniejszych zmian oraz
poprawianie kodu pisanego przez inne osoby.
Gdy wszystkie elementy odpowiadające za wygląd
znajdują się w arkuszu stylów, to zrozumienie
tego \”co twórca miał na myśli\” nastręcza o wiele
mniej problemów. Po nabraniu doświadczenia,
korzystanie z CSS jest także o wiele szybsze,
a gotowe fragmenty kodu pochodzące z własnych
zbiorów dają się łatwo przystosować do kolejnych
projektów.
Niektóre rozwiązania mogą jednak sprawiać,
szczególnie na początku, różne problemy. Najczęściej
wymienianym problemem jest od dawna
kwestia stworzenia layoutu strony składającej się
z dwóch albo trzech kolumn. Jak się przekonasz,
można to uczynić na kilka rozmaitych sposobów.
Zaprezentowane w artykule przykłady mają różne
stopnie trudności. Powinny być one przydatne
zarówno dla początkujących koderów CSS, jak dla
bardziej doświadczonych webmasterów.
Dwie kolumny – metoda I
Najprostszy układ kolumnowy składa się
z dwóch kolumn. Najczęściej w jednej z nich znajduje
się treść strony, a w drugiej menu. Spróbujemy
podołać temu zadaniu, tworząc dwie kolumny
w wycentrowanym pudełku DIV. Wzbogacimy
go dodatkowo o miejsce na nagłówek i stopkę.
Zacznijmy od prostego kodu HTML:
Uzupełnienie kodu o CSS nie powinno być
trudne. Potrzebne są dwie reguły odpowiadające
za wycentrowanie pudełka \”centruj\”:
body {
text-align: center;
}
#centruj {
width: 800px;
text-align: left;
margin: 0 auto;
}
Wycentrowanie tekstu dla elementu body
oraz automatyczne dopasowanie marginesu dla
\”centruj\” sprawia, że pudełko znajdzie się na
środku strony. Sam nagłówek nie potrzebuje zbyt
wiele kodu, wystarczy jedynie podać wysokość
i kolor tła:
#naglowek {
height: 50px;
background: #78C0D8;
}
Czas na dwie kolumny i stopkę. Obu nadajemy
właściwość \”float\” przesuwającą je na lewo lub
prawo, a także szerokość, kolor tła oraz wysokość,
która będzie jedynie demonstrować działanie
przykładu. Stopce wystarczy nadać jedynie kolor
i wysokość.
#lewo {
float: left;
width: 600px;
background: #D8F0D8;
height: 400px;
}
#prawo {
float: right;
width: 200px;
background: #A8C090;
height: 300px;
}
#stopka {
height: 40px;
background: #78A878;
}
Efekt działania powyższego kodu przedstawia
rysunek 1. Niestety nie jest on zadowalający. Stopka
nie jest widoczna. Dzieje się tak, ponieważ obie
kolumny mają nadaną właściwość \”float\” i przeglądarka
nie bierze ich wysokości pod uwagę. Są one
poza tzw. przepływem dokumentu. Aby to zmienić,
należy się posłużyć właściwością \”clear\”, nadając
ją dodatkowemu elementowi umieszczonemu
w kodzie za kolumnami.
Poprawiony kod HTML wygląda następująco:
Zwróć uwagę na div z klasą \”clear\”. Teraz kod
CSS zawiera tylko jedną właściwość. Decyduje ona
o sposobie łamania linii przed elementem, który
ją zawiera. Równie dobrze moglibyśmy nadać ją
divowi \”stopka\”, jednak dla przejrzystości kodu
uczyniliśmy to w mniej optymalny sposób. Div
\”clear\” zawiera następujący kod:
.clear {
clear: both;
}
Kolejny problem widoczny na rysunku 1 to różnica
w długości pomiędzy prawą kolumną i lewą.
Tło jest więc ucięte. Czy można coś na to poradzić?
Owszem. Pudełku \”centruj\” można nadać taki sam kolor tła, jaki ma prawa kolumna. Jest to rozwiązanie
dobre przy założeniu, że lewa kolumna będzie
zawsze równa, bądź dłuższa od prawej.
Poprawiony kod:
#centruj {
width: 800px;
text-align: left;
margin: 0 auto;
background: #A8C090;
}
Teraz przykład prezentuje się już w sposób
zadowalający (rysunek 2). Możesz obejrzeć go
bezpośrednio otwierając plik dwie-kolumny.html,
umieszczony na płycie CD dołączonej do magazynu.
|
|
|
Dwie kolumny – metoda II
Opisana powyżej metoda tworzenia układu
dwóch kolumn posiada jedną poważną wadę.
Zawsze tylko jedna z kolumn może się dostosować
do drugiej. W tym przypadku jest to prawa
kolumna z menu, rozciągana automatycznie do wysokości
lewej kolumny z treścią. Jeśli jednak prawa
kolumna byłaby wyższa, to lewa nie zostałaby
rozciągnięta.
Często w celu zaradzenia temu problemowi
stosuje się obrazek tła symulujący obie kolumny.
Nie każdy jednak lubi to rozwiązanie. To dodatkowe
komplikowanie kodu, a niektórzy wolą tego
unikać.
Spróbujmy poprawić poprzedni kod tak, aby
obie kolumny były automatycznie rozciągane. Dla
urozmaicenia, tym razem węższą kolumnę umieścimy
po lewej stronie. Kod HTML różni się jedynie
jednym szczegółem – dodatkowym wystąpieniem
diva z klasą \”clear\”. Umieściliśmy go w prawej
kolumnie:
Dużo większe zmiany zaszły w kodzie CSS definiującym
reguły odpowiadające za kolumny. Reszta
kodu nie uległa zmianie:
#lewo {
float: left;
width: 200px;
background: #A8C090;
height: 400px;
}
#prawo {
margin-left: 200px;
background: #D8F0D8;
position: relative;
padding-bottom: 1px;
}
Zmiany w powyższym kodzie wprowadzono 02.12.2008,
dzięki uprzejmości użytkownika pozmu z naszego forum
Lewa kolumna otrzymała właściwość float,
wyznaczone tło, szerokość oraz wysokość nadaną
w celu demonstracji przykładu. Z kolei prawa
ma jedynie określony margines z lewej strony,
tworzący wolną przestrzeń dla drugiej kolumny,
dodatkowo tło oraz wysokość ustawioną na 100%
– niezbędną do tego, aby kod zadziałał poprawnie
w Internet Explorerze.
Teraz wydłużenie lewej kolumny automatycznie
spowoduje wydłużenie prawej. Gdy z kolei wydłuży
się kolumna prawa, wówczas tło diva \”centruj\”
symuluje wydłużenie lewej. Całość demonstruje
rysunek 3. Przykład znajduje się także na płycie CD
w pliku dwie-kolumny-2.html.
Trzy kolumny – metoda I
Układ strony złożony z trzech kolumn to dużo
większe wyzwanie. Idealny układ 3-kolumnowy
niektórzy nazywają wręcz świętym Graalem webmasterów.
Większość doświadczonych zwolenników
zaawansowanego stosowania CSS mogłaby
z marszu wymienić co najmniej kilka różnych
metod budowy układu trzech kolumn. Przyjrzymy
się dwóm z nich. Posłuży to zdobyciu szerszej
wiedzy, poznaniu mechanizmów CSS oraz ułatwi
ci wybranie rozwiązań najbardziej optymalnych
w danej sytuacji.
Pierwsze zadanie to podział strony na trzy
równe kolumny i nagłówek. Kolumny mają razem
zajmować 100% przestrzeni okna przeglądarki.
Środkowa kolumna ma mieć zmienną szerokość,
a dwie boczne mają mieć szerokość zdefiniowaną
na stałe.
W tym celu musimy użyć możliwości pozycjonowania
absolutnego. Dzięki temu będziemy mogli
dokładnie określić położenie dwóch kolumn. Kod
HTML jest prostszy, niż przy układach 2-kolumnowych:
Kod kolumn pozycjonowanych absolutnie stał
się z kolei bardziej skomplikowany:
* {
margin: 0;
padding: 0;
}
#naglowek {
height: 60px;
background: #C2B43A;
}
#lewo {
position: absolute;
left: 0;
top: 60px;
width: 200px;
background: #A7AB41;
height: 200px;
}
#srodek {
margin: 0 200px;
background: #F2EA9D;
height: 400px;
}
#prawo {
position: absolute;
right: 0;
top: 60px;
width: 200px;
background: #B6C43C;
height: 200px
}
Na samym początku definiujemy zerowe
marginesy i paddingi dla wszystkich elementów, co
pozwoli nam uniknąć komplikacji. Ponieważ czasami
trudno jest rozpoznać problemy związane z tymi
właściwościami, lepiej jest je wyzerować i osobno
definiować dla każdego elementu, nie polegając na
wartościach domyślnych przeglądarek.
Następnie zajmujemy się nagłówkiem. Kolejnym
elementem jest lewa kolumna o szerokości
200 pikseli. Dzięki właściwościom \”left: 0\” i \”top:
60px\” znajduje się ona po lewej stronie, tuż pod
nagłówkiem. Div \”srodek\” otrzymał z dwóch stron
marginesy o szerokości obu kolumn. Kolumna
prawa działa na zasadzie analogicznej do lewej,
jednak w jej przypadku użyta została właściwość
\”right\”. Efekt działaniu kodu widoczny jest na rysunku
4, a gotowy przykład dostępny jest na płycie
CD w pliku trzy-kolumny.html.
Zaprezentowana metoda jest jedną z najprostszych,
dlatego ma też poważne ograniczenia.
Kolumny boczne nie rozszerzają się, a umieszczenie
pod kolumnami innego elementu nie jest możliwe.
Niemniej technika ta może być przydatna w pewnych
sytuacjach.
Negatywne marginesy – trzy kolumny
Tworząc układ 3-kolumnowy, będziemy
bazować na poprzednim kodzie, wprowadzając
do niego jedynie wymagane modyfikacje. Efekt
możesz oglądać na rysunku 7, a gotowy przykład
również znajdziesz w plikach do pobrania.
Po pierwsze, do kodu HTML dodamy dodatkowy
div #glowny znajdujący się w hierarchii ponad divem
#zawartosc. Div #tresc podzielmy na dwie części:
...
...
...
Analizę potrzebnego kodu CSS zacznijmy od zmian
potrzebnych do funkcjonowania lewej kolumny:
#lewo {
width: 200px;
float: left;
}
#tresc_glowna {
margin-left: 200px;
}
Dzięki zastosowaniu float: left, div #lewo znajdzie
się po lewej stronie, a jego szerokość ustalona
została na 200 pikseli. Główną treść strony musimy
ograniczyć o 200 pikseli divem #tresc_glowna.
W innym przypadku tekst pojawiałby się po lewej
stronie poniżej nowej kolumny, a to jest niedopuszczalne.
Ostatnia kwestia, którą należy się zająć, to
przedłużenie lewej kolumny. Użyjemy do tego
kolejnego pliku graficznego:
#glowny {
background: #FFD64E url(tlo2.png) repeat-y left;
}
#zawartosc {
background: url(tlo.png) repeat-y right;
}
Div #zawartosc posiada ten sam plik graficzny,
jednak nie ma potrzeby definiowania dla niego
koloru tła. Div #glowny znajduje się w hierarchii
ponad nim, więc tło należało zdefiniować dla
niego. On również odpowiada za symulowanie
przedłużenia lewej kolumny.
Można tutaj nawiązać do kładzenia na ścianę
farby. Wyobraź sobie, że najpierw malujesz całą
powierzchnię ściany, a z boku dodajesz ozdobny
pasek. W kolejnym kroku dodajemy jednie ów
pasek po prawej stronie i tę funkcję przyjął teraz
element #zawartosc. Całość kodu CSS prezentuje
się w następujący sposób:
* {
margin: 0;
padding: 0;
}
#glowny {
background: #FFD64E url(tlo2.png) repeat-y left;
}
#zawartosc {
background: url(tlo.png) repeat-y right;
}
#srodek {
width: 100%;
float: left;
margin-right: -250px;
}
#tresc {
background: url(tlo2.png) left repeat-y;
margin-right: 250px;
}
#tresc_glowna {
margin-left: 200px;
}
#prawo {
width: 250px;
float: right;
}
#lewo {
width: 200px;
float: left;
}
#stopka {
clear: both;
background: #DCDCDC;
}
.clear {
clear: both;
}
h1 {
padding: 10px;
}
p {
padding: 7px;
}
Cztery kolumny – metoda 1
Tworzenie czterech kolumn za pomocą CSS to
już większe wyzwanie. Pierwsza metoda, którą
omówimy, wykorzystuje pozycjonowanie absolutne.
Oznacza to, że ma ona spore ograniczenia.
Istnieją jednak sytuacje, w których może okazać się
przydatna.
Podstawowa struktura kodu HTML prezentuje
się następująco:
...
...
...
...
Każdy z czterech divów zostanie wyposażony
w podstawowy kod CSS, który dla każdego z nich
przyjmie identyczną postać:
position: absolute;
top: 10px;
width: 15%;
Cztery kolumny są oddalone od granicy strony
o 10 pikseli i szerokie na 15% aktualnej szerokości
okna przeglądarki. Przy szerokości rzędu 15%
pomiędzy kolumnami muszą występować odstępy.
Gdybyśmy ustalili inną wielkość, moglibyśmy
pozbyć się jakichkolwiek odstępów. Wystarczyłoby
szerokość zdefiniować jako 25%:
width: 25%;
Aby zachować równe odstępy między kolumnami,
pierwszej z nich nadamy odległość od lewej
strony o wartości 10%:
left: 10%;
W przypadku każdej kolejnej kolumny wartość
będzie się zwiększać o 20%, ponieważ odległość
między kolumnami wynosić będzie jedynie 5%,
a z prostego działania matematycznego wynika,
że 5 + 15 = 20. Teraz możemy już spojrzeć na
kompletny kod CSS, który jest stosunkowo prosty:
#pierwsza {
background: #FFD23D;
position: absolute;
top: 10px;
left: 10%;
width: 15%;
}
#druga {
background: #AAFF72;
position: absolute;
top: 10px;
width: 15%;
left: 30%;
}
#trzecia {
background: #7DB5C4;
position: absolute;
top: 10px;
width: 15%;
left: 50%;
}
#czwarta {
background: #D1D3FF;
position: absolute;
top: 10px;
width: 15%;
left: 70%;
}
Dodatkowo każda kolumna ma zdefiniowany
kolor tła, co widać na rysunku 8. Gotowy przykład
znajdziesz w plikach do pobrania.
Cztery kolumny – metoda 2
Druga metoda tworzenia więcej niż 3 kolumn
polega na użyciu właściwości float. Kod HTML
w tym przypadku będzie identyczny z tym, który
został użyty w poprzednim przykładzie.
Poszczególnym kolumnom nadajemy jedynie
float, szerokość i ewentualnie tło:
#pierwsza {
float: left;
width: 25%;
background: #CCCCCC;
}
#druga {
float: left;
width: 25%;
}
#trzecia {
float: left;
width: 25%;
background: #CCCCCC;
}
#czwarta {
float: left;
width: 25%;
}
Rysunek 9 przedstawia efekty działania
powyższego kodu. Oczywiście ponad kolumnami
bez przeszkód możesz dodać inne elementy. Aby
umieścić kolejnego diva pod kolumnami, musisz
posłużyć się właściwością clear: both, którą wielokrotnie
omawialiśmy na łamach tego działu.
Trzy kolumny – metoda II
Kolejny sposób na tworzenie układów 3-kolumnowych
będzie już bardziej zaawansowany.
Zachowane zostanie wrażenie automatycznego
dostosowywania się wysokości kolumn. Ponadto
będziemy mogli pod nimi umieścić stopkę zajmującą
całą szerokość okna przeglądarki.
Spójrzmy na kod HTML:
lewo
prawo
srodek
Na pewno zauważyłeś spore różnice. Główna
część objęta jest dodatkowym divem \”kolumny\”.
Pudełko \”srodek\” zawiera dwa główne elementy.
Div \”prawo\” odpowiada za prawą kolumnę. Z kolei
div \”tresc\” tworzy kolumnę środkową. Zauważ,
że wewnątrz niego także występuje div z klasą
\”clear\”.
Sytuacja staje się jaśniejsza, jeśli wziąć pod
uwagę kod CSS:
* {
margin: 0;
padding: 0;
}
#kolumny {
background: #A7AB41;
}
#naglowek {
height: 60px;
background: #C2B43A;
}
#lewo {
float: left;
width: 200px;
background: #A7AB41;
}
#srodek {
margin-left: 200px;
background: #B6C43C;
}
#tresc {
background: #F2EA9D;
margin-right: 200px;
padding: 10px;
}
#prawo {
float: right;
width: 200px;
background: #B6C43C;
}
.clear {
clear: both;
}
#stopka {
height: 40px;
background: #C2B43A;
}
Wyjaśnijmy nowe fragmenty kawałek po kawałku.
Div \”kolumna\” symuluje przedłużenie lewej
kolumny dzięki takiemu samemu kolorowi tła. Divy
\”lewo\” i \”srodek\” tworzą parę dwóch kolumn – to
już znasz. Taką samą parę dwóch kolumn tworzą
pudełka \”prawo\” i \”tresc\”. Jak więc możesz zauważyć,
posłużyliśmy się znaną ci już metodą, jednak
zastosowaliśmy ją podwójnie.
W kodzie HTML umieszczone zostały akapity
nadające kolumnom wysokość. Zwraca to uwagę
na interesujący problem – kolumny nie zadziałają
prawidłowo w Internet Explorerze, jeśli ich treść
będzie pusta, nawet pomimo nadanej wysokości.
Dodatkowo div \”tresc\” ma określony odstęp wewnętrzny,
gdyż w przeciwnym razie IE renderowałby
go z drobnym błędem. Spójrz na rysunek 5,
aby ocenić efekty naszych starań. Gotowy przykład
znajdziesz rzecz jasna na płycie CD w pliku trzykolumny-
2.html.
Ujemne marginesy – dwie kolumny
Definiując marginesy w CSS, możesz im nadać
wartości ujemne, będą to wtedy marginesy ujemne.
Tak naprawdę przesuną one dany element, np.
pudełko div, o podaną wartość. Wykorzystamy tę
możliwość, aby przesunąć jedną z kolumn w prawo.
Gotowy efekt prezentuje rysunek 6, a kod
zawarty jest w pliku negatywne1.html, dostępnym
do pobrania z naszej strony WWW.
Zacznijmy od głównego szablonu HTML:
...
...
Stopka strony
Div #zawartosc zawiera w sobie wszystkie
elementy oprócz stopki strony. Kolejne główne
pudełka to #srodek i #prawo. Div z klasą clear
odpowiada, jak zapewne pamiętasz z poprzedniego
artykułu, za wydłużenie prawej kolumny, która
w przeciwnym razie byłaby całkowicie pozbawiona
tła, co dalej przeanalizujemy. Najważniejszy element
będący filarem całej konstrukcji to środkowy
div o następującym kodzie CSS:
#srodek {
width: 100%;
float: left;
margin-right: -250px;
}
Zajmuje on całą szerokość strony, jest przesunięty
w lewo, a z prawej strony pomniejszony
o 250 pikseli. Widzisz teraz, że ujemne marginesy
są tworzone przez użycie znaku \”-\”. W tym miejscu
zostaje umieszczony div #prawo:
#prawo {
width: 250px;
float: right;
}
Jednak w tym momencie treść środkowego
diva zachodzi na boczną kolumnę. Korzystamy
więc z elementu #tresc, nadając mu dodatkowy
margines z prawej strony:
#tresc {
background: #FFD64E;
margin-right: 250px;
}
To jednak nie koniec. Jak bowiem sprawić, aby
prawa kolumna powiększała się automatycznie po
dodaniu treści do środkowego diva?
Zastosujemy metodę symulowania tła poprzez
użycie pliku graficznego. Zostanie on przypisany
do diva #zawartosc, znajdującego się ponad
wszystkimi innymi. Jest on nam potrzebny właśnie
w tym jednym celu:
#zawartosc {
background: #FFD64E url(tlo.png) repeat-y right;
}
Przed plikiem tlo.png zdefiniowany został także
kolor tła. Wypełni ono całe pudełko, a plik graficzny
stworzy symulację kolumny po prawej stronie.
Całość kodu CSS wraz z dodatkowymi regułami
prezentuje się następująco:
* {
margin: 0;
padding: 0;
}
#zawartosc {
background: #FFD64E url(tlo.png) repeat-y right;
}
#srodek {
width: 100%;
float: left;
margin-right: -250px;
}
#tresc {
background: #FFD64E;
margin-right: 250px;
}
#prawo {
width: 250px;
float: right;
}
#stopka {
clear: both;
background: #DCDCDC;
}
.clear {
clear: both;
}
h1 {
padding: 10px;
}
p {
padding: 7px;
}
Okazuje się, że wykorzystując ujemne marginesy,
możesz szybko i prosto stworzyć 2-kolumnowy
układ strony. Czy tak samo będzie z 3 kolumnami?
Przekonajmy się w praktyce.
