zamiknij X
 

Dodaj komentarz

Nick:


BOLD TEXT NA CZERWONO LINK


Treść:


  • Zdziwienie
  • Duch
  • Obcalowany
  • Pirat
  • BAD
  • BAD 2
  • Jezyk
  • Jezyk 2

 

PGbook v3.0

www.plikigrafiki.com

 
Edycja danych MySQL

[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
Copyright 2010 All Rights Reserved www.plikigrafiki.com
o stronie | regulamin | formularz
gry dla dziewczyn | lekarz | blog zdrowotny | Polska baza noclegowa | zwrot podatku z Holandii tanie serwery shoutcast USA Hotels Mieszkania Bydgoszcz Curriculum Vitae noclegi w górach Hunter Hydrofory Mieszanie badania w ciazy rozdrabniacz leasing
Tanie serwery - Szkolenie Pozycjonowanie - śmieszne zwierzęta - AGD - Babilon-Shop.pl - Agencja interaktywna Warszawa www - Pozycjonowanie google - hosting - założenie sklepu internetowego
Katalog stron internetowych SEO Katalog Stron PRweb - Katalog Stron Katalog Stron Hurricane Katalog 3CO Dobre rzeczy Katalog qlweb.bigmuzy HotScripts