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:

1
2
3
4
5
6
7
8
9
10
11

<div id="top">Nagłówek serwisu</div>
 
<div id="middle">
	Lorem Ipsum...
</div>
 
<div id="right">
	Lorem Ipsum...
</div>
 
<div id="footer">Stopka serwisu</div>

Kod zawiera nagłówek, kolumnę środkową, prawą oraz stopkę. Kod CSS dla tych dwóch ostatnich pojemników jest bardzo prosty:

1
2
3
4
5
6
7
8
9
10

#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:

1
2
3
4

#right {
	float: right;
	width: 170px
}

Natomiast kod dla kolumny środkowej przedstawia się następująco:

1
2
3
4
5

#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:

1
2
3
4
5

<div id="middle">
	<div id="content">
		Lorem Ipsum...
	</div>
</div>

Któremu należy nadać odpowiedni margines:

1
2
3

#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:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="background">
	<div id="middle">
		<div id="content">
			Lorem Ipsum
		</div>
	</div>
 
	<div id="right">
		Lorem Ipsum
	</div>
 
	<div class="clear"></div>
</div>

Kod CSS dla nowego pojemnika to tylko nadanie tła z powtarzalnością w pionie:

1
2
3

#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:

1
2
3

.clear {
	clear: both
}

Spójrzmy jeszcze na całość kodu CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="background">
	<div id="background2">
		<div id="middle">
			<div id="content">
 
				<div id="left">
					Lorem Ipsum
				</div>
 
				<div id="center">
					Lorem Ipsum
				</div>
 
			</div>
		</div>
 
		<div id="right">
			Lorem Ipsum
		</div>
 
		<div class="clear"></div>
	</div>
</div>

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:

1
2
3
4
5
6
7
8
9

#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:

1
2
3

#background {
	 background: #e7e2d5 url(right.png) right repeat-y
}

Drugi pojemnik odpowiada za tło jedynie dla kolumny lewej:

1
2
3

#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:

1
2
3
4
5

#content {
	margin-right: 170px;
	background: #e7e2d5;
	background: url(right.png) left repeat-y
}

Na końcu spójrzmy na całość kodu CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

#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:

Może Cię zainteresować:

1. HTML: układ stałej szerokości
2. Gimp: tworzenie szablonów stron WWW cz. 2
3. Gimp: tworzenie szablonów stron WWW cz. 7