Projekt układu strony w oparciu o elementy div oraz arkusze stylów

Włodzimierz Gajda

Projektowanie układu witryny z wykorzystaniem arkuszy stylów oraz sekcji div staje się coraz bardziej popularne. Coraz częściej firmy zajmujące się tworzeniem witryn zaznaczają w swojej ofercie, że układ jest przygotowany w oparciu o style i w sposób zgodny ze standardami. Z racji na różnice w interpretacji stylów pomiędzy różnymi przeglądarkami początkowe etapy rezygnacji z tradycyjnych układów tabelkowych mogą być kłopotliwe.

Technika pracy nad układem strony

Zanim przystąpimy do pisania kodu HTML oraz CSS, warto poznać kilka sztuczek, które zwiększą wydajność i jakość dalszej pracy.

Po pierwsze tworzenie układu krok po kroku, ze sprawdzeniem poprawności przy każdej zmianie jest o wiele łatwiejsze niż szukanie błędu po wprowadzeniu wielu zmian na raz. Od pierwszych do ostatnich chwil należy testować stronę zarówno pod względem wyglądu w przeglądarce jak i poprawności kodu HTML i CSS.

Po drugie, z racji na różnice w interpretacji stylów nawet przez najnowsze przeglądarki, testy powinniśmy przeprowadzać w kilku przeglądarkach na raz. Dobrym wyborem jest używanie bieżących wersji Internet Explorera, Firefoxa, Opery oraz Netscape.

Kolejnym trikiem jest podglądanie zarówno układu jak i faktycznych rozmiarów sekcji div. Modyfikując na chwilę tło elementu div na dowolny, ale wyróżniający się kolor, ujrzymy wyraźnie jego położenie i wielkość. Zmiana koloru tła jest o wiele lepszą metodą niż wyświetlenie krawędzi (atrybut border). Wyświetlenie krawędzi elementu powoduje powiększenie rozmiaru, co często jest powodem „rozjeżdżania” się całości.

Zwróćmy uwagę, że metoda debugowania witryny polegająca na modyfikacji koloru tła jest niezależna od przeglądarki i umożliwia sprawdzenie położenia i wielkości elementu w każdej z przeglądarek.

Podsumowując, nad układem strony pracujemy:

Gdy układ się rozjeżdża

Największą trudnością jest wyłapywanie błędów, które powodują rozjeżdżanie układu strony. Błędy takie powstają zazwyczaj wtedy, gdy szerokość elementu div przekroczy ilość dostępnego miejsca. W celu zbadania położenia elementu stosujemy wspomniana już właściwość background. Natomiast w jaki sposób sprawdzić faktyczny rozmiar elementu na stronie? Metod rozwiązania tego problemu jest kilka.

Możemy skorzystać z programu Gimp (lub innego edytora graficznego posiadającego narzędzie Miarka). Wykonujemy zrzut ekranu (naciskamy klawisze Alt+PrintScreen), następnie obraz wklejamy w edytorze graficznym (w Gimpie wykonujemy operację Plik → Pobierz → From Clipboard). Wklejony obraz mierzymy stosując linijki, prowadnice i miarkę. Przykładowy pomiar szerokości sekcji div o czarnym tle wykonany w programie Gimp jest przedstawiony na rysunku 1. Oczywiście stosując podaną metodę możemy badać strony wyświetlane w dowolnej przeglądarce.

Rys. 1. Pomiar szerokości sekcji div wykonany w Gimpie

