Popływajmy! - budowa stron z pływającymi warstwami

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: XHTML warstwy float

Jak już powiedziałem na poprzedniej lekcji, odchodzimy od naszego starego projektu. nawet więcej - od HTMLa! Ale spokojnie, zmiany będą minimalne. Teraz będziemy używać XHTMLa - takiego młodszego [ale lepszego:-)] młodszego brata HTML.

Zobacz więc kod strony.

<!DOCTYPE html // 1
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" // 1
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> // 1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> // 1
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" /> // 2
</head>
<body>

<div id="prawa"></div> // 3
<div id="lewa"></div> // 3
<div id="srodek"></div> // 3

</body>
</html>

Opis:

1 - Jak widzisz przed kodem właściwym strony został umieszczony inny nagłówek, deklarujący XHTML jako język wykorzystywany do tworzenia tej strony. Do znaczka dodano dodatkowe atrybuty [wiedza, co oznacza każdy z nich nie jest konieczna na tym poziomie wtajemniczenia:-)
2 - Jedyna zmiana jaka zaszła w porównaniu do strony wykonanej w HTML jest fakt dodania na końcu ' />'. Jest to spowodowane tym, że XHTML jest już bardzo "czuły" na standardy. Każdy znacznik powinien być zamknięty, np.
txt
. Jednak są znaczniki, których nie można zamknąć np. '
' należy wtedy zastosować takie rozwiązanie jak w przykładzie, czyli na końcu po spacji dodać ukośnik.
3 - Kolejne warstwy. W warstwę 'srodek' wstaw kilka akapitów tekstu, a w 'prawa' i 'lewa' po jednym akapicie - krótkie teksty, tylko po to, by warstwy były widoczne. W dalszej części kursu będzie pracować nad tymi fragmentami.

Teraz jeszcze strona wygląda bardzo prymitywnie - kilka warstw. Ale starczy dodać szczyptę fantazji okraszonej CSS :-)

body { // 1
margin: 5px;
padding: 5px;
background-color: black; }

div { // 2
padding: 5px;
margin: 0;
border: 1px solid white;
vertical-align: top;
background-color: gray;}

div#lewa { // 3
float: left; // 4
width: 200px; } // 3

div#prawa { // 5
float: right; // 6
width: 180px; } // 5

div#srodek{ // 7
margin: 0 191px 0 220px;} // 7

Opis:

1 - tworzę regułę dla całej strony. Strona ma czarne tło i odległość 5px [mimo, że suma wynosi 10, a to dlatego, że część przeglądarek uważa, że standardowe marginesy strony to margin, a inne przeglądarki, że padding. Dlatego, zawsze, jedna z wartości będzie pomijana].
2 - wszystkie warstwy mają mieć domyślny margines 0 i padding 5px, obramowanie 1px biała linia ciągła, treść ma się dosuwać do góry, tło koloru szarego.
3 - reguła dla warstwy 'lewa': szerokość 200px
4 - a to tytułowe 'pływanie'. Warstwa ta zostaje jakby wycięta ze swojego normalnego miejsca i dosunięta do lewej krawędzi pojemnika, w jakim się znajduje [tu: strony].
5 - reguła dla warstwy 'prawa': szerokość: 180px
6 - warstwa ma się dosunąć do prawej krawędzi pojemnika [tu: strony]. Sytuacja analogiczna jak poprzednio.
7 - reguła dla 'srodek': marginesy: górny 0, prawy 191px, dolny 0, lewy 220px. Te marginesy z prawej i lewej są wolną przestrzenią, w którą bardzo ładnie wkomponują się warstwy boczne.

Zapisz teraz całość do odpowiednich plików - nie będę Ci już dyktował jak się mają nazywać - powinieneś już sam wiedzieć jak wszystko to zrobić:-).

Używając pływania, pamiętaj, że kolejność ułożenia warstw jest bardzo ważna - pozmieniaj w kodzie strony kolejność, a zobaczysz o czym mówię.

Jeśli wszystko udało Ci się poprawnie zapisać - zapraszam dalej. Na następnej lekcji dorobimy bardzo ciekawe menu. Już wcześniej osiągaliśmy takie efekty, ale tym razem zrobimy to trochę inaczej...

Patryk 'yarpo' Jar

szukaj: XHTML XHTML warstwy warstwy float float

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!