Ten artykuł przeznaczony jest dla tych, którzy mają już jakieś podstawy CSS, ale nie wystarczają im one na samodzielne stworzenie layoutu.
Jednym z najważniejszych zadań projektowania wizualnego jest zaprojektowanie rozłożenia poszczególnych elementów na stronie. W tym artykule przybliżę wam nieco tworzenie layoutu o dwóch kolumnach, nagłówku i stopce.
Co chcemy osiągnąć?
.
XHTML
Zaczniemy od zapisania poprawnego kodu xhtml.
| <!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”> <head> <title>Mój pierwszy layout</title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″ /> <link rel=”stylesheet” type=”text/css” <body> <p>Treść właściwa.</p> <div id=”stopka”><p>© copyright by _mk</p></div> |
Ot, bardzo prosty kod xhtml. Jedyną rzeczą na jaką warto zwrócić uwagę to to, że menu występuje w strukturze dokumentu po treści, co jest bardzo ważne dla osób oglądających stronę za pomocą urządzenia nie obsługującego CSS oraz dla wyszukiwarek internetowych.
CSS
A teraz „sprawca całego zamieszania”:
| body { text-align: center; margin: 0; padding: 0; background: #600; } div#glowny { text-align: left; width: 570px; margin: 0 auto; padding: 0; background: #FFF url(’tlo.png’) repeat-y; } div#top { height: 80px; background: #F90; } div#top h1 { font: italic 150%/80px Verdana, Arial, sans-serif; color: #FFF; margin: 0 40px; } div#tresc { width: 400px; float: right; margin: 0; } div#tresc * { margin: 10px 40px; } div#tresc p, div#menu p { font: 80%/1.4 Verdana, Arial, sans-serif; margin: 10px 40px; } div#stopka p { font: 70%/2 Verdana, Arial, sans-serif; margin: 0 40px; color: #FFF; } div#menu { width: 170px; float: left; } div#stopka { height: 1.4em; clear: both; background: #F90; } |
Nie będziemy analizować powyższego kodu linia po linii. Opiszę tylko kluczowe miejsca.
Centrowanie strony
Zgodnie ze specyfikacją, aby wycentrować stronę musimy objąć całą zawartość jedną warstwą, nadać jej szerokość i marginesy poziome ustawione na auto. Piszemy więc w naszym kodzie:
| div#glowny { width: 570px; margin: 0 auto; } |
Niestety Internet Explorer niewiele sobie robi ze specyfikacji i nasza strona nadal przylega do lewej krawędzi ekranu. Jedyny sposób by wyśrodkować naszą stronę w IE, to nadanie elementowi <body /> deklaracji text-align: center;. Ale jak wiemy właściwość text-align: jest dziedziczona, a my przecież nie chcemy, by cały tekst na naszej stronie był wyśrodkowany. Piszemy więc w naszym CSS:
| body { text-align: center; } div#glowny { text-align: left; width: 570px; margin: 0 auto; } |
Menu z lewej, tekst z prawej
Chcemy, by nasze menu, które jest w strukturze dokumentu za treścią
na nasze stronie znalazło się przed nią. Jak to zrobić? Użyjmy
właściwości float:, czyli pływania. Naszej treści nadamy odpowiednią szerokość i deklarację float: right;, menu również nadamy szerokość i wszystko powinno być po naszej myśli. Niestety, niektóre wersję IE trochę dziwnie interpretują ten kod, więc nie obędzie się bez dodania właściwości float: również dla menu. Działający kod, to:
| div#tresc { width: 400px; float: right; } div#menu { width: 170px; float: left; } |
Stopka
Jako, że zarówno menu, jak i treść mają nadaną właściwość pływania stopka na naszej stronie, może znajdować się tam, gdzie tego byśmy nie chcieli. Aby temu zaradzić musimy użyć tamowania w stopce.
| div#stopka { height: 1.4em; clear: both; } |
Ważne jest, abyśmy nadali naszej stopce wysokość, gdyż inaczej IE może mieć problemy z wyświetlaniem strony.
Oddzielenie menu od treści
Wszystko jest dobrze, tylko jak zadeklarować tło dla menu tak, by występowało ono, aż do końca treści? Niestety tutaj jedynym rozwiązaniem jest zrobienie obrazka wyglądającego jak nasze tło i wstawienie go do warstwy obejmującej menu oraz treść. W naszym przykładzie wygląda to tak:
| div#glowny { background: #FFF url(’tlo.png’) repeat-y; } |
Jak to wygląda?
.