Przeglądarka Firefox posiada wtyczkę Web Developer Toolbar. Wtyczka ta, dostępna pod adresem http://chrispederick.com/work/firefox/webdeveloper/, zawiera między innymi narzędzie Information → Display Block Size, które wyświetla rozmiary wszystkich sekcji div na stronie. Wynik pomiaru jest przedstawiany w postaci niewielkiego prostokąta widocznego w lewym górnym narożniku sekcji div (rysunek 2). Metoda ta, choć bardzo wygodna, może być zastosowana wyłącznie wtedy, gdy korzystamy z przeglądarki Firefox. Jeśli układ strony wygląda dobrze w Firefoxie, a rozjeżdża się w Internet Explorerze (to jest najczęstsza sytuacja), niestety metoda ta jest bezużyteczna. Dodatkowym minusem wtyczki jest to, że prostokąty zawierające wymiary czasami zachodzą na siebie i są nie czytelne. Dzieje się tak wtedy, gdy elementy div pokrywają się. (Wtyczka Web Developer Toolbar posiada drugą opcję przydatną przy badaniu układu strony. Jest nią Outline → Block level elements. Włączenie opcji powoduje wyświetlenie obramowania wszystkich elementów blokowych występujących w kodzie witryny. Poszczególne elementy HTML różnią się kolorem obramowania, zaś na uwagę zasługuje fakt, że wyświetlane krawędzie nie zmieniają rozmiaru elementów.)

Rys. 2. Wymiary sekcji div wyświetlane w Firefoxie (wtyczka Web Developer Toolbar)

Wadą pierwszej z podanych metod jest stopień skomplikowania. Każdy pomiar wymaga kilkunastu kliknięć i zajmuje dużo czasu. Wadą drugiej to, że znajduje zastosowanie tylko w jednej z przeglądarek. Natomiast program Miarka (tabela 3) jest wygodnym narzędziem, które możemy stosować w odniesieniu do dowolnej aplikacji. Po wskazaniu kursorem wybranego piksela, program wyświetla rozmiar prostokąta, zawierającego piksele identycznego koloru. Wynik pomiaru elementu div w przeglądarce Opera został przedstawiony na rysunku 3.

Rys. 3. Pomiar wymiarów sekcji div wykonany programem Miarka

Powody rozjeżdżania układu

Szukając przyczyn błędów w układzie strony należy rozważyć następujące zagadnienia:

W odniesieniu do oprogramowania zawierającego błędy popularny był swego czasu żart „It's not a bug, it's a feature!”„To nie błąd, to cecha tego programu!”

Szukając przyczyny konkretnego błędu, badamy wszystkie powyższe czynniki, dążąc — jak zawsze podczas szukania błędów — do wyizolowania problemu.

W pierwszym kroku upewniamy się, że definicje stylów są poprawnie stosowane do wybranego elementu. Modyfikacja tła upewnia nas co do tego, że selektor jest poprawny, zaś przeniesienie stylów na koniec pliku CSS gwarantuje, że style nie są przysłonięte (o ile nie stosujemy kilku plików ze stylami, stylów wewnętrznych czy atrybutu style w kodzie HTML).

Jeśli style są częściowo stosowane przez przeglądarkę (np. zmienia się tło elementu div zaś nie zmienia się jego szerokość), to próbujemy ustalić, czy błędy nie wynikają z powodu złej interpretacji stylów przez przeglądarkę. Pewne różnice w interpretacji stylów oraz kodu HTML znajdziemy prawdopodobnie pomiędzy wszystkimi przeglądarkami. Stąd tak ważne testowanie w kilku przeglądarkach na raz. Przykładem są właściwości z przedrostkami min- oraz max- (np. min-height czy max-height). Właściwości te nie są interpretowane przez Internet Explorera. Jeśli przygotujemy duży projekt oparty o atrybuty min- i max-, testując jego wygląd w Firefoxie, to jego wygląd w Internet Explorerze będzie najprawdopodobniej błędny.

Interpretację wybranych atrybutów w konkretnej przeglądarce najlepiej sprawdzać na malutkich przykładach, wykorzystujących wyłącznie badany atrybut.

Kolejnym powodem, który często powoduje problemy jest zbyt duży rozmiar zawartości elementu. Zdarza się na przykład (ponownie w przeglądarce IE), że akapity występujące w elementach div mają zbyt dużą szerokość. Tutaj z pomocą przychodzi ustalenie rozmiaru elementów zawartych w sekcji div (do stwierdzenia istnienia tego problemu stosujemy omówioną już metodę modyfikacji tła elementu i pomiaru jego wielkości).

Nieco mniej oczywistym powodem zwiększenia szerokości elementów zawartych wewnątrz sekcji div może być obecność białych znaków. Ten problem dotyczy wszystkich przeglądarek. Na przykład opcje menu wykonanego za pomocą list wypunktowanych ul będą odsunięte od siebie o kilka pikseli, chyba, że usuniemy białe znaki otaczające elementy li oraz ul i zapiszemy kod całej listy w jednej linii:

<ul><li>ala</li><li>ma</li><li>kota</li></ul>

Zdarza się również, że na układ witryny ma wpływ kolejność oraz obecność dodatkowych elementów div. Przykładem takiej sytuacji jest kod:

<div id="lewo1">A</div>
<div id="lewo2">B</div>
<div id="prawo1">C</div>
<div id="prawo2">D</div>

Dosunięcie elementów o identyfikatorach lewo1, lewo2 do lewej krawędzi (styl float: left) oraz elementów prawo1, prawo2 do prawej krawędzi (styl float: right) nie da pożądanych efektów w przeglądarce Firefox. Natomiast dodając dodatkowe pojemniki lewy i prawy:

<div id="lewy">
  <div id="lewo1">A</div>
  <div id="lewo2">B</div>
</div>
<div id="prawy">
  <div id="prawo1">C</div>
  <div id="prawo2">D</div>
</div>

pozbędziemy się problemu.

Ostatnim z czynników, jaki czasami warunkuje poprawność wyglądu strony, bywa szerokość okna przeglądarki.

Pudełko

Kluczowym pojęciem przy tworzeniu układu strony jest pojęcie pudełka omówione szczegółowo w rozdziale 8 specyfikacji CSS zatytułowanym „Box model” . Pudełko to prostokąt zajmowany przez element HTML. Każdy element HTML użyty w kodzie strony poza elementami nagłówka posiada swoje pudełko. Przykładami są nie tylko sekcje div, ale również akapity p, elementy strong, em, tabelki, ich wiersze i komórki czy listy wypunktowane.

Wysokość i szerokość pudełka jest ustalana przez przeglądarkę na podstawie stylu oraz zawartości elementu. Pudełko składa się z następujących czterech obszarów: zawartości, wyrównania (ang. padding), obramowania (ang. border) oraz marginesu. Rysunek 4 przedstawia pudełko z napisem ALA.

Rys. 4. Poszczególne obszary pudełka i ich wpływ na szerokość całego elementu

Poszczególne obszary zostały na rysunku oznaczone: M - margines, B - obramowanie, P - wyrównanie oraz Z - zawartość. Margines, obramowanie i wyrównanie otaczają zawartość z czterech stron nazywanych top (góra), bottom (dół), left (lewa) oraz right (prawa). Atrybuty te możemy stosować do wszystkich czterech krawędzi na raz pisząc:

padding : 15px;
margin  : 30px;

oraz do każdej krawędzi z osobna stosując przyrostki -top, -bottom, -left oraz -right, na przykład:

border-left : 1px solid blue;
margin-top  : 100px;

Szerokość całego elementu wynika z szerokości poszczególnych obszarów i jest równa ich sumie:

lewy margines + lewe obramowanie + lewe wyrównanie +
zawartość +
prawe wyrównanie + prawe obramowanie + prawy margines

lub, w przypadku elementów symetrycznych w pionie:

2 * margines + 2 * obramowanie + zawartość

Warto zapamiętać, że szerokość elementu ustalana atrybutem width określa wyłącznie szerokość przeznaczoną na treść. W celu wyliczenia szerokości zajmowanej przez cały element należy do podanej wartości dodać marginesy, obramowanie i wyrównanie.

