b{}xm{}dels.toxin.hu

E bejegyzésben szereplő minta segítségével blokk elemmé varázsolhatunk egy tetszőleges elemet, aminek kedvünk szerint állíthatjuk horizontális és vertikális dimenzióit – ráadásul egymástól függetlenül – illetve azok típusát is megváltoztathatjuk, tartalom szélessé tehetjük az egyiket és méretezhetjük a másikat, ki-ne vágyott volna ilyenre titokban. Nyissuk is ki Rodolfó bűvészdobozunkat, mert ez egy olyan trükk amivel sokakat elkápráztathatunk …

Az általános minták a következőek:

Tartalomszéles abszolút elem eltolása

SZELEKTOR { position:ABSOLUTE_FIXED;
height:auto; width:auto;
margin-top:±ÉRTÉK; margin-left:±ÉRTÉK; }

Méretezett abszolút elem eltolása

SZELEKTOR { position:ABSOLUTE_FIXED;
height:+ÉRTÉK; width:+ÉRTÉK;
margin-top:±ÉRTÉK; margin-left:±ÉRTÉK; }

Egy normál szövegfolyambeli elemen alkalmazva a mintákat, az elem dimenzióit elveszti, eredeti megjelenítési helyét megtartó, pozicionált blokk elem válik belőle, ennek dimenzióit, azok típusát (méretezett-tartalomszéles) -ahogy a bevezetőben szó volt róla-, valamint margók segítségével rajta eltolást is állíthatunk. A felső(margin-top)margó pozitív/negatív értékre állításával felfelé/lefelé, míg a bal(margin-left) margót hasonlóképp állítva balra-jobbra mozgathatjuk az adott elemet. A mintát használó elem szélességét,magasságát a width,height CSS tulajdonság használatával állíthatjuk be, alapértelmezetten mindkettő auto, ekkor az elem tartalomszéles/magas. Ebben a mintában a left,right,top,bottom CSS tulajdonságok értéket nem módosítjuk, az alapértelmezett: auto beállításon hagyjuk, egy másik mintában a ‘Abszolút elemek igazítása vertikálisan és horizontálisan’ változtatjuk majd meg azokat.

A mintából kitűnik, hogy kétfajta pozicionálási modellt az abszolút ill. a rögzített(fixed)-et is használhatjuk, bővebben ezekről a linkekre kattintva olvashatunk. Elkészült a már megszokott példajfájl is.

Hajrá CSS