Pozycjonowanie - gotowa strona

Powtórka z rozrywki, czyli pozycjonowanie. Tym razem skończymy opisywanie wszystkich warstw.

Plik CSS:

body {
margin: 0;
padding: 0; }

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

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

div#w01 {
left: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 1;}

div#w02 {
right: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 2;}

div#w03, div#w04 {
left: 338px;
right: 338px;
height: 20px;
background-color: gray;
z-index: 3;
min-width: 200px;} // 1

div#w04 {
top: 185px;
z-index: 4;}

div#banner {
top: 35px;
left: 138px;
right: 138px;
height: 140px;
z-index: 10;}

div#menu {          // 2
top: 215px;
left: 128px;
width: 200px;
background-color: #6e6e6e;
z-index: 15; }

div#tresc {
positon: static;                     // 3
margin: 215px 128px 0 338px;         // 4
background-color: #646464;
z-index: 25;
min-width: 550px; }

Opis:
1 - nowa właściwość. Związana ściśle z tym "rozciąganiem", o ktorym pisałem na poprzednich lekcjach. Nie ustalając szerokości, tylko odległości z dwóch przeciwległych stron sprawiamy, że szerokość zmienia się wraz z szerokościa okna przeglądarki [zmniejsz (przyciskiem w prawym górnym rogu) okno przeglądarki, a zobaczysz, że i warstwa się "skurczyła". Jesli będziesz nadal zmniejszał rozmiar okno, warstwa wreszcie może zniknąć...]. wstawiając minimalną szerokość unikamy takiej sytuacji - po zmnijeszeniu do jakieś [ustalonej szerokości] warstwa nie będzie się już kurczyć.
2 - obiecany opis 'menu': odległość od góry 215px, od lewej 128px, szerokość stała: 200px, tło w kolorze niestandardowym, poziom 15.
3 - spójż na regułę dla DIV [bez id i class]. Widzisz, że tam przypisałem wszystkim warstwom 'position: absolute;'. Jednak ta warstwa ma być "normalna", czyli niewypozycjonowana, stąd ta wartość 'static'.
4 - teraz zamiast odległości, daję marginesy. Normalnie [gdyby inne warstwy nie były wypozycjonowane] marginesy liczone byłyby od dolnego obramowania warstw położonych wyżej. Jednak warstwy wypozycjonowane "szybują", więc marginesy tej warstwy ich nie dotyczą. Są to odległości od obramowania przeglądarki.

Zapisz teraz wszytsko i uruchom stronę. Już powinieneś widzeć efekty. W niektórych przeglądarkach trzeba będzie do warstw 'menu' i 'tresc' wstawić kilka liter - zrób to:-). Efekt jest pełny. Uwaga: MSIE 6.0 nie obsługuje części kodu [tej dotyczącej "rozciągania" wartsw na odległościach]. Możesz to obejść, jednak stracisz elastyczność warstw: zamiast dawać zarówno prawą jak i lewą odległość, daj tylko lewą i wstaw atrybut 'width'. Jest to chyba najlepsze rozwiązanie - być może następne wersje MSIE będą już poprawnie obsługiwać style... Nam pozostaje mieć tylko nadzieję:-), a dziś tworzyć strony lekko uboższe [lub różne arkusze stylów dla różnych przeglądarek].

A teraz zadanie dla Ciebie:

Stwórz jakieś ciekawe menu. Oparte na listach, może z jakąś grafiką pojawiającą się po najechaniu - lub od razu, a w miejsce tej grafiki [po najechaniu] wczytać inną [tu trzeba zrobić regułę dla 'a' z grafiką w tle odpowiednio wypozycjonowaną, a po najechaniu 'a:hover' zmienia tło]... Wierzę, że sobie poradzisz i wymyślisz coś ciekawego. A w 'tresc' wstaw nagłówek pierwszego stopnia i jakiś akapit. Tylko od ciebie zależy jak będzie to wyglądać! Jeśli już uda Ci się to wszystko zrobić zapraszam dalej.