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.jpg

Vajon 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<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

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

<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

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
26
27
28
29
30

<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

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<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

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<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

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<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.jpg

A végeredmény megtekinthető az alábbi címen is: mintaoldal.html

Szerző: Tirion
honlapja: hobbitfalva.uw.hu

Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

1 hozzászólás

  1. Nekem valahogy nem akarja csiálni, amit kell. Csak egymás után rakja a képeket. Valaki tudna segíteni?

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét