Tutorial — kolumnowy, przejrzysty layout: float
Kompletujemy klocki
Ten przykład skupia się głównie na układzie kolumnowym. Dlatego nie będą tu przedstawione sposoby na umieszczenie nagłówka czy stopki.
Aby ułożyć treść strony w dwóch kolumnach musisz zacząć od zbudowania prostej struktury. W tym przypadku potrzebujesz przykładowej zawartości do stworzenia dwukolumnowego szablonu. Strona będzie
zgrupowana w trzech oddzielonych elementach <div>
, a każdy z tych bloków będzie miał nadany unikatowy identyfikator, aby było łatwiej odwoływać się do poszczególnych elementów. Nazwy identyfikatorów mogą byc dowolne, ale zwyczajowo używa się:
- „container” -zawierać będzie całą zawartość strony,
- „content” — dla głównej zawartości,
- „sidebar” — dla mniejszej, pomocniczej kolumny.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>2 kolumny</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet leo.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet leo.</p>
</div>
</div>
</body>
</html>
Budowanie pojemnika — #container
W tym przykładzie naszemu pojemnikowi nadamy szerokości 90% strony i wyśrodkujemy zawartość w oknie. W celu zwiększenia przejrzystości można dodać obramowanie i wewnętrzne odstępy — padding.
#container
{
width: 90%;
margin: 1em auto;
border: 1px solid #C00;
padding: 1em;
}
Nadanie wartości auto dla właściwości margin-right
i margin-left
w trybie QuirksMode nie spowoduje wyśrodkowania treści.
Treść jest najważniejsza — #content
Dobrą praktyką i niepisanym standardem jest aby pojemnik z treścią znajdował się tak blisko początku dokumentu jak to możliwe, w wyniku czego będzie pokazywał się relatywnie szybciej niż inne elementy strony — w końcu po to ludzie odwiedzają naszą stronę.
W zależności od naszych upodobań treść może znajdować się po lewej lub prawej stronie. Aby ustawić ją w pożądanym miejscu należy użyć właściwości float:
#content
{
float: left;
width: 80%;
}
Wartość właściwości float
decyduje, po której stronie będzie znajdował się nasz pojemnik.
Menu i zdjęcia z wakacji — #sidebar
Z mniejszą kolumną postępujemy tak samo jak z jej większym bratem:
#sidebar
{
float: right;
width: 20%;
}
Wylało się
Możemy jednak zauważyć, że dodanie właściwości float
wyłączyło nasze kolumny z biegu dokumentu i nie mają one wpływu na
wysokość pojemnika #container
. Aby temu zaradzić jest kilka sposobów, jednak jednym z najprostszych jest dodanie dwóch właściwości do wspomnianego pojemnika:
#container
{
height: 100%;
overflow: hidden;
}
Dzięki temu nie będziemy musieli dodawać jeszcze jednego elementu, który posprzątałby po nas.
Bo do tanga trzeba trojga
Przykład ten można łatwo przekształcić w układ trójkolumnowy. Wystarczy wprowadzić kilka zmian:
- zmienić identyfikator
#content
na#wrap
- zamiast treści, do
#wrap
wkładamy dwa elementy<div>
i nadajemy im nazwy — np.,#content
i#category
Nasz kod powinien wyglądać teraz mniej więcej tak:
<div id="container">
<div id="wrap">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="category">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
Oraz deklaracje CSS:
#wrap{ float: right; width: 80%; }
#content { float: right; width: 50%; }
#category { float: left; width: 50%; }
Dzięki temu, niewielkim kosztem, mamy układ trój kolumnowy, a pojemnik z treścią nadal jest najwyżej.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 22.04.2007, 20:33