webmaster webmastering webdesign

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

Pozycjonowanie - wstęp

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

szukaj: pozycjonowanie absolutne pozycjonowanie absolutne pozycjonowanie relatywne pozycjonowanie relatywne kurs css kurs css

Na poprzednich lekcjach pokazywałem Ci jak można tworzyć strony za pomocą warstw. Lepiej lub gorzej już to umiesz, kiedy chodzi o pływanie. Jednak przy pływaniu [jak mogłeś doskonale zauważyć] istnieje jeszcze zależność między umieszczeniem warstwy w kodzie, a miejscem jej wyświetlenia. Korzystając z pozycjonowania likwidujemy tę zależność! Napiszmy więc kod kolejnej strony:

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

<div id="banner"></div> // 1

<div id="w01"></div> // 2
<div id="w02"></div> // 2

<div id="w03"></div> // 3
<div id="w04"></div> // 3

<div id="menu">Tu będzie menu</div> // 4
<div id="tresc">Tu treść</div> // 5

</body>
</html>

Opis:

Jeśli ktokolwiek już skopiował/przepisał kod i spróbował go uruchomić zauważył, że nic nie jest tak jak to jest pokazane na przykładzie! Bo i przecież być nie może... mamy 7 warstw, jedna pod drugą, do których jeszcze nie przypisano żadnych właściwości. Zróbmy więc to.

body {
margin: 0; // 1
padding: 0; } // 1

div { // 1
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; } // 2

div#w01, div#w02, div#w03 { // 3
top: 5px; } // 4

div#w01 {
left: 128px; // 5
width: 200px;
height: 200px;
background-color: silver; }

div#w02 {
right: 128px; // 6
width: 200px;
height: 200px;
background-color: silver; }

div#w03, div#w04 {
left: 338px; // 7
right: 338px; // 8
height: 20px;
background-color: gray; }

div#w04 { top: 185px; }

div#banner {
top: 35px; // 9
left: 138px; // 9
right: 138px; // 9
height: 140px; }

Opis:

Jak widzisz teraz warstwy są już ułożone [jedynie te górne, dolnymi zajmiemy się później] i w żaden sposób na siebie nie oddziałują. Wcześniej - gdy chciałeś zmienić którąkolwiek z odległości, musiałeś się liczyć z tym, że może to zakłucić cały układ twojej strony, gdyż elementy nawzajem się "odpychały". Tu tego nie ma. One po prostu "szubują" w miejscu, które im wyznaczyłeś.

Różne warianty 'position':

Chyba każda właściwość CSS ma kilka opcji - podobnie dzieje się w przypadku atrybutu 'position':

Nadrzędny pojemnik:

Kilkukrotnie użyłem na tej lekcji określenia "nadrzędny pojemnik". Jak już wcześniej udowodniliśmy DIV jest prostokątem - podobnie jak strona. Nazwijmy więc ten prostokąt "pojemnikiem". Jeśli umieścimy DIV z atrybutem 'position: absolute' bezpośrednio w sekcji body [czyli ta warstwa nie będzie umieszczona w żadnej warstwie, tabeli itp.] to dla takiego DIV pojemnikiem nadrzędnym będzie strona - odległości [left, top, right, bottom] będą liczone od obramowania przeglądarki. Jeśli jednak, umieścimy DIV id="zagniezdzony" w DIV id="nadrzedny", i 'nadrzedny' będzie miał dowolną wartość 'position', to pojemnikiem nadrzędnym stanie się właśnie DIV id="nadrzedny". Jeśli 'nadrzedny' nie będzie miał przypisanej wartości 'position', wtedy nadal 'zagniezdzony' będzie ustalany względem strony - oczywiście jeśli będzie miał 'postion: absolute'.

Mam nadzieję, że udało mi się to opisać wystarczająco prosto, a jednocześnie nie opuściłem niczego ważnego. Pozycjonowanie jest przyszłością webmastering-u więc naprawdę warto jest się go nauczyć. Jeśli czegoś nie jesteś do końca pewien, to dokładnie przestudiuj jeszcze raz tę lekcję i wtedy idź dalej. Jeszcze będzie trochę o tym. Zapraszam więc dalej!

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!

 

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