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 [lepszego?] brata HTML.
Zobacz więc kod strony.
Kod XHTML:
<!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 <html> dodano dodatkowe atrybuty [wiedza, co oznacza każdy z nich nie jast konieczna na tym poziomie wtajemniczenia:-)
2 - Jedyna zmiana jaka zaszła w porówaniu 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. <p>txt</p>. Jednak są znaczniki, których nie można zamknąć np. '<br>' należy wtedy zastosować takie rozwiązanie jak w przykąłdzie, 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 :-)
Plik 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 plikow - 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...
