webmaster webmastering webdesign

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

Wypozycjonowana strona

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-11-11

szukaj: warstwy warstwy div div kurs css kurs css

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

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; }

Zapisz teraz wszystko 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" warstw 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.

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Oczekujesz profesjonalnej obługi?
Projektowanie stron internetowych.
Przebijamy konkurencje!

 

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