Płynne gradienty imitujące tabelki
03 listopada 2007
Głównym argumentem osób nie stosujących standardów w projektowaniu jest twierdzenie, jakoby nie wszystkie układy tabelaryczne dało się przenieść do CSS. Dzisiaj chcę pokazać jeden z nich. Zadaniem kodera jest umieścić dwa tła rozciągające się do szerokości przęglądarki – jeden z lewej, drugi z prawej. Przykładowo taki nagłówek:
Pod nagłówkiem zwykle ciągnie się dalsza część strony, ograniczona w poziomie kontenerem.
Istnieje rozwiązanie opierające się na wyśrodkowaniu długiego na kilka tysięcy pikseli obrazka sklejonego z dwóch gradientów, ale jest ono bardzo nieeleganckie.
- Jesteśmy uzależnieni od rozdzielczości.
- Zwiększamy niepotrzebnie wagę pliku wydłużając szerokość.
Nie będziemy z niego korzystać – zwłaszcza, że problem nie tylko dotyczy mojego przykładu, ale też bogatych graficznie nagłowków. Jak widać w podlinkowanej stronie (screen), mimo użycia CSS do opisania wyglądu całej strony, Interia oparła szkielet strony na tabeli.
Jakie rozwiązanie jest więc najlepsze? Rozciągnąć dwa elementy na 50% okna przeglądarki, ułożyć obok siebie, umieścić gradienty w tle i przykryć w miejscu łączenia trzecim tłem.
Potrzebny HTML:
<div id="masthead"><div class="primary"></div><div class="secondary"></div><div class="wrap"><h1><a href=""></a></h1></div></div>
Element #masthead rozciąga się na 100% szerokości okna. Divy .primary i .secondary mają ustawione wymiary i są wypozycjonowane względem niego.
#masthead {position: relative;}#masthead .primary,#masthead .secondary {position: absolute;top: 0;height: 125px;width: 50%;background-repeat: repeat-x;}
Pozostaje dodać tło (wyciąć je należy z zaznaczonych na ciemno części layoutu) i pozycję.
#masthead .primary {left: 0;background-image: url(left.png);}#masthead .secondary {left: 50%;background-image: url(right.png);}
I możemy oglądać już pierwszy efekt naszych starań. Z powodu braku ustalonej wysokości dla #masthead, tekst głównej zawartości strony wchodzi pod nagłówek – pozbędziemy się tego problemu już za moment.
Aby połączyć gradienty w naturalny sposób, należy teraz przykryć je w środku ostatnim obrazkiem:
W moim przykładzie potrzeba dodatkowej przestrzeni, aby zamknąć biały obszar z nagłowkiem, ale zasada jest jedna – musimy wyciąć obrazek dokładnie ze środka. Jeśli nie chcemy powtarzać gradientów (wypozycjonowanych pod), możemy je wyciąć zostawiając przezroczyste miejsce w pliku.
Korzystamy z elementu .wrap i pozycjonujemy go na środku całego nagłowka:
#masthead .wrap {position: absolute;top: 0;left: 50%;height: 125px;width: 770px;margin-left: -385px;background: url(center.png) 50% 0 no-repeat;}
I dodajemy odstęp dla zawartości:
#masthead {position: relative;margin: 40px 0 15px 0;padding-bottom: 125px;}
Rezultat jest już prawie wystarczający. Parę dodatkowych reguł dla tytułu oraz zawartości i skończone.
Sposób, który pokazałem jest uniwersalny i zniesie dużo modyfikacji, niezależnie od efektu jaki chcemy uzyskać (i niekoniecznie musi to być nagłówek). Aby to udowodnić, przepisałem szablon podlinkowanej na początku wpisu Interii na wersję beztabelkową.
Dlatego korzystając z możliwośći pragnę przypomnieć, że tabele nie służą do budowania layoutu. Nie spotkałem się na razie z układem, którego nie dałoby się zrobić semantycznie i przy pomocy CSS. Wymaga to czasami trochę pracy, ale profesjonalne podejście zawsze się zwróci.
Piszmy HTML myśląc o zawartości, a nie prezentacji.
Taeril 6
03 listopada 2007, 23:51
Livio 16
04 listopada 2007, 09:19
coldpeer 18
04 listopada 2007, 10:57
Michał Moroz 29
04 listopada 2007, 15:56
Hoppke 42
06 listopada 2007, 11:54
