: Home / HTML / CSS / kurs CSS / Popływajmy! - budowa stron z pływającymi warstwami

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/38-float-div.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Popływajmy! - budowa stron z pływającymi warstwami
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:57
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...

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież