Connect with us

Czego poszukujesz?

Internet Maker

Jak stworzyć układ kolumnowy przy użyciu negatywnych marginesów?

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...

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

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

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:

Prowadzący bloga poświęconego użyteczności oraz właściciel firmy realizującej audyty serwisów internetowych.

Może cię też zainteresować

Internet Maker

Dziś stworzymy galerię zdjęć z opcją zoom po kliknięciu. Dodamy także przycisk do zamknięcia grafiki po tym, jak zostanie ona powiększona. I najlepsze- wszystko to wykonamy tylko przy użyciu CSS.

Internet Maker

W poniższym tutorialu będziemy ustalać style dla bloków tekstowych oraz buttonów przy tworzeniu ciekawych formularzy do wyszukiwania.

Internet Maker

Artykuł ten przedstawi użyteczne a zarazem darmowe narzędzie przydatne w pracy każdej osobie zajmującej się Webdesignem. Stworzone przez Leę Verou, które powinno pomóc uwolnić się od męczących prefiksów...

Internet Maker

W Magazynie T3 prezentujemy szeroką gamę tutoriali od prostych porad dotyczących CSS do zaawansowanych projektów PHP. Tym razem nasz tutorial jest skierowany do tych, którzy nadal są początkujący, jeśli...