Tutorial — kolumnowy, przejrzysty layout: display

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

 <?xml version="1.0" encoding="UTF-8"?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd" xml:lang="pl">
 <head>
   <title>2 kolumny</title>
 </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 display: 

 #content
 {
 display: inline-block;
 width: 80%;
 }

Wartość właściwości display 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
 {
 display: inline-block;
 width: 20%;
 }

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Zmodyfikowano: 31.08.2011, 18:43
submit