Publikacja ta jest tłumaczeniem “Faux Columns” autorstwa Dan’a Cederholm - założyciela i dyrektora SimpleBits, LLC.

Dodaj komentarz
Zgłoś pomyłkę

Jedno z częściej padających pytań - co należy zrobić, aby prawa kolumna tworzonej strony rozciągała się na całą stronę? Technika ta jest całkiem prosta - zapewne wielu z was już ją zna, a dla tych, którzy jeszcze nie mieli okazji poznać, może stać się całkiem przydatnym trickiem.

Pewnym frustrującym elementem CSS, jest fakt, iż elementy rozciągają się tylko na taką długość, na jaką to potrzebne. Jeśli obraz o wysokości 200 pixeli zostanie zawarty wewnątrz <div>, wtedy <div> będzie tak długi, jak sam obrazek, a więc na 200 pixeli.

Staje się to poważnym mankamentem, gdy używasz <div> do budowy struktury strony, tworząc budowę kolumnową. Jedna kolumna może okazać się dłuższa, niż druga (patrz ilustracja). W zależności od ilości treści, wyjątkowo trudnym staje się stworzenie struktury, w której obie kolumny są tej samej długości posiadając różne tła.

Istnieje kilka sposobów, aby kolumny te wyglądały na elementy równej długości, bez względu na ilość treści, jaka jest w nich zawarta. Poniższa technika nadaje się do stosowania w strukturach o określonej szerokości.

Zawstydzająco prostym rozwiązaniem jest użycie powtarzającego się wertykalnie obrazu tła, w celu stworzenia iluzji różnokolorowych kolumn (patrz ilustracja - proporcje zmienione w celach demonstracyjnych). Po lewej stronie znajduje się szary pasek dekoracyjny, po nim główna kolumna z treścią z białym tłem, następnie kolumna beżowa stanowiąca tło dla prawej kolumny i ponownie szary dekoracyjny pasek.

Cały obraz powinien mieć wysokość zaledwie kilku pixeli, ale powtarzając go w tle za pomocą CSS, zostanie on rozciągnięty na całą długość strony - bez względu na ilość treści zawartej w kolumnach.

Styl naszej strony powinien zawierać następującą linię:

background: #ccc url(../images/bg_birch_800.gif)
repeat-y 50% 0;

Deklaruje ona szary kolor tła strony i powtarza obraz tła pionowo (repeat-y). Fragment 50% 0; określa położenie obrazu tła - w tym wypadku, 50% od lewego brzegu strony (a więc po środku) i 0 pixeli od górnego brzegu strony.

Gdy tło jest już gotowe, dobrze wypozycjonowana struktura stanowi zewnętrzną warstwę strony, a umiejscowiona jest przy użyciu odstępów (padding) i marginesów (margin) dla lewej i prawej kolumny (patrz ilustracja).

Jeśli w obu kolumnach chcemy użyć obramowań, odstępów i marginesów, musimy zadbać o uzdatnienie naszego rozwiązania dla przeglądarki Internet Explorer na platformie Windows (Box Model Hack).

Jeśli jednak zdecydujemy się na użycie jedynie marginesów w celu wypozycjonowania naszej struktury, wtedy użycie Box Model Hack nie będzie konieczne.

2006 © All rights reserved.
Wszelkie prawa autorskie zastrzeżone. Kopiowanie, przetwarzanie i dystrybucja całości lub części powyższego materiału bez zgody autorów zabroniona! Jeśli jesteś zainteresowany publikacją tego materiału prosimy o kontakt.

Brak komentarzy. Dodaj komentarz jako pierwszy!