Jeśli chcemy otrzymać pudełko o szerokości 100 pikseli i posiadające jednopikselowe obramowanie wówczas podajemy marginesy równe 0, obramowanie równe 1, wyrównanie równe 0 oraz zawartość równą 98, według wzoru:

0 + 1 + 0 + 98 + 0 + 1 + 0

Style mają postać:

div {
    margin  : 0px;
    border  : 1px solid black;
    padding : 0px;
    width   : 98px;
}

Jeśli zechcemy, by cały element miał 150 pikseli szerokości, był otoczony 5-cio pikselowym marginesem, posiadał trzypikselowe obramowanie, zaś jego zawartość była odsunięta od krawędzi o 10 pikseli to należy użyć stylów:

div#mala {
    margin  : 5px;
    border  : 3px solid red;
    padding : 10px;
    width   : 114px;
}

gdyż

2 * 5 + 2 * 3 + 2 * 10 + 114 = 150

Po umieszczeniu powyższej sekcji wewnątrz sekcji o identyfikatorze duza o szerokości 160 pikseli (150 na zawartość, 10 na obramowanie):

<div id="duza">
    <div id="mala">X</div>
</div>

i nadaniu odmiennego tła, możemy dokładnie zmierzyć rozmiary wszystkich elementów układu, stosując wcześniej opisane metody. Szerokość i obramowanie sekcji nadrzędnej definiujemy następująco:

div#duza {
    border : 5px gray solid;
    width  : 150px;
}

W celu uniknięcia zamieszania, najlepiej w pliku CSS uporządkować kolejność wpisów dotyczących poszczególnych selektorów. Dobrą metodą jest umieszczanie atrybutów dotyczących pudełka przed wszelkimi innymi wpisami (np. kolorami lub czcionkami). Dodatkowo, atrybuty pudełka umieszczamy w kolejności:

margin
border
padding
width

(czyli w kolejności od najbardziej zewnętrznych do najbardziej wewnętrznych), po nich umieszczamy dodatkowe atrybuty dotyczące pudełka takie jak float czy clear, a na końcu czcionki, kolory czy wyrównanie. Dodatkowo, atrybuty z przyrostkami (np. left) piszemy w kolejności -top, -right, -bottom i -left:

p {
    margin      : 10px;
    border      : none;
    border-top  : 2px dashed blue;
    border-left : 1px solid red;
    padding     : 15px;
    width       : 100px;

    float       : left;
    clear       : left;

    font-family : verdana, helvetica, sans-serif;
    font-size   : 10pt;

    color       : blue;
    background  : yellow;
}

Pamiętajmy, że włączenie widoczności krawędzi elementu zwiększa jego rozmiar o podwójną grubość obramowania. Jeśli na stronie mamy element div o szerokość 100 pikseli:

div#str {
    margin  : 0px;
    border  : 0px;
    padding : 10px;
    width   : 80px;
}

i w celu sprawdzenia jego położenia wyświetlimy krawędzie:

div#str {
    margin  : 0px;
    border  : 1px solid red;
    padding : 10px;
    width   : 80px;
}

to element ten ma teraz szerokość 102 piksele. Może to mieć wpływ na inne elementy znajdujące się na stronie!

Znacznie lepiej jest zmodyfikować tło elementu:

div#str {
    margin     : 0px;
    border     : 0px;
    padding    : 10px;
    width      : 80px;
    background : red;
}

gdyż taka zmiana nie wpływa na jego rozmiar.

Pudełka ściśle przylegające

Do podzielenia obszaru strony na kilka mniejszych, ściśle przylegających obszarów, należy użyć pudełek, o marginesie, obramowaniu i wyrównaniu wynoszącym 0. Na przykład podział strony na dwie kolumny pionowe o szerokościach 250 oraz 500 pikseli wykonamy trzema sekcjami div:

<div id="strona">
  <div id="lewa">X</div>
  <div id="prawa">Y</div>
</div>

Sekcja zewnętrzna (identyfikator strona) posiada szerokość 750 pikseli, nie posiada obramowania, zaś wyrównanie wynosi 0, dzięki czemu zawartość będzie się rozciągała do samej krawędzi obszaru.

#strona {
    margin  : auto;
    border  : none;
    padding : 0px;
    width   : 750px;
}

Margines o wartości auto powoduje wyśrodkowanie elementu na stronie.

Elementy lewy i prawy nie posiadają marginesu ani obramowania, dzięki czemu przylegają do elementu nadrzędnego. Natomiast ich wyrównanie nie musi być równe zero:

#lewa {
    margin  : 0px;
    border  : none;
    padding : 10px;
    width   : 230px;
    float   : left;
}

#prawa {
    margin  : 0px;
    border  : none;
    padding : 20px;
    width   : 460px;
    float   : right;
}

Szerokość (przeznaczona na zawartość, nie uwzględniająca marginesu) elementu nadrzędnego wynosi 750 pikseli. Natomiast szerokość elementów lewego i prawego:

lewa   = 2 * 10 + 230 = 250
prawa  = 2 * 20 + 460 = 500
całość = lewa + prawa = 250 + 500 = 750

Jeśli nieopatrznie zwiększymy szerokość któregokolwiek z elementów wewnętrznych (na przykład dodając mu obramowanie bez równoczesnego zmniejszenie szerokości przeznaczonej na zawartość), to układ zacznie się rozjeżdżać.

W celu dodania jednopikselowego obramowania całości oraz pionowej, jednopikselowej krawędzi oddzielającej sekcje lewą i prawą, należy odpowiednio zmniejszyć niektóre wartości. Zakładając, że celem nadrzędnym jest to, by cały układ zajmował — podobnie jak poprzednio — 750 pikseli musimy zmienić rozmiar przeznaczony na zawartość.

Obramowanie zewnętrznego elementu div zmniejsza szerokość jego zawartości do 748 pikseli:

#strona {
    margin  : auto;
    border  : 1px solid blue;
    padding : 0px;
    width   : 748px;
}

Na elementy lewy i prawy przeznaczamy tym razem 248 oraz 500 pikseli odpowiednio.

Pionową kreskę pomiędzy elementami lewym i prawym dodajemy jako lewe obramowanie elementu o identyfikatorze prawy:

#lewy {
    margin  : 0px;
    border  : none;
    padding : 10px;
    width   : 228px;
    float   : left;
}

#prawy {
    margin      : 0px;
    border      : none;
    border-left : 1px solid blue;
    padding     : 20px;
    width       : 459px;
    float       : right;
}

Szerokości kolumn wynoszą teraz:

lewa   = 2 * 10 + 228     = 248
prawa  = 1 + 2 * 20 + 459 = 500
całość = 2 + 248 + 500    = 750

Zwróćmy jeszcze uwagę na fakt, że kolejność kolumn lewej i prawej w kodzie HTML możemy zmieniać. Nie ma to wpływu na wygląd witryny. Kod strony może być zapisany jako:

<div id="strona">
  <div id="lewa">X</div>
  <div id="prawa">Y</div>
</div>

lub

<div id="strona">
  <div id="prawa">Y</div>
  <div id="lewa">X</div>
</div>

Ma to znaczenie dla przeglądarek nie stosujących stylów. Kolejność elementów na stronie ustalamy tak, bez stosowania stylów, pierwszym elementem było menu strony, a nie treść.

Różnice w interpretacji CSS

Pomiędzy przeglądarkami istnieją różnice w interpretacji stylów. Jednym z przykładów są atrybuty z przedrostkiem min- lub max-. Atrybuty te nie są poprawnie interpretowane przez Internet Explorera. Do walki z problemem niezgodności możemy przygotować witrynę, która przesyła arkusze stylów przeznaczone dla konkretnej przeglądarki:

$ua = $_SERVER['HTTP_USER_AGENT']
if (ereg('Firefox/[0-9]\.[0-9]', $ua)) {
    $style = 'firefox.css';
} else {
    $style = 'style.css';
}

Również kod HTML możemy przygotowywać dla każdego klienta z osobna.

Jest to jednak rozwiązanie wzbudzające znaczne kontrowersje: wszak po to tworzymy układ strony zgodnie ze standardami i w oparciu o sekcje i style, by jedna wersja witryny była przeznaczona dla wszystkich klientów.

W tym konkretnym przypadku, a więc w odniesieniu do atrybutów min- i max-, lepsze rozwiązanie wykorzystuje drugi z błędów Internet Explorera, a mianowicie brak interpretacji selektora „dziecko” (znak >).

Selektor „dziecko” dotyczy elementów bezpośrednio zawartych wewnątrz danego elementu. Na przykład w akapicie:

<p>czarny, <em>czerwony</em>, niebieski</p>

element em jest bezpośrednio zawarty w elemencie p. Do modyfikacji elementów em zawartych bezpośrednio w p służy selektor:

p>em {
    ...
}

Natomiast w przykładzie:

<div id="menu">
    <em>black</em>
    <p>czarny, <em>czerwony</em>, niebieski</p>
</div>

możemy użyć selektora:

div#menu>p>em {
    ...
}

Selektor ten odnosi się wyłącznie do elementu em o treści czerwony (pierwszy z elementów em, ten o treści black, nie zostanie zmodyfikowany).

Jednakże Internet Explorer, jak już powiedzieliśmy, takich selektorów nie interpretuje. Jeśli chcemy nadać minimalną wysokość elementowi o identyfikatorze prawa zawartemu w sekcji strona, wtedy najpierw podajemy błędne style:

#prawa {
    height : 400px;
}

po czym przeglądarkom interpretującym selektor „dziecko” oraz atrybuty min- podajemy poprawne wartości:

body>#strona>#prawa {
    height     : auto;
    min-height : 400px;
}

Powyższa technika polega na podaniu błędnych stylów, które są przeznaczone dla IE, po czym, stosując selektor „dziecko” niedostępny dla IE, podajemy pozostałym przeglądarkom poprawne style.

W ten sposób, stosując wyłącznie CSS możemy w pewnym stopniu decydować o tym, dla której przeglądarki są przeznaczone jakie style. Ciągle mamy do czynienia z techniką przygotowywania stylu dla konkretnej przeglądarki, tyle tylko, że selekcja stylów dla przeglądarki jest ukryta w CSS. Oczywiście opieranie się na takich mechanizmach jest bardzo ryzykowne. Może się okazać na przykład, że kolejne wersje Internet Explorera interpretują selektor dziecko w inny sposób, przez co układ witryny ulegnie zmianie.

Witryna dla przeglądarek nie interpretujących stylów

Starsze przeglądarki, na przykład Netscape w wersji 4, interpretują style dość wybiórczo, efektem czego, witryna może stać się zupełnie nieczytelna. Taka sytuacja jest oczywiście nie do zaakceptowania. Do rozwiązania problemu stosujemy — podobnie jak w przypadku atrybutów min- oraz max- — wyłącznie CSS. Instrukcja @import występująca wewnątrz arkusza stylów importuje style z podanego pliku CSS:

@import url(nowe-style.css);

Jest ona poprawnie interpretowana jedynie przez najnowsze wersje przeglądarek. Jeśli zatem całe style witryny zapiszemy w pliku nowe-style.css i dołączymy je powyższą instrukcją, jedynie najnowsze przeglądarki będą stosowały style, wszystkie starsze natomiast wyświetlą surową, wprawdzie pozbawioną stylów, ale za to czytelną witrynę.

Dodatkowo, jak już powiedzieliśmy, należy zadbać o kolejność elementów na stronie wyświetlanej z pominięciem stylów. Najlepiej, jeśli na stronie najpierw pojawiają się menu, a dopiero potem zawartość. W tym celu należy ewentualnie zmodyfikować kolejność sekcji div w kodzie HTML, pilnując, by sekcje zawierające menu pojawiały się w kodzie przed sekcjami z treścią.

Białe znaki

Ponieważ białe znaki zawarte w kodzie HTML mogą niekiedy zburzyć układ witryny, należy je usunąć ze źródła strony. Faktyczne usunięcie spacji oraz znaków złamania wiersza spowoduje, że kod będzie zupełnie nieczytelny i trudny w edycji. Dobrym sposobem rozwiązania tego problemu jest zastosowanie funkcji strip szablonów Smarty.

Po umieszczeniu w szablonie głównym funkcji strip:

{strip}
<!DOCTYPE ...>
<html>
...
</html>
{strip}

otrzymamy stronę WWW, która — po odwiedzeniu przeglądarką — jest pozbawiona białych znaków.

Pamiętajmy, że sklejenie następujących po sobie wierszy może niekiedy doprowadzić do sklejenia wyrazów. Na przykład całe akapity tekstu musimy zapisywać w pojedynczej linijce. Jeśli w pliku stosującym funkcję strip umieścimy tekst (rozkład na linie jest istotny):

<p>
ala
ma
kota
</p>

to po przetworzeniu szablonu stosującego funkcję strip otrzymamy tekst:

<p>alamakota</p>

Poprawnie zapisany akapit powinien zawierać się w jednej linijce:

<p>ala ma kota</p>

Selektor potomek

Z racji na fakt, że witryna w całości zrealizowana w oparciu o style będzie zawierała dziesiątki różnych elementów, warto stosować selektory typu „potomek”. Selektory takie składają się z kilku wymienionych po sobie elementów ewentualnie oznaczonych identyfikatorami i klasami.

Jeśli na stronie występuje sekcja div o identyfikatorze pierwsza, która zawiera akapit:

<div id="pierwsza">
<p>Pierwsza...</p>
</div>

to style akapitu możemy modyfikować selektorem:

div#pierwsza p {
    ...
}

Dzięki temu w kodzie HTML nie musimy stosować identyfikatorów i klas przy każdym niemal znaczniku. Akapit w powyższym przykładzie jest otoczony gołymi znacznikami <p> oraz </p> pozbawionymi identyfikatora i klasy. Wystarczy, że zwykły akapit p umieścimy wewnątrz unikalnie nazwanej sekcji div, a dostępnym staje się selektor typu „potomek”.

Menu wykonane listami wypunktowanymi

Menu witryny wykonanej w oparciu o style tworzymy stosując listy wypunktowane. Menu takie, zarówno poziome jak i pionowe, zostało opisane w artykule Łukasza Lacha p.t. „CSS w praktyce: lista nawigacyjna”.

Zwróćmy uwagę, by tworzone menu miało dokładnie zdefiniowaną szerokość. W przypadku menu pionowego nie stwarza to problemów (posługujemy się atrybutami margin, border, padding oraz width w odniesieniu do całej listy oraz jej elementów).

Natomiast w przypadku menu poziomego szerokość całego menu jest zależna od szerokości poszczególnych opcji, a te z kolei zależą od stosowanej czcionki. Jeśli menu ma wypełniać podany obszar w całości (w przykładzie jest to 600 pikseli), wtedy należy odpowiednio dobrać wartości atrybutów padding dla wszystkich elementów menu oraz dodatkowo, indywidualnie zmodyfikować padding pierwszego elementu. Oczywiście rozwiązanie takie jest bardzo sztywne i rozjedzie się w przypadku na przykład zastąpienia czcionki przez przeglądarkę.

Dosunięcie opcji do siebie wykonujemy usuwając — za pomocą funkcji strip — znaki złamania wiersza oddzielające poszczególne opcje.

Sprawdzanie poprawności dokumentu

Do badania poprawności dokumentu możemy wykorzystać walidatory dostępne na witrynie W3C. Walidator kodu HTML jest dostępny pod adresem http://validator.w3.org, zaś walidator CSS http://jigsaw.w3.org/css-validator/.

Jeśli dokument publikujemy w Internecie, to wystarczy w nim umieścić hiperłącza:

<a href="http://validator.w3.org/check?uri=referer"">HTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

Kliknięcie pierwszego z hiperłączy spowoduje sprawdzenie kodu HTML dokumentu, zaś drugiego — sprawdzenie kodu CSS.

Dodatkowo pod adresem http://www.contentquality.com znajdziemy walidator sprawdzający kod witryny pod względem przestrzegania zaleceń związanych z dostępnością. Hiperłącze:

<a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://adres.w.sieci">508</a>

ułatwi korzystanie z serwisu.

Ewentualnie, korzystając z Firefoxa uzbrojonego w Web Developer Toolbar, wszystkie wymienione walidatory są dostępne w za pośrednictwem opcji Tools, na przykład Tools → Validate HTML. W kodzie HTML nie umieszczamy żadnych hiperłączy, a i tak walidacja witryny jest wygodna.

Struktura dokumentu

Badając kod HTML walidatorem dostępnym na stronach W3C warto zwrócić uwagę na opcję Outline. Opcja ta podaje szkic badanej strony uzyskany na podstawie nagłówków od h1 do h6. Przygotowując kod strony należy zadbać o stosowanie elementów nagłówkowych do określenia struktury dokumentu.

Podsumowanie

Przystępując do pracy nad układem witryny należy od samego początku zadbać o ustalenie celu oraz o organizację pracy. Pierwsza decyzja dotyczy generacji przeglądarek, dla jakich będzie przeznaczona witryna. Najłatwiejszym wyjściem jest tworzenie witryny przeznaczonej dla najnowszych przeglądarek, która w starszych przeglądarkach jest po prostu czytelna. Efekt ten osiągniemy importując style instrukcją @import.

Ponieważ nawet najnowsze przeglądarki nie są w stu procentach zgodne pod względem interpretacji stylów, zatem pracując nad układem witryny na bieżąco badamy jej wygląd w czterech najnowszych przeglądarkach. W przypadku kłopotów, modyfikujemy tło elementów powodujących problemy i badamy ich rozmiar oraz położenie. Jest to technika pracy, która w rozsądnym tempie prowadzi wykonania zamierzonego układu.

AtrybutZnaczenieUwagi
AtrybutZnaczenieUwagi
margin Wielkość marginesu Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej.
border Obramowanie Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej.
padding Otaczanie Może być stosowany w odniesieniu do krawędzi lewej, prawej, górnej i dolnej.
width Szerokość elementu Podana liczba dotyczy wyłącznie zawartości elementu. Nie uwzględnia marginesów, obramowania i otaczania.
min-width Minimalna szerokość Nie interpretowany przez IE.
max-width Maksymalna szerokość Nie interpretowany przez IE.
height Wysokość Inaczej interpretowana przez IE niż przez inne przeglądarki.
min-height Minimalna wysokość Nie interpretowany przez IE.
max-height Maksymalna wysokość Nie interpretowany przez IE.
vertical-align Wyrównanie pionowe zawartości  
z-index Kolejność warstw  
visibility Widoczność Element generuje pudełko, ale pudełko nie jest widoczne.
display Widoczność i sposób wyświetlania elementu. Ustalamy typ elementu (blokowy lub tekstowy) oraz ewentualnie jego widoczność. Element niewyświetlany nie generuje pudełka.
top Położenie elementu: krawędź górna  
right Położenie elementu: krawędź prawa  
bottom Położenie elementu: krawędź dolna  
left Położenie elementu: krawędź lewa  
position Sposób wyznaczania położenia elementu  
float Przesunięcie do lewej lub prawej krawędzi.  
clear Umieszczenie pod elementami przesuniętymi do tej samej krawędzi  
overflow Przycinanie zawartości do nadrzędnego pudełka  
clip Prostokąt, do jakiego zawartość jest przycinana  

Tabela 1. Atrybuty CSS dotyczące pudełek