Negatywne marginesy są relatywnie rzadko spotykaną metodą budowy układów kolumnowych. Tymczasem jest to technika mająca duży potencjał, a przy tym jest prosta do zastosowania.
Jako pierwszy technikę tą opisał najprawdopodobniej Ryann Brill na łamach cenionego serwisu A List Apart (http://www.alistapart.com/articles/negativemargins/). Przy użyciu negatywnych marginesów stworzymy układy dwu- i trójkolumnowe.
Środkowa kolumna będzie posiadać płynną szerokość dostosowującą się do rozmiarów okna przeglądarki. Natomiast Bocznym kolumnom nadamy stałą szerokość. Strona będzie także posiadać nagłówek oraz stopkę. Przedstawione przykłady możesz dowolnie wykorzystywać w {link_wew 4780}tworzonych projektach{/link_wew}. Jeśli dodatkowo chciałbyś, aby strona posiadała ściśle zdefiniowaną szerokość, to przedstawiane w przykładach kolumny powinieneś objąć dodatkowym wycentrowanym pudełkiem DIV.
Tworzymy dwie kolumny
Tworzenie układu dwukolumnowego rozpoczynamy od najprostszego szkieletu HTML:
Nagłówek serwisu
Lorem Ipsum...
Lorem Ipsum...
Kod zawiera nagłówek, kolumnę środkową, prawą oraz stopkę. Kod CSS dla tych dwóch ostatnich pojemników jest bardzo prosty:
#top {
height: 80px;
background: #d4f393
}
#footer {
background: #bdf884;
height: 60px;
clear: both
}
Prawa kolumna jest standardowo przesuwana na prawą stronę przy użyciu właściwości float. Nadajemy jej także szerokość 170 pikseli:
#right {
float: right;
width: 170px
}
Natomiast kod dla kolumny środkowej przedstawia się następująco:
#middle {
float: left;
width: 100%;
margin-right: -170px
}
Wymaga on krótkiego omówienia. Po pierwsze, kolumna jest przesunięta na lewą stronę. To zrozumiałe. Po drugie, posiada negatywny margines o takiej samej wielkości, jak szerokość prawej kolumny. Nie działał on by jednak prawidłowo, gdyby szerokość kolumny nie została ustalona na 100%.
Powyższy kod powinien w teorii działać bardzo dobrze. Jednak kolumny zachodzą na siebie:
Rozwiązanie to umieszczenie w środkowej kolumnie kolejnego pojemnika:
Lorem Ipsum...
Któremu należy nadać odpowiedni margines:
#content {
margin-right: 170px
}
Teraz dwie kolumny działają w odpowiedni sposób:
Z efektem możesz się zapoznać w pliku przyklad1.html.
Dodajemy płynne tło
Powyższy układ kolumnowy ma jedną istotną wadę. Kolumny nie rozciągają się w pionie. Rozwiązaniem tego problemu jest objęcie kolumn dodatkowym pojemnikiem i nadanie mu podwójnego tła. Głównym tłem będzie tło środkowej kolumny, a dodatkowym będzie obrazek imitujący rozciąganie prawej kolumny. Obrazek musi mieć więc szerokość dokładnie 170 pikseli:
Spójrz na uzupełniony kod HTML:
Lorem Ipsum
Lorem Ipsum
Kod CSS dla nowego pojemnika to tylko nadanie tła z powtarzalnością w pionie:
#background {
background: #e7e2d5 url(right.png) right repeat-y;
}
Pod dwoma kolumnami pojawił się także DIV z klasą clear. Odpowiada on za automatyczne rozciągnięcie nowej pojemnika dzięki poniższemu kodowi:
.clear {
clear: both
}
Spójrzmy jeszcze na całość kodu CSS:
#top {
height: 80px;
background: #d4f393
}
#footer {
background: #bdf884;
height: 60px;
clear:both
}
#right {
float: right;
width: 170px;
background: #cfc4a9
}
#middle {
float: left;
width: 100%;
margin-right: -170px;
}
#content {
margin-right: 170px;
background: #e7e2d5
}
#background {
background: #e7e2d5 url(right.png) right repeat-y
}
.clear {
clear: both
}
Z gotowym przykładem możesz się zapoznać tradycyjnie w pliku przyklad2.html.
Czas na trzy kolumny
Stworzenie układu z trzema kolumnami jest na ogół dużym wyzwaniem. Jednak w przypadku naszego układu dwukolumnowego dodanie lewej kolumny wymaga jedynie kilku prostych modyfikacji. Dla uproszczenia przykładu załóżmy, że lewa kolumna będzie posiadać taką samą szerokość i identyczny kolor, jak kolumna prawa. Dzięki temu możemy posłużyć już przygotowanym plikiem graficznym imitującym tło.
Finalny kod HTML prezentuje się następująco:
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Jak łatwo zauważyć, dokonaliśmy w nim dwóch ważnych modyfikacji. Po pierwsze, lewa kolumna znajduje się wewnątrz DIV-a #content, a kolumnę środkową objęliśmy DIV-em #center. Kod CSS dla tych dwóch elementów wygląda następująco:
#left {
width: 170px;
float: left;
background: #cfc4a9
}
#center {
margin-left: 170px
}
Dodatkowo wszystkie kolumny są teraz objęte dwoma pojemnikami imitującymi tło: #background i #background2. Pierwszy tworzy tło dla kolumny środkowej i prawej:
#background {
background: #e7e2d5 url(right.png) right repeat-y
}
Drugi pojemnik odpowiada za tło jedynie dla kolumny lewej:
#background2 {
background: url(right.png) left repeat-y
}
To już niemal koniec. Ostatnim krokiem jest dodanie imitacji tła dla DIV-a #content, który obejmuje dwie kolumny:
#content {
margin-right: 170px;
background: #e7e2d5;
background: url(right.png) left repeat-y
}
Na końcu spójrzmy na całość kodu CSS:
#top {
height: 80px;
background: #d4f393
}
#footer {
background: #bdf884;
height: 60px;
clear:both
}
#left {
width: 170px;
float: left;
background: #cfc4a9
}
#center {
margin-left: 170px
}
#right {
float: right;
width: 170px;
background: #cfc4a9
}
#middle {
float: left;
width: 100%;
margin-right: -170px
}
#content {
margin-right: 170px;
background: #e7e2d5;
background: url(right.png) left repeat-y
}
#background {
background: #e7e2d5 url(right.png) right repeat-y
}
#background2 {
background: url(right.png) left repeat-y
}
.clear {
clear: both
}
Nic nie stoi na przeszkodzie, aby lewa kolumna posiadała inne tło lub szerokość. Wtedy należy użyć innego pliku graficznego, jako tła dla pojemników #background2 oraz #content. Finalny rezultat naszych działań przedstawia ilustracja:
Kod gotowy do wykorzystania znajduje się w pliku przyklad3.html
Podsumowanie
Tworzenie układów kolumnowych na bazie przesunięcia środkowej kolumny przy pomocy negatywnego marginesu okazuje się być prostym zadaniem. Wystarczy zrozumieć zasadę działania negatywnych marginesów oraz poznać kilka sztuczek z imitowaniem tła przy użyciu plików graficznych.
Przedstawione przykłady można pobrać tutaj:
