Segédletek.hu
Segédletek weblap szerkesztéshez!
 |
Fórum:
Postaláda:
Szavazás:
Hány éves vagy?
Segédletek:
Linkek:
Css pozícionálás divekkel:
Ebben a segédletben css + divek segítségével létrehozunk egy három hasábos oldalt, majd módosítjuk azt egy - két sor átírásával kéthasábosra.
Amióta van XHTML (bővebben: http://www.w3.org/MarkUp) a honlap szerkesztés sokat változott. Az alap cél az, hogy külön kell kell választani a tartalmat a megjelenítéstől. Ezt a leg könnyebben divek segítségével érhetjük el.
A <table> elemek használata formázásra mára már teljesen elavult módszer. Ennek több oka is van. Egyrészt nagyon körülményes a megvalósítása, a kód átláthatatlan lesz, és a legkisebb szerkezeti módosítás is órákat vehet el egy nagyobb lap esetén. Másrészt nem biztos, hogy minden platformon használható lesz az oldal (telefon, pda, vakoknak és gyengénlátóknak speciális böngészőjében.), előfordulhat, hogy teljesen össze - vissza jelennek meg az általunk olyan jól megtervezett sorok, oszlopok.
Divek segítségével könnyedén jól átlátható, szervezett lapot építhetünk. Az oldal szerkezetének módosításához nem kell hozzányúlnunk a tartalomhoz (HTML lap) elég a stílust megadni(CSS lap), ami később könnyen, gyorsan módoítható.
Akkor csapjunk bele a lecsóba, csináljunk egy lapot, három hasábbal, fejléccel, láléccel.
Szükségünk lesz ehhez 6 db <div> tagre. 1-1 minden egyes hasábnak, egy a láblécnek, egy a fejlécnek, és egy, amin belül az összes van.
Először megírjuk a HTML - t , és csak utána térünk át a css részre. Itt is észrevehető, hogy mennyire könnyen módosítható az oldal kinézete, mindössze pár sor átírásával, miközben a HTML lap mindvégig ugyan az marad.
Ezzel el is készült a HTML lapunk, mentsük el div.html névre.
Látható, hogy nagyon egyszerű, átlátható kódot írtunk. Most, hogy ezzel megvagyunk, adjuk meg a divek tulajdonságait. Nissunk egy új dokumentumot style.css névvel.
Ezzel megadtuk az alapot, ez a div magában foglalja az összes többit. Ezt a bal felső sarokba pozícionáltuk, 650 px szélesre, valamint megadtuk, hogy ne legyen se külső, se belső margója.
A position:relative; sor annyit tesz, hogy a div igazodik a környezetéhez. Tehát, ha pl egy másik div - ben van benne (lejjebb szó lesz róla), akkor hozzá igazodik. A position lehetne absolute is, akkor az annyit tesz, hogy nem veszi figyelembe a többi elemet a html lapon, és a böngészőablakhoz viszonyítja magát.
Most jön a fejléc
Ezt is a bal felső sarokba pozícionáltuk. Annyi a különbség, hogy ez a pozícionálás a konténer div - hez van viszonyítva. Tehát, ha a kontáner div nem a bal felső sarokban lenne, hanem pl középen, akkor a fejléc is ott lenne, mert hozzá alkalmazkodik. Továbá adtunk neki egy 80px - es magasságot.
Menjünk tovább, jöjjön a bal oldali hasáb.
most jöjjön a középső 3 hasáb:
Az előzőekhez képest semmi újdonságot nem mutatnak, egyet kivéve: float:left; Ezzel a tulajdonsággal adjuk meg, hogy a egymás mellé kerüljenek, méghozzá mindig a jobb szélére a következő (a folat lehet right is, akkor a bal szélére kerül a következő), és ne egymás alá. Ha ezt kihagynánk, akkor sorban egymás alatt lennének (így logikus).
Végül jöjjön a lábléc:
Ez sem mutat semmi érdekességet, egyet kivéve: clear:both; Ezzel jelezzük azt, hogy ez bizony már nem a fenti három mellé kerül, hanem alájuk.
Ezzel el is készült a CSS is a lapunkhoz. Ha jól dolgoztunk, valami ilyet kellett kapnunk.
Most tegyük fel azt, hogy a megrendelő kitalálta, hogy neki inkább csak két hasáb kell. Semmi gond, csak egyszerűen kivesszük a jobb oldali div - et a html - ből, a css - ből, és a #content résznél átírjuk a szélességet 500px - re, és máris csak két hasábunk van, ami valahogy így néz ki.
Ez a példa jól szemlélteti, hogy mennyivel egyszerűbb ez, mint táblázatokkal gányolni. Gondoljunk bele, hogy ezzel mennyi időt spórolunk meg...
Ennek alapján mindenkinek melegen ajánlom(aki még nem tette meg) hogy felejtse el a táblázatokat (persze csak ebben a funkciójukban) és térjen rá a div - ek használatára.
A <table> elemek használata formázásra mára már teljesen elavult módszer. Ennek több oka is van. Egyrészt nagyon körülményes a megvalósítása, a kód átláthatatlan lesz, és a legkisebb szerkezeti módosítás is órákat vehet el egy nagyobb lap esetén. Másrészt nem biztos, hogy minden platformon használható lesz az oldal (telefon, pda, vakoknak és gyengénlátóknak speciális böngészőjében.), előfordulhat, hogy teljesen össze - vissza jelennek meg az általunk olyan jól megtervezett sorok, oszlopok.
Divek segítségével könnyedén jól átlátható, szervezett lapot építhetünk. Az oldal szerkezetének módosításához nem kell hozzányúlnunk a tartalomhoz (HTML lap) elég a stílust megadni(CSS lap), ami később könnyen, gyorsan módoítható.
Akkor csapjunk bele a lecsóba, csináljunk egy lapot, három hasábbal, fejléccel, láléccel.
Szükségünk lesz ehhez 6 db <div> tagre. 1-1 minden egyes hasábnak, egy a láblécnek, egy a fejlécnek, és egy, amin belül az összes van.
Először megírjuk a HTML - t , és csak utána térünk át a css részre. Itt is észrevehető, hogy mennyire könnyen módosítható az oldal kinézete, mindössze pár sor átírásával, miközben a HTML lap mindvégig ugyan az marad.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A div - ek használata</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="hu" />
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">Fejléc</div>
<div id="left">Bal hasáb</div>
<div id="content">Tartalom</div>
<div id="right">Jobb hasáb</div>
<div id="footer">lábléc</div>
</div>
</body>
</html>
Ezzel el is készült a HTML lapunk, mentsük el div.html névre.
Látható, hogy nagyon egyszerű, átlátható kódot írtunk. Most, hogy ezzel megvagyunk, adjuk meg a divek tulajdonságait. Nissunk egy új dokumentumot style.css névvel.
#container
{
position:relative;
top:0px;
left:0px;
width:650px;
margin:0;
padding:0;
}
Ezzel megadtuk az alapot, ez a div magában foglalja az összes többit. Ezt a bal felső sarokba pozícionáltuk, 650 px szélesre, valamint megadtuk, hogy ne legyen se külső, se belső margója.
A position:relative; sor annyit tesz, hogy a div igazodik a környezetéhez. Tehát, ha pl egy másik div - ben van benne (lejjebb szó lesz róla), akkor hozzá igazodik. A position lehetne absolute is, akkor az annyit tesz, hogy nem veszi figyelembe a többi elemet a html lapon, és a böngészőablakhoz viszonyítja magát.
Most jön a fejléc
#header{
position:relative;
top:0px;
left:0px;
height:80px;
width:650px;
margin:0;
padding:0;
background-color:#3399FF;
}
Ezt is a bal felső sarokba pozícionáltuk. Annyi a különbség, hogy ez a pozícionálás a konténer div - hez van viszonyítva. Tehát, ha a kontáner div nem a bal felső sarokban lenne, hanem pl középen, akkor a fejléc is ott lenne, mert hozzá alkalmazkodik. Továbá adtunk neki egy 80px - es magasságot.
Menjünk tovább, jöjjön a bal oldali hasáb.
most jöjjön a középső 3 hasáb:
#left{
position:relative;
float:left;
top:0px;
left:0px;
width:150px;
background-color:#66CC66;
margin:0;
padding:0;
}
#content{
position:relative;
float:left;
top:0px;
left:0px;
width:350px;
background-color:#FFFF33;
}
#right{
position:relative;
width:150px;
margin:0;
padding:0;
float:left;
background-color:#CCCCCC;
}
Az előzőekhez képest semmi újdonságot nem mutatnak, egyet kivéve: float:left; Ezzel a tulajdonsággal adjuk meg, hogy a egymás mellé kerüljenek, méghozzá mindig a jobb szélére a következő (a folat lehet right is, akkor a bal szélére kerül a következő), és ne egymás alá. Ha ezt kihagynánk, akkor sorban egymás alatt lennének (így logikus).
Végül jöjjön a lábléc:
#footer{
position:relative;
top:0px;
left:0px;
clear:both;
background-color:#FF99FF;
}
Ez sem mutat semmi érdekességet, egyet kivéve: clear:both; Ezzel jelezzük azt, hogy ez bizony már nem a fenti három mellé kerül, hanem alájuk.
Ezzel el is készült a CSS is a lapunkhoz. Ha jól dolgoztunk, valami ilyet kellett kapnunk.
Most tegyük fel azt, hogy a megrendelő kitalálta, hogy neki inkább csak két hasáb kell. Semmi gond, csak egyszerűen kivesszük a jobb oldali div - et a html - ből, a css - ből, és a #content résznél átírjuk a szélességet 500px - re, és máris csak két hasábunk van, ami valahogy így néz ki.
Ez a példa jól szemlélteti, hogy mennyivel egyszerűbb ez, mint táblázatokkal gányolni. Gondoljunk bele, hogy ezzel mennyi időt spórolunk meg...
Ennek alapján mindenkinek melegen ajánlom(aki még nem tette meg) hogy felejtse el a táblázatokat (persze csak ebben a funkciójukban) és térjen rá a div - ek használatára.
Írta: requiem - 2006-07-05 10:10:20
* Nem vagy bejelentkezve!* Nem töltheted le a segédlet forrását egyben!
* Nem szavazhatsz a segédletre!
* Nem írhatsz a segédlethez tartozó fórum témába!
| kapocszoli | 2009-11-07 23:44:04 |
| szia! Most regiztem, ez lessz az els? hozzászólásom, remélem, nem mondok hülyeséget. A css részekhez, a kapcsoszárójelen belül írj mindegyikhez egy "height:"640";"-t, és akkor mindegyik ugyan akkora lessz. |
|
| dpeti | 2008-09-10 11:05:31 |
| Üdv! Nekem lenne egy kérdésem: Azt hogy lehet megoldani, hogy a left, a content és a right egyforma hosszúak legyenek? |
|
Kapcsolat | Szerzői jogok | Oldaltérkép | Impresszum | Segédletet írnék
© Copyright 2006-2007 segedletek.hu
