Absolute pozícionálás CSS segítségével


Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a doboznak (nevezzük mostantól reklám doboznak) nem mondhatjuk azt, hogy pl. a böngésző ablakától X távolságra jelenjen meg.

A megoldás: egy relative pozícionált elembe (mostantól nevezzük fejlécnek) kell elhelyezni a reklámdobozt, melynek eredményeként ha a fejléc helyzetét módosítjuk, vele automatikusan a reklám doboz helyzete is változni fog. Nézzük a kódot.

A css-ben definiáljuk a fejléc doboz tulajdonságait:

1
2
3
4
5
6
#fejlec {
	width: 300px;
	height: 100px;
	position: relative;
	background-color: #999999;
	}

A doboz 300px széles és 100px magas lesz, a háttere szürke, és a pozíciója (itt a lényeg) relative.

A HTML kódban így fog kinézni:

1
<div id="fejlec"></div>

Most egészítsük ki a CSS-t a reklám dobozra vonatkozó résszel:

1
2
3
4
5
6
7
8
#reklam {
	width: 100px;
	height: 50px;
	position: absolute;
	background-color: #000000;
	left: 10px;
	top: 10px;
	}

A reklám doboz szélessége 100px, a magassága 50px, a pozíciója (itt a lényeg) absolute, a háttérszíne fekete és balról illetve felülről 10px távolságot fog tartani.

A HTML kódot ezután már így kell módosítani:

1
2
3
<div id="fejlec">
<div id="reklam"></div>
</div>

Mint látható, a reklám doboz a fejléc dobozba DIV-jébe került bele. Tulajdonképpen ennyivel kész is vagyunk, hisz a reklám doboz minden esetben a fejléc dobozon belül fog megjelenni, méghozzá úgy, hogy a fejléc doboz tetejétől és bal oldalától 10-10px távolságot fog tartani.

Mivel a fejléc doboz pozíciójának relative értéket állítottunk be és a reklám doboznak pedig absolute-t, így a reklám doboz számára a 0px (ami egyébként a böngészőablak széleitől számítódna) a fejléc doboz széleitől fog számítódni.

A csatolt fájl kódjában látható, hogy ha a fejléc doboz helyzetét módosítjuk (#fejlec1), akkor vele együtt a reklám doboz helyzete is változni fog.

A reklám doboz helyzetét az alábbiakkal lehet módosítani: top, right, bottom és left.

Ennek megfelelően, ha a reklám dobozt a jobb felső sarokban szeretnéd elhelyezni, akkor a CSS-ben a kódot az alábbi szerint kell módosítani (right-t kell beállítani a left helyett):

1
2
3
4
5
6
7
8
#reklam {
	width: 100px;
	height: 50px;
	position: absolute;
	background-color: #000000;
	right: 10px;
	top: 10px;
	}

A működő kód megtekintése: absolute_pozicionalas.html

Kapcsolódó bejegyzések:
  • Az opacity tulajdonságot a w3c a második css specifikációban vezette be, viszont csak a CSS3-ban lett tökéletes. Én Firefox1.0.2, Mozilla1.7.5 böngészõkön t …

  • 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 …

  • Gondolom már sokan beleszaladtak webszerkesztés közben az alábbi IE hibába: nem kezeli az átlátszó (transzparens) png képeket, sajnos azok háttere szürke alapért …

  • Alapvetően 2 módja van a CSS alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.Rugalmas lapszélességEz …

  • A gradiensek (színátmenetek) a web 2.0 stílus divatos és jellemzõ eszközei. Remekül alkalmazhatóak a térhatás illúziójának megteremtésére, és ma már szinte minde …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a Absolute pozícionálás CSS segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>