Pozícionálás CSS-sel

A honlap elemeinek pozícionálása megoldható többféleképpen is. Az egyik módszer a táblázatos, ezt használják a leggyakrabban de nem azért meg jobb, hanem mert ez a megszokott illetve a vacak böngészőprogramoknak (IE is rossz) köszönhetően a CSS-t (rivális megoldás) a böngészők hol így, hol úgy értelmezik. Mint az előbb már kiderült a másik megoldás a CSS. Ezzel el lehet készíteni egy teljes honlap grafikáját anélkül, hogy akár csak 1db táblázatot is felhasználtunk volna. A CSS remek lehetőségeket nyújt az elemek pozícionálására, ezt demonstrálandó készült ez a leírás is. (Harder) Én ezt a weblaptervezetet használom demonstráció céljára: egesz.jpgVajon mennyi cella kéne ehhez, hogy mindegyik linkként működjön? Sok. Akkor áljjunk is neki. Vágd ki a képeket és mentsd el. (A leíráshoz tartozó képeanyag letölthető egyben ZIP formátumban az alábbi linkről: kepanyag.zip (308kb)A háttérbõl is ments el egy darabkát. Akkor a kódból már van egy alapunk, itt: mintaoldal.html forráskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
</div>
</body>
</html>

Mivel Photoshop-ban csináltam a képet amit feldaraboltam kisebb képekre, ott be lehet kapcsolni a vonalzót és azzal be tudom azonosítani, hogy hova szeretném tenni a képeket a weboldalon. Akkor nézzük tovább mintaoldal.html forráskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/

img.az_en_oldalam {margin-top: 10px; margin-left: 150px; position: absolute;}
/*Meg kell határozni a margin-top-ba, hogy milyen messze legyen a div tetejétõl, a margin-left, 
hogy milyen messze legyen a div bal oldalától és a position pedig, hogy mihez mérje. 
Lehet absolute vagy relative az elõbbi a div bal felsõ sarkához méri a relative pedig az elõzõ elemhez.*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
<img src="kepek/az_en_oldalam.jpg" class="az_en_oldalam">
<!–csak egyszerûen be kell szúrni a képet, majd a class=""-al meghatározni az osztályt 
ami itt az img.az_en_oldalam–> 
</div>
</body>
</html>

A kommentekbõl kiolvasható mit tettem :). Most jöjjenek a linkek. mintaoldal.html forráskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/

img.az_en_oldalam {margin-top: 10px; margin-left: 150px; position: absolute;}
img.rolam {margin-top: 130px; margin-left: 14px; position: absolute;}
img.hobbim{margin-top: 190px; margin-left: 95px; position: absolute;}

/*Meg kell határozni a margin-top-ba, hogy milyen messze legyen a div tetejétõl, a margin-left, 
hogy milyen messze legyen a div bal oldalától és a position pedig, hogy mihez mérje. 
Lehet absolute vagy relative az elõbbi a div bal felsõ sarkához méri a relative pedig az elõzõ elemhez.*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
<img src="kepek/az_en_oldalam.jpg" class="az_en_oldalam">
<!–csak egyszerûen be kell szúrni a képet, majd a class=""-al meghatározni az osztályt 
ami itt az img.az_en_oldalam–>
<a href="lapok/rolam.html"><img src="kepek/rolam.jpg" class="rolam"></a>
<!–ez csak egy egyszerû link :)
–> 
</div>
</body>
</html>

így tovább a többi képet is, aztán jöjjön a szövegdoboz. mintaoldal.html forráskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/

img.az_en_oldalam {margin-top: 10px; margin-left: 150px; position: absolute;}
img.rolam {margin-top: 130px; margin-left: 14px; position: absolute;}
img.hobbim{margin-top: 190px; margin-left: 95px; position: absolute;}
img.linkek{margin-top: 311px; margin-left: 60px; position: absolute;}

img.erdekessegek1{margin-top: 309px; margin-left: 272px; position: absolute;}
img.hulyesegek{margin-top: 366px; margin-left: 210px; position: absolute;}
img.erdekessegek2{margin-top: 427px; margin-left: 154px; position: absolute;}

/*Meg kell határozni a margin-top-ba, hogy milyen messze legyen a div tetejétõl, a margin-left, 
hogy milyen messze legyen a div bal oldalától és a position pedig, hogy mihez mérje. 
Lehet absolute vagy relative az elõbbi a div bal felsõ sarkához méri a relative pedig az elõzõ elemhez.*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
<img src="kepek/az_en_oldalam.jpg" class="az_en_oldalam">
<!–csak egyszerûen be kell szúrni a képet, majd a class=""-al meghatározni az osztályt 
ami itt az img.az_en_oldalam–>
<a href="lapok/rolam.html"><img src="kepek/rolam.jpg" class="rolam"></a>
<!–ez csak egy egyszerû link :)–> 
<a href="lapok/hobbim.html"><img src="kepek/hobbim.jpg" class="hobbim"></a>
<a href="lapok/linkek.html"><img src="kepek/linkek.jpg" class="linkek"></a>
<a href="lapok/erdekessegek1.html"><img src="kepek/erdekessegek1.jpg" class="erdekessegek1″></a>
<a href="lapok/hulyesegek.html"><img src="kepek/hulyesegek.jpg" class="hulyesegek"></a>
<a href="lapok/erdekessegek2.html"><img src="kepek/erdekessegek2.jpg" class="erdekessegek2″></a>
</div>
</body>
</html>

A szövegdoboz egy egyszerű div lesz, oda lehet írni a bemutatkozást. mintaoldal.html forráskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div.nagy {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/

img.az_en_oldalam {margin-top: 10px; margin-left: 150px; position: absolute;}
img.rolam {margin-top: 130px; margin-left: 14px; position: absolute;}
img.hobbim{margin-top: 190px; margin-left: 95px; position: absolute;}
img.linkek{margin-top: 311px; margin-left: 60px; position: absolute;}

img.erdekessegek1{margin-top: 309px; margin-left: 272px; position: absolute;}
img.hulyesegek{margin-top: 366px; margin-left: 210px; position: absolute;}
img.erdekessegek2{ background: url(’kepek/backround.jpg’); margin-top: 427px; margin-left: 154px; position: absolute;}

div.szoveg { width:300px; margin-top: 90px; margin-left: 123px; position: absolute;}/*ebbe a div-be lesz a bemutatkozó szöveg*/

/*Meg kell határozni a margin-top-ba, hogy milyen messze legyen a div tetejétõl, a margin-left, 
hogy milyen messze legyen a div bal oldalától és a position pedig, hogy mihez mérje. 
Lehet absolute vagy relative az elõbbi a div bal felsõ sarkához méri a relative pedig az elõzõ elemhez.*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
<img src="kepek/az_en_oldalam.jpg" class="az_en_oldalam">
<!–csak egyszerûen be kell szúrni a képet, majd a class=""-al meghatározni az osztályt 
ami itt az img.az_en_oldalam–>
<a href="lapok/rolam.html"><img src="kepek/rolam.jpg" class="rolam"></a>
<!–ez csak egy egyszerû link :)–> 
<a href="lapok/hobbim.html"><img src="kepek/hobbim.jpg" class="hobbim"></a>
<a href="lapok/linkek.html"><img src="kepek/linkek.jpg" class="linkek"></a>
<a href="lapok/erdekessegek1.html"><img src="kepek/erdekessegek1.jpg" class="erdekessegek1″></a>
<a href="lapok/hulyesegek.html"><img src="kepek/hulyesegek.jpg" class="hulyesegek"></a>
<a href="lapok/erdekessegek2.html"><img src="kepek/erdekessegek2.jpg" class="erdekessegek2″></a>
<div class="szoveg">
<!–Ez a bemutatkozó szöveg helye–>
Helló XYZZS vagyok és szerintem a tutorial.hu-n csupa kedves ember van. Nézz be te is :)
</div>

</div>
</body>

A végén még beraktam pár pöttyöt és módosítottam a betûméretet is. mintaoldal.html forraskód

<html>
<head>
<title>CSS</title>
<style type="text/css">
<!–
body {background-color: #000000; color: #000000; font-weight: bold; font-size: 20;}/*ez adja meg az oldal háttérszínét, a betûszínt és típust*/
div.nagy {width: 600px; height: 500px; background: url("kepek/background.jpg"); align: center;}/*itt adjuk meg a div szélességét, magasságát és hátterének elérési útját*/

img.az_en_oldalam {margin-top: 10px; margin-left: 150px; position: absolute;}
img.rolam {margin-top: 130px; margin-left: 14px; position: absolute;}
img.hobbim{margin-top: 190px; margin-left: 95px; position: absolute;}
img.linkek{margin-top: 311px; margin-left: 60px; position: absolute;}

img.erdekessegek1{margin-top: 309px; margin-left: 272px; position: absolute;}
img.hulyesegek{margin-top: 366px; margin-left: 210px; position: absolute;}
img.erdekessegek2{ background: url(’kepek/backround.jpg’); margin-top: 427px; margin-left: 154px; position: absolute;}

div.szoveg { width: 250px; margin-top: 90px; margin-left: 123px; position: absolute;}/*ebbe a div-be lesz a bemutatkozó szöveg*/

img.pottyhalmaz {margin-top: 95px; margin-left: 400px; position: absolute;}
img.kekpotty {margin-top: 225px; margin-left: 38px; position: absolute;}
img.vilagoskekpotty {margin-top: 290px; margin-left: 35px; position: absolute;}
img.szurkepotty {margin-top: 295px; margin-left: 239px; position: absolute;}
img.lilapotty {margin-top: 390px; margin-left: 50px; position: absolute;}

/*Meg kell határozni a margin-top-ba, hogy milyen messze legyen a div tetejétõl, a margin-left, 
hogy milyen messze legyen a div bal oldalától és a position pedig, hogy mihez mérje. 
Lehet absolute vagy relative az elõbbi a div bal felsõ sarkához méri a relative pedig az elõzõ elemhez.*/
–>
</style>
</head>
<body>
<div class="nagy">
<!–ide kell beilleszteni a képeket–>
<img src="kepek/az_en_oldalam.jpg" class="az_en_oldalam">
<!–csak egyszerûen be kell szúrni a képet, majd a class=""-al meghatározni az osztályt 
ami itt az img.az_en_oldalam–>
<a href="lapok/rolam.html"><img src="kepek/rolam.jpg" class="rolam"></a>
<!–ez csak egy egyszerû link :)–> 
<a href="lapok/hobbim.html"><img src="kepek/hobbim.jpg" class="hobbim"></a>
<a href="lapok/linkek.html"><img src="kepek/linkek.jpg" class="linkek"></a>
<a href="lapok/erdekessegek1.html"><img src="kepek/erdekessegek1.jpg" class="erdekessegek1″></a>
<a href="lapok/hulyesegek.html"><img src="kepek/hulyesegek.jpg" class="hulyesegek"></a>
<a href="lapok/erdekessegek2.html"><img src="kepek/erdekessegek2.jpg" class="erdekessegek2″></a>
<div class="szoveg">
<!–Ez a bemutatkozó szöveg helye–>
Helló XYZZS vagyok és szerintem a tutorial.hu-n csupa kedves ember van. Nézz be te is :)
</div>
<img src="kepek/pottyhalmaz.jpg" class="pottyhalmaz"><!–ez a sok pötty a jobb oldalon–>
<img src="kepek/kekpotty.jpg" class="kekpotty">
<img src="kepek/vilagoskekpotty.jpg" class="vilagoskekpotty">
<img src="kepek/szurkepotty.jpg" class="szurkepotty">
<img src="kepek/lilapotty.jpg" class="lilapotty">
</div>
</body>
</html>

vegeredmeny.jpgA végeredmény megtekinthető az alábbi címen is: mintaoldal.htmlSzerző: Tirionhonlapja: hobbitfalva.uw.hu