HTML: układ stałej szerokości

Układ o stałej szerokości znajduje zastosowanie m.in. w przypadku witryn ozdobionych szerokim graficznym banerem. Sztywne ustalenie szerokości gwarantuje, że przy zmianie wielkości okna przeglądarki poszczególne elementy witryny nie będą się rozjeżdżały. Układ taki możemy przygotować wykorzystując jeden element div i odpowiednie style.

Kolumna stałej szerokości wyśrodkowana na stronie

Pierwszym etapem pracy nad układem o stałej szerokości jest przygotowanie głównego pojemnika. Pojemnikiem tym będzie oczywiście element div. Treść strony będzie zawarta wewnątrz tego elementu. Kod HTML takiego rozwiązania przyjmuje bardzo lakoniczną postać:

    

        Lorem ipsum...
    

Wewnątrz sekcji div możemy umieścić – oprócz tekstów – również inne znaczniki HTML. W ten sposób możemy wprowadzić dalszy podział poziomy (np. na nagłówek, tekst i stopkę), pionowy (np. na kilka kolumn tekstu) lub mieszany (tj. nagłówek, menu, kilka kolumn tekstu, stopka).

Style CSS

Szerokość układu oraz jego położenie na środku strony definiujemy w arkuszach stylów. Za wyśrodkowanie elementu div odpowiada atrybut margin:

margin : 0px auto;

Dla potrzeb przeglądarki Internet Explorer w wersji 5 warto dołączyć atrybut text-align przy opisie elementu body. Wówczas układ pozostanie poprawny również w starszych wersjach Internet Explorera. Pełne style formatujące kolumnę tekstu są następujące:

body {
    margin      : 0px;
    padding     : 0px;
    text-align  : center;
}
#pojemnik {
    margin  : 0px auto;
    padding : 0px;
    width   : 800px;
}

Tak przygotowany układ po wypełnieniu tekstem \”Lorem ipsum\” i zmianie tła został przedstawiony na rys. 1.

Podział głównego pojemnika

Jako przykład zastosowania takiego układu opiszę dwie witryny: \”One step\” oraz \”Rzeżucha\”.

Nagłówek, stopka, menu pionowe i zawartość

Witryna pt. \”One step\” dzieli główny pojemnik na cztery obszary: nagłówek, stopkę menu oraz tekst. Podział ten jest osiągnięty przez wstawienie do głównego pojemnika dwóch obrazów (nagłówka i stopki) oraz dwóch sekcji div o identyfikatorach menu oraz tekst.

  
  

    

      
LOREM
      
IPSUM
    
  
  

    Lorem ipsum...
  
  

Arkusz stylów należy wzbogacić o opis dwóch sekcji div:

#menu {
    float        : left;
    margin-left  : 10px;
    margin-right : 10px;
}
#tekst {
    float         : right;
    width         : 520px;
    padding-right : 30px;
    padding-left  : 30px;
    text-align    : justify;
    border-left   : 1px dashed black;
}

oraz menu w postaci listy wypunktowanej:

#menu ul {
    list-style-type : none;
}

Gotowa witryna pt. \”One step\” została przedstawiona na rys. 2.

Nagłówek, stopka, menu poziome i zawartość

Na witrynie pt. \”Rzeżucha\”, w miejsce obrazów nagłówka i stopki wykorzystałem elementy div z ustalonymi obrazami tła. Rozwiązanie takie różni się od poprzedniego tym, że nad tak wstawionymi obrazami możemy w łatwy sposób umieścić tekst (na witrynie \”Rzeżucha\” stopka zawiera informacje o prawach autorskich), a ponadto wyłączenie arkuszy stylów powoduje usunięcie banerów.

  

  

    

      
LOREM
      
IPSUM
    
  
  

    Lorem ipsum...
    
    Curabitur non turpis...
    
  
  

    ©2006 Rzeżucha...
  

Arkusze stylów zawierają obrazy tła nagłówka i stopki oraz centrują menu:

#naglowek {
    border-bottom : 1px solid black;
    height        : 100px;
    background    : url(\'rzezucha.png\');
}
#menu {
    text-align  : center;
}
#tekst {
    padding        : 0px;
    padding-bottom : 20px;
}
#stopka {
    height      : 100px;
    background  : url(\'rzezucha-dol.png\');
    text-align  : center;
    font-size   : 80%;
    border-top  : 1px solid black;
}

Menu jest wykonane z wykorzystaniem identycznej jak poprzednio listy wypunktowanej. Zamianę menu pionowego w poziome osiągniemy stylami:

#menu ul {
    list-style-type : none;
}

#menu li {
    display : inline;
}

Gotowa witryna pt. \”Rzeżucha\” została przedstawiona na rys. 3.