Mój pierwszy layout

Autor: _mk, dodano: 09-10-2004
Kategoria: Programowanie i tworzenie

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ąć?

Zobacz przykład.

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"
media="all" href="s.css" />
</head>

<body>
<div id="glowny">
<div id="top"><h1>Mój pierwszy layout</h1></div>
<div id="tresc">

<p>Treść właściwa.</p>
</div>
<div id="menu">
<p>Miejsce na menu</p>
</div>

<div id="stopka"><p>© copyright by _mk</p></div>
</div>
</body>
</html>



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?

Zobacz przykład.

Ocena 2.74/5 (54.83%) (143 głosów)

Komentarze:


  • Dodał: Lukasz data: 2009-10-17
    Heh, ja znam dość dobrze CSS (prawie wszystkie właściwości), ale dalej nie potrafię wszystkiego ze sobą połączyć, tak, żeby zrobić jakiś dobry layout.
  • re:
    Dodał: Gość data: 2009-10-18
    Witam.
    Jak masz jakiś problem odezwij się na gg: 4680923 lub e-mail: bananekwlkp@interia.eu

    Też jestem "świeży" ale z tym mi nieźle idzie.

  • Dodał: Gość data: 2009-10-23
    nie rozumiem dlaczego ludzie zawsze obejmują całość divem "ogólny", lub "top"....
    drogi autorze artykułu, jeśli dasz elementowi body wlasciwość display:block to masz w kodzie o jednego diva mniej, przypisujac wlasciwosci diva ogolny elemenotwi body, zas z body przenosisz wlasciwosci do elemetnu <html>, po ci ci ten zbędny div "ogolny" wywal go po porostu i juz ....


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.

 


Najlepiej oceniane artykuły

Najnowsze wiadomości