października 20
Techniki budowy layoutów wielokolumnowych część 1 - Faux Columns
Technika Faux Columns zaprezentowana na A List Apart jest jednym ze sposobów na wielokolumnowy layout o kolumnach z jednakową wysokością. Problem, który rozwiązuje ta technika jest prze ze mnie opisany tutaj.
Sposób ten zakłada, że kolumny mają różny kolor (bądź gradient) tła, a także stałą szerokość – jeżeli chcemy, by strona i kolumny miały szerokość opartą na procentach sposób ten będzie dla nas nieprzydatny.
Spójrzmy na nasz dotychczasowy kod HTML i CSS (pokazane będą tylko istotne fragmenty, resztę zobaczysz w źródłach):
<div id="all"> <div id="header">Logo</div> <div id="left">Lewy blok</div> <div id="center">Środkowy blok<br /><br /><br /></div> <div id="right">Prawy blok</div> <div id="footer">Stopka</div> </div>
#header{
height: 70px;
}
#left{
width: 200px;
float: left;
background-color: #c8c8c8;
}
#center{
width: 500px;
float: left;
background-color: #FAFAFA;
}
#right{
width: 100px;
float: right;
background-color: #c6c6c6;
}
#footer{
height: 70px;
clear: both;
}
Cała technika opiera się na powielanym pliku graficznym, posiadającym szerokość wszystkich kolumn, zawierającym w sobie całe tło wszystkich kolumn. Przykładowo dla naszego layoutu będzie to taki obrazek. Podpowiem, że najłatwiej taki obrazek stworzyć poprzez wycięcie odpowiedniej części ze screena naszej strony. Nie ma potrzeby by plik miał więcej niż 1 px wysokości, obraz o takim rozmiarze będzie miał najmniejszą wagę i wczytywać będzie się szybko.
Aby wykorzystać ten obrazek, blokowi obejmującemu całą zawartość strony (w naszym przypadku jest to #all) nadajemy wspomniany wcześniej plik graficzny jako tło powtarzane w pionie (repeat-y):
#all { background: url(background.png) repeat-y; }
Zabieg jest bardzo prosty i daje oczekiwany przez nas rezultat.
Oczywiście jednakowa wysokość bloków to jedynie iluzja, jednak całkowicie dla nas wystarczająca i wyglądająca poprawnie. Jest to jedna z najprostszych metod umożliwiających poprawne wyświetlanie takich layoutów na wszystkich przeglądarkach. Inne sposoby zostaną przedstawione w kolejnych artykułach na moim blogu.
Podobne wpisy
Licencja:
