MatheW’s blog

lipca 15

Techniki budowy layoutów wielokolumnowych część 3

Tag: CSS, XHTML — MatheW @ 17:19. . Post odwiedzany 4848 razy. Trackback

Dziś zaprezentuję kolejną technikę tworzenia wielokolumnowych layoutów, rozwiązującą problem poruszony we wstępie do serii. Metoda ta opiera swoje działanie na obramowaniach kontenera, które dzięki możliwości nadania dowolnej szerokości i koloru idealnie nadają się do symulowania jednakowej długości kolumn.

Technika bywa używana zwykle do designów o stałej szerokości, jednak może być wykorzystywana także do stron z contentem o zmiennej wielkości (bloki boczne niestety muszą mieć stałą szerokość, o czym na końcu artykułu).

Jak to działa?

Obejmujemy nasze trzy bloki kontenerem. Zauważmy, że pierwszy w kodzie pojawia się blok środkowy – jest to dobry nawyk – w sidebarach często umieszczamy rózne widgety, elementy z flashem, które spowalniają wczytanie strony i nie pozwalają internaucie na natychmiastowe zapoznanie się z najważniejszą treścią witryny.


<div id="all">
	<div id="header">Logo</div>
	<div id="container">
		<div id="center">Środkowy blok<br /><br /><br />jest zwykle dłuższy</div>
		<div id="left">Lewy blok</div>
		<div id="right">Prawy blok</div>
	</div>
	<div id="footer">Stopka</div>
</div>

Kontenerowi nadajemy obramowania po lewej i prawej stronie – ich szerokości mają być równe wielkości odpowiednich bloków bocznych, podobnie jak kolory tych obramowań. Szerokość kontenera ma być równa szerokości bloku z treścią.


#container{
	background-color: #FAFAFA; /*kolor środkowego bloku*/
	float:left;
	width:500px; /*szerokość środkowego bloku*/
	border-left:200px solid #c8c8c8; /*szerokość i kolor lewego bloku*/
	border-right:100px solid #c6c6c6; /*szerokość i kolor prawego bloku*/
}

Jak się domyślamy zostało to zastosowane, by przesunąć bloki boczne na obramowanie kontenera. Uzyskamy ten efekt poprzez odpowiednie marginesy ujemne każdego bloku. Nadanie środkowemu blokowi ujemnego marginesu prawego równego jego szerokości pozwoli na zrównanie jego lewego boku z blokiem lewym, który dodatkowo ma jeszcze ujemny margines lewy przenoszący go w jego odpowiednie miejsce. Natomiast blok prawy ma ustawiony ujemny margines prawy, co przesuwa go na prawe obramowanie kontenera.


#left{
	width: 200px;
	float: left;
	background-color: #c8c8c8;
	margin-left:-200px; /* ujemna szerokość */
	position: relative;
}
#center{
	width: 500px;
	float: left;
	background-color: #FAFAFA;
	margin-right:-500px; /* ujemna szerokość */
}
#right{
	width: 100px;
	float: right;
	margin-right:-100px;/* ujemna szerokość */
	background-color: #c6c6c6;
	position: relative;
}

Blokom bocznym dodajemy dodatkowo pozycjonowanie relatywne, coby głupi IE je nam w ogóle pokazał.

Efekt wygląda tak jak tego oczekiwaliśmy.

Ograniczenia

Sposób ten póki co nie nadaje się do procentowych szerokości bloków – niewiele przeglądarek wspiera procentowe wartości obramowań. Podobnie sprawa się ma z obrazkowym (np. gradient) tłem bloków – dopiero w CSS3 zaistnieje możliwość dodania obrazu jako tła obramowania.

Procentowa szerokość contentu

Możemy za to ustalić proporcjonalną szerokość samego środkowego bloku, poprzez parę niezbędnych zabiegów.

Zmieniamy stałą szerokość bloku obejmującego nagłówek, kontener, i stopkę na 100% i nadajemy display:inline, żeby poprawnie obsłużył go IE. Blokowi środkowemu nadajemy szerokość 100%, podobnie jak kontenerowi. Temu ostatniemu dodajemy ujemne marginesy po obu stronach, wartościami odpowiadające szerokościom bloków bocznych (te muszą być stałe). Identyczny zabieg czynimy dla nagłówka i stopki.


#header, #footer{
	background-color: #000000;
	color: white;
	margin-left:-200px; /* ujemna szerokość lewego bloku */
	margin-right:-100px; /* ujemna szerokość prawego bloku */
}
#container{
	background-color: #FAFAFA;
	float:left;
	width:100%;
	border-left:200px solid #c8c8c8; /* szerokość i kolor lewego bloku */
	border-right:100px solid #c6c6c6; /* szerokość i kolor prawego bloku */
	margin-left:-200px; /* ujemna szerokość lewego bloku */
	margin-right:-100px; /* ujemna szerokość lewego bloku */
	display:inline;
}

#left{
	width: 200px;
	float: left;
	background-color: #c8c8c8;
	margin-left:-200px;/* ujemna szerokość */
	position: relative;
}
#center{
	width: 100%;
	float: left;
	background-color: #FAFAFA;
	margin-right:-100%;
}
#right{
	width: 100px;
	float: right;
	margin-right:-100px; /* ujemna szerokość */
	background-color: #c6c6c6;
	position: relative;
}

Póki co strona nam się rozjeżdża – bloki wychodzą poza element body. Aby to naprawić nadamy mu margines wewnętrzny po obu stronach, którego szerokość będzie odpowiadała odpowiednim blokom kontenera. Dzięki temu bloki nie wyjadą poza objętość strony.


body{
	padding:0 100px 0 200px; /* druga wartość to szerokość prawego bloku, czwarta lewego */
}

Następnie ustalimy szerokość całej strony. Uczynimy to poprzez marginesy elementu body – które jak wiadomo mogą mieć wartość procentową. W tym przypadku cała strona będzie miała szerokość 90% okna przeglądarki (100% - 2*5% - marginesy są z dwóch stron :] ).


body{
	margin:0 5%; /* 100% - 2*5% = 90% - szerokosc układu */
	padding:0 100px 0 200px; /* druga wartość to szerokość prawego bloku, czwarta lewego */
}

W ten troszkę skomplikowany sposób uzyskaliśmy trójkolumnową stronę z proporcjonalną do ekranu szerokością.

Podsumowanie

Manipulacja obramowaniami to kolejny ciekawy pomysł na rozwiązanie problemu wielokolumnowych układów stron, który można z powodzeniem stosować bez zbędnych hacków. Na pewno nie jest to ostatni sposób, dlatego jeszcze jeden lub dwa opiszę.

Na koniec podaję przydatne linki na temat tego sposobu: