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ę: 

 <!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:

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: left; width: 80%; }
 #content { float: right; width: 50%; }
 #category { float: left; width: 50%; }
 #sidebar{ float: right; width: 20%; }

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: 02.04.2010, 19:34
submit