Faux Columns PL

11.09.2006 | 19:02 Kategorie: XHTML & CSS

Jeszcze nie dawno szukałem rozwiązania na nurtujące mnie ciągle pytanie: co zrobić, aby obie kolumny w dwukolumnowym designie były zawsze tej samej wysokości? A przynajmniej, żeby tylko przypominały z wyglądu taki efekt. Odpowiedzią jest bardzo często stosowany i przez wielu znany bajer o nazwie Faux Columns. Możemy o nim poczytać na A List Apart. To pod ten adres zawsze odsyłają na forach, gdy ktoś się pyta o dwie kolumny tej samej wysokości. Jak już mówiłem - sam szukałem takiego rozwiązania. Google’ując po sieci za “faux columns” nie mogłem nigdzie natrafić na polską wersję tej instrukcji. Stworzenie tego efektu jest tak proste, że polska wersja językowa do tego nie jest potrzebna. Niby… Bo przecież gdyby wszystko było takie jasne, ludzie po otrzymaniu linku do A List Apart nie prosiliby o wytłumaczenie tego, bo “nic nie rozumieją” (zwykle jednak nie chce im się czytać zbyt długiego tekstu ). Dlatego postanowiłem wyjść takim osobom na przeciw i napisać w miarę łopatologiczną instrukcję (oczywiście w języku polskim) “Jak otrzymać Faux Columns?”.

O co chodzi?
Zwykły, najprostszy w świecie szablon strony składa się z topu (cała góra), contentu (treść właściwa), sidebaru (lewy lub prawy pasek z menu) oraz footera (stopka). Taki design możecie zobaczyć np. tutaj: Link.
Jak widać, jeśli content jest wypełniony taką ilością tekstu, że jego wysokość jest większa od wysokości sidebaru to pod sidebarem jest białe pole, co świadczy o tym, że sidebar się nie rozciąga. Tak samo jest, gdy sidebar jest większy od contentu. Wtedy akurat pod contentem mamy wolne pole.

Rozwiązanie
Istnieje prosty trik, przez który odnosimy wrażenie, że oba divy (content oraz sidebar) są zawsze równej wysokości. Polega on na dodaniu jeszcze jednego diva obejmującego sidebar oraz content.
Aktualnie nasz szablon ma taką budowę:

<div id="pagewidth">
<div id="top"> Header</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div>
</div>

Teraz czas stworzyć tego diva, który ma obejmować sidebar oraz content. Nadamy mu id wraper Przed <div id="content">Content</div> dodajemy jeszcze jedną linijkę kodu:

<div id="wraper">

Dobra… Stworzyliśmy diva, ale trzeba go jeszcze zamknąć oraz dodać odpowiednio ostylowany znacznik <br /> (spowoduje on, że następna linia znajdzie się pod obiektem niezależnie od jego położenia), bez niego trik nie zadziała np. pod Firefoksem. Więc po <div id="sidebar">Sidebar</div> dodajemy kolejne dwie linijki kodu:

</div>
<br style="clear: both" />

Obecnie nasz kod HTML powinien wyglądać tak:

<div id="pagewidth">
<div id="top"> Header</div>
<div id="wraper">
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
</div>
<br style="clear: both;" />
<div id="footer">Footer</div>
</div>

Następnym krokiem będzie dodanie do arkusza stylów odpowiedniego kodu CSS dla naszego nowego diva:

#wraper{
background: url('img/bg.jpg') repeat-y;
}

Powyższy kod będzie nadawał naszemu nowemu divowi background, czyli tło obrazkowe. Obrazek w tle będzie się powtarzał względem osi y, czyli mówiąc po ludzku: będzie się powtarzał w pionie.

Teraz jeden z najważniejszych etapów: stworzenie odpowiedniego pliku graficznego do tła. Najłatwiej jest zrobić zrzut ekranu (klawisz PRINT SCREEN na klawiaturze) aktualnego stanu strony. U mnie wygląda on tak: Link. Musimy znaleźć takie miejsce, gdzie nie ma tekstu ani w sidebarze, ani w contencie. Zaznaczyłem je tutaj na czerwono: Link (wy tego oczywiście nie zaznaczajcie na czerwono ).
Teraz należy wyciąć ten pasek (UWAGA! Musi on mieć szrokość obu naszych divów! Czyli musi mieć po prostu szerokość całej naszej strony i zawierać w sobie tło z sidebaru oraz contentu!) i zapisać jako osobny plik bg.jpg mieszczący się w podkatalogu /img/ naszej strony.
U mnie, obrazek ten będzie miał wysokość 3px, a szerokość 700px. A oto i on: Link.

I gotowe! Oto efekty naszej pracy: Link.

Ludwik.org

Faux Columns PL

Komentarze (8):

Dodaj komentarz: