<< 6.1. Bevezető

6.3. Elemek mozgatása >>

6.2. Elemek elhelyezése

Mielőtt megjelentek a HTML 4.0-t támogató böngészők, a Weboldalak alkotóinak kevés beleszólásuk volt abba, hogy a HTML elemek hogyan legyenek elrendezve egy dokumentumban. A legtöbb esetben, a HTML állományban található elemek egyszerűen úgy lettek elhelyezve a dokumentumban, mint ahogyan egy szövegszerkesztő helyezi el a szöveget egy dokumentumban: egy sor kitöltése, új sor kezdése, ennek betöltése, és így tovább. A table elem segítségével definiált HTML táblázatok ugyan lehetőséget nyújtanak az elemek oszlopok szerinti elrendezésére, de ez a megoldás nem igazán rugalmas, ugyanakkor meglehetősen sok időbe telik a megjelenítése. Az elemek hatékony és rugalmas módon történő elhelyezését a W3C által 1997-ben közreadott standard oldotta meg, melynek megnevezése „Cascading Style Sheets-Positioning” (CSS-P).

CSS-P az IE8+ és az FX3+ által is teljes mértékben támogatva van. Nemcsak azt teszi lehetővé, hogy bárhova tudjunk elemeket helyezni egy dokumentum megjelenítésekor, hanem adott a lehetőség arra is, hogy dinamikusan helyezzünk át egy elemet egy új pozicíóba, felhasználva a Javascript-et, melynek segítségével menetközben változtathatjuk az elem elhelyezését megadó stílusjegyeket. Ezek a, beszédes módon left (bal), illetve top (fent) nevet viselő stílusjegyek adják meg az elem elhelyezkedésének egy bizonyos referenciaponttól balra illetve felfele mért távolságát. Egy másik stílusjegy, melynek neve position (pozíció) az előbbi két stílusjeggyel összefüggésben, az elemek elhelyezését illetve mozgatását illetően egy magasabb szinten történő ellenőrzését tesz lehetővé. A position tulajdonságnak a következő három lehetséges értéke van: absolute (abszolút), relative (relatív), illetve static (statikus).

6.2.1. Abszolút elhelyezés

Az absolute értéket adjuk meg a position stílusjegynek, amikor az elem egy meghatározott helyen szeretnénk a dokumentumban elhelyezni, teljesen függetlenül attól, hogy más elemek pozícióját is figyelembe vennénk. Például, ha azt szeretnénk, hogy egy szöveg paragrafusa 100 pixelre jelenjen meg a böngészőablak bal szélétől és 200 pixelre ennek felső részétől, akkor ez a következőképpen lenne megvalósítható:

<p style="position: absolute; left: 100px; top: 200px"> -- szöveg -- </p>

Az abszolút elhelyezés egy lehetséges alkalmazása, amikor egy közönséges szövegrészre rá szeretnénk helyezni egy másik, speciális szöveget, hogy ezzel a vízjelhez hasonló hatást keltsünk. Egy dőltbetűs betűtípus, világosszürkére színezett karakterek, a betűk között távolságot hagyva, megfelelne a speciális üzenet leírására, hiszen így az eredeti szöveg, és a felé írt speciális üzenet is elolvasható. Az alábbi XHTML dokumentum egy, a fentieket gyakorlatba helyező példát szolgáltat. Ebben a példában, Romhányi József Nyúliskola című versének egy részletét olvashatjuk. Erre a szövegre helyeztünk rá egy magyarázatként szolgáló Karinthy-idézetet: „NEM ÉN VAGYOK BONYOLULT, HANEM A DOLOG, AMIRŐL BESZÉLEK”. A dokumentum a következő:

A 6.1. ábra az absPos.html dokumentumot jeleníti meg

Észrevehető, hogy a width tulajdonság szerepel mindkét szöveg stílusjegyei közt. Erre azért van szükség, hogy ezáltal biztosítva legyen, hogy a speciális szöveg arányosan legyen a másik szövegrészbe beágyazva, máskülönben a böngészőablak jobboldali széléig húzódik a szöveg, az ablak mérete viszont változhat egyrészt kliensenként másrészt a felhasználó bármikor átméretezheti az ablakot.

Amikor abszolút módon pozicionált elem egy olyan elemen belül van elhelyezve, melynek szintén be van állítva a position tulajdonsága, akkor a top, left tulajdonságok értéke a beágyazó elem bal-felső sarkától vannak mérve (és nem a böngészőablak bal-felső sarkától).

A beágyazott elemek pozicionálásának szemléltetésére az „absPos.html” dokumentumot úgy módosítottuk, hogy a hagyományos szöveg 100 pixelre a felső széltől és 100 pixelre a bal oldaltól helyezkedik el. A specifikus szöveg a hagyományos szövegbe a <div> és <span> elemek segítségével van beágyazva. A módosított dokumentum, amit absPos2.html-nek neveztünk el, a következő:

A 6.2. ábra az absPos2.html dokumentumot jeleníti meg

6.2.2. Relatív elhelyezés

Egy relatív módon elhelyezett elem (position: relative;), melynek nincs beállítva se a top se a left tulajdonsága úgy lesz elhelyezve a dokumentumban, mintha nem is állítottuk volna be a position tulajdonságot. Az elem elhelyezését viszont utólag változtathatjuk. Amennyiben megadjuk a top, illetve left tulajdonságokat, akkor ezek a megadott mértékben mozdítják el az elemet ahhoz a pozícióhoz képest, ahol eredetileg megjelent volna (abban az esetben, ha nem állítjuk be a top, illetve left tulajdonságokat). Feltételezzük például, hogy egy dokumentumban két gomb van egymás mellé helyezve, az alapértelmezett (statikus) pozicionálást használva. Ebben az esetben a gombok egymás mellett jelennének meg egy sorban, feltéve, hogy az aktuális sor elég széles ahhoz, hogy mindkét gomb elférjen. Amennyiben relatív pozicionálást használunk (a position értéke relative), és a második gomb esetén a left tulajdonság értéke 50px, ennek hatására a második gomb 50 pixellel jobbra tolva fog megjelenni ahhoz a helyzethez képest, ahol amúgy megjelent volna.

Akár egy másik elembe ágyazott, abszolút módon pozicionált elemről van szó, akár relatív pozicionálás esetén, a top, illetve left tulajdonságoknak negatív értéket is adhatunk, ami felfele, illetve balra fogja taszítani a megjeleníteni kívánt elemet (ilyenkor természetesen az is megtörténhet, hogy az illető elemnek csak egy része lesz látható, vagy egyáltalán nem is látszik).

A relatív elhelyezés segítségével több speciális effektust elérésére alkalmas. Használhatjuk például felső- vagy alsó indexeléshez, a megfelelő indexet <span> elembe ágyazva, melynek pozícióját az eredetihez képest módosíthatjuk. A következő példában a szöveg mérete 24 pontra van beállítva, a megjelenítés stílusa normál. A szövegbe be van ágyazva egy szó, mely dőlt betűs, mérete 48 pont és piros színű. Normál esetben az említett szó alsó része a sor alsó részéhez igazodna. Esetünkben viszont a szó függőlegesen középre igaz1tva jelenik meg, amit úgy sikerült elérni, hogy az elhelyezés relatívra van állítva, a top tulajdonság pedig 10 pixelre. Az XHTML dokumentum, amely relPos.html nevet viseli, a következő:

A 6.3. ábra a relPos.html dokumentumot jeleníti meg

6.2.3. Statikus elhelyezés

Az alapértelmezett beállítás a statikus (position:static;). A statikus elhelyezésű elemek ugyanúgy jelennek meg, mint a relatív módon elhelyezett elemek, melyeknél nem állítottuk be a top, illetve left tulajdonságokat. A különbség az, hogy a statikusan elhelyezett elemeknél nem is állíthatjuk be a top, illetve left tulajdonságokat, illetve utólag sem változtathatjuk ezeket. Egy statikus módon elhelyezett elem tehát nem mozdítható el az eredeti elhelyezéshez viszonyítva, és utólag sem befolyásolhatjuk ennek elhelyezkedését.

Ugrás az oldal tetejére