: Home / HTML / CSS / kurs HTML / Układ strony

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/22-uklad-strony.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
Układ strony
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:41

Na poprzedniej lekcji nasza strona nabrała trochę barw. Teraz czas zająć się ułożeniem poszczególnych elementów na stronie.

Zaczniemy od ostylowania naszych warstw [nadal uważam, że słowo "pojemnik" mówi więcej:)]. Kod HTML nie zmieni się w porównaniu z poprzednią lekcją. Jednak wygląd strony ulegnie zmianie! Niemożliwe? Zobacz:).

* { margin: 0; padding: 0; }

body { background: #fff url(img/background.png) 0 0 repeat-x; }

#wrapper { width: 1000px; margin: 10px auto; }

#menu { width: 200px; float: left; }

#content { width: 800px; float: left; background: red;}



Po pierwsze warto zauważyć, że jeśli chcemy dopisać regułę do jakiegoś elementu z atrybutem id, dajemy #nazwa_id.

Pojemnikowi okalającemu wszystkie pozostałe pojemniki (#wrapper) ustalamy szerokość równą 1000pikseli. Wyśrodkowujemy cały pojemnik ustawiając margines lewy i prawy na wartość auto.

#menu i #content nadajemy odpowiednie szerokości, a także włączamy im "opływanie". Jest to jedna z technik ustawiania sposobu prezentacji treści na stronie (więcej można przeczytać w kursie CSS dostępnym na stronie serwisu).

Zapisz tak wyedytowany plik `arkusz.css' i odśwież stronę `index.htm' w przeglądarce. Coś się zmieniło? Zdziwiony?:)

Zaglądając w kod strony nic się nie zmieniło. A efekt wizualny zupełnie inny. Warto rozdzielać warstwę prezentacji (CSS) i strukturę dokumentu (HTML).

Już tradycyjnie, wprowadź podobne zmiany w pliku `kontak.htm'.
 

Tags:
 

Dodaj komentarz


Kod antysapmowy
Odśwież