webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 6

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

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

szukaj: XHTML XHTML warstwy warstwy float 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:

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:

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

Zagadnienia poruszane w tej części kursu:

Szukasz wykonawcy?
Projektowanie stron internetowych.
Sprawdź nas!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org