Prosty układ strony - Kurs CSS/HTML

zamiknij X

[CSS][HTML] Prosty układ strony.

Zaczniemy od prostego układu strony: #logo, #box, #menu, #tresc i #stopka. Cała strona oparta bedzie na div'ach. Zobaczyćie jak prosto i szbyko taki układ zrobić.

Nasza przykładowa strona będzie mieć szerokość 700px.

Zaczynamy od #logo.

1
2
3
4

#logo{
width: 700px;
height: 150px;
}

Ten kod deklaruje, że DIV o id #logo bedzie miał 700px szerokośći i 150px wyskośći. Jednak brak tu jeszcze wyśrodkowania go. Bez deklaracji tego nasz DIV wyrówna się do lewej strony. Potrzebujemy wiec dodać do powyższego kody deklaracje marginesu. Cały kod wygląda tak:

1
2
3
4
5

#logo{
width: 700px;
height: 150px;
margin: 0px auto;
}

I #logo mam już gotowy. Czas na #box, w którym będzie nasze #menu i #tresc. #box będzie podobnie zdeklarowany jak #logo za wyjątkiem height, bo nie znamy z góry jak długie będzie menu(chyba, że chcemy zrobić strone o stałej wysokośći)

1
2
3
4
5

#box{
width: 700px;
height: auto;
margin: 0px auto;
}

Więc mamy już nasz #logo i mamy #box na #menu i #tresc. Brak jeszcze ich zdeklarowania. Przyjmijmy, że nasze #menu bedzie szerokie na 150px a #tresc na 550px.

Do kodu dojdzie nowy element float.

1
2
3
4
5
6
7
8
9
10

#menu{
width: 150px;
height: auto;
float: left;
}
#tresc{
width: 550px;
height: auto;
float: right;
}

Float jes bardzo użytecznym elementem. Tak ustawony sprawia, że #menu znajdzie się z lewej strony a #treść z prawej. Natomiat gdybyśmy chcieli zamienić ich pozycjami to wystarczy tylko zamienić ich atrybuty. Szybko w ten sposób możemy ustawć nasze menu z prawej strony

Do całośći brakuje nam jeszcze deklaracji stopki. Jej kod będzie taki sam jak #logo plus dodatkowy element clear bez niego stopka znalazła by sie pod #menu.

1
2
3
4
5
6

#stopka{
width: 700px;
height: auto;
clear: both;
margin: 0px auto;
}

I całość już gotowa. Stworzyliśmy więc prostą strone z lego, menu, trescia i stopką.

Cały kod przedstawia się tak.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
32

#logo{
width: 700px;
height: 150px;
margin: 0px auto;
}
#box{
width: 700px;
height: auto;
margin: 0px auto;
}
#menu{
width: 150px;
height: auto;
float: left;
}
#tresc{
width: 550px;
height: auto;
float: right;
}
#stopka{
width: 700px;
height: auto;
clear: both;
margin: 0px auto;
}

1
2
3
4
5
6

<div id="logo">LOGO</div>
<div id="box">
<div id="menu">MENU</div>
<div id="tresc">TRESC</div>
</div>
<div id="stopka">STOPKA</div>

Przykład #1:

Dwu kolumnowa stona

Jeszcze pare słów o wadach tego kodu:

- gdy dodamy tło do #menu i #tresc zobaczymy wade tego kodu bo którsza kolumna nie wypełni się do długoci dłuższej. Ten kod jest przydatny gdy tło mamy z góry już okrelone w #box a jedynie #menu bedziemy nadawać tło.

Przykład #2:

Dwu kolumnowa stona #2

Autor: Łukasz Lewak (LiON_87)

Potrafisz napisać lepszy kurs? Pokaż to!

Pokaż jak Ty rozwiązałbyś ten problem lub inny dowolny przez Ciebie wybrany. Przygotowany kurs wraz z imieniem i nazwiskiem wyślij na adres admin.myme[at]gmail.com. Jeżeli uznamy kurs za ciekawy ukaże się on na naszej stronie.

Komentarze

Dodaj komentarz

o stronie | regulamin | formularz