czerwca 22
Techniki budowy layoutów wielokolumnowych - wstęp
Obserwując wiecznie istniejący problem z layoutem wielokolumnowym opartym na divach i CSS miast tabelkach, spowodowany być może brakiem kompetentnych artykułów w języku polskim na ten temat postanowiłem tę lukę zapełnić ;] W kolejnych artykułach będę prezentował różne techniki tworzenia takich layoutów.
Dziś zajmiemy się omówieniem samego problemu występującego przy projektowaniu takich stron. Zaprezentuję też odświeżoną wersję mojego artykułu na temat jednej z tych metod, stworzonego kilka lat temu.
W czym problem?
Za przykład posłuży niezwykle prosty kod layoutu z logiem, 3 kolumnami i stopką (pełny kod ujrzysz w źródle strony).
<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;
}
Jest to bardzo często spotykany układ strony - w głównym bloku miejsce jest przeznaczone na treść, w bocznych na nawigacje, logowanie etc. Głównym kłopotem w wielokolumnowym layoucie jest różna wysokość poszczególnych bloków i w zasadzie niemożność w prosty sposób ominięcia tego problemu. Gdy jeden blok będzie posiadał więcej zawartości niż pozostałe to rzecz jasna jego wysokość będzie inna niż sąsiadów – a co za tym idzie i tło nie będzie powielone do odpowiedniej wysokości.
Oczywiście jest to nieistotne, gdy nasze bloki mają jednakowy kolor tła, bądź ustalimy tym blokom jednakową, stałą wysokość. W przeciwnym wypadku wynik naszego prostego kodu będzie wyglądał nieestetycznie.
Tabele
Niektórzy mogą powiedzieć - „przecież można to zrobić na tabelach!”. Oczywiście – wtedy naturalnie bloki będą miały jednakową wysokość i dobrze dobrane tło, jednak zgodnie z ideą semantycznego kodu tabele nie służą do budowy layoutów, powinny być używane tylko i wyłącznie do prezentacji danych. Jest to tylko jeden z powodów dlaczego tabele śmierdzą.
Jednak dzięki CSS bez problemu możemy osiągnąć wygląd i prostotę tabel, dając odpowiednie style poszczególnym blokom. Obejmiemy kolumny dodatkowym blokiem ze stylem display: table, a naszym kolumnom nadamy styl display: table-cell.
Sprawa jest prosta i elegancka jednak…. Wejdźmy na taką stronę pod IE 6 :/ Niestety badzIEwie nam tego kodu poprawnie nie obsłuży. Dlatego webdeveloperzy przez lata tworzyli liczne użyteczne sposoby tworzenia stron w taki sposób, by zachowywać semantykę i by jednocześnie strona była poprawnie wyświetlana i pod tymi słabszymi przeglądarkami.
Techniki
Technik jest wiele, dlatego w kolejnych artykułach postaram się przedstawić choć kilka najciekawszych. Jedną metodę niegdyś już przedstawiłem, postanowiłem ją przeedytować by była czytelniejsza i lepiej opisana. Serdecznie zapraszam do lektury.
Podobne wpisy
Licencja:
