b{}xm{}dels.toxin.hu

Előző bejegyzésben középre igazított elemeken, ebben a bejegyzésben megpróbálunk horizontálisan eltolást kieszközölni. Amennyiben szemrevételezzük ie6-7 e bejegyzésben szereplő mintákról készült, IE NetRenderel által megjelenített, renderelését láthatjuk, hogy közelebbi barátságba, nem pozicionált őshöz való igazítás esetén: széthúzott statikus blokkal, míg pozicionált ős esetén a Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolásasa mintában szereplő tábla elemmel (<table><tr><td> TARTALOM </td></tr></table>) érdemes kerülni, a többi minta ezeken a böngészőkön nem, csak majd ie8 alatt lesz támogatott.

Következzenek akkor az eltolást létrehozó általános minták:

Középről eltolt inline elem

INLINE-SZELEKTOR { margin-left:±VALUE; }
BLOKK-SZELEKTOR { text-align:center; }

Középről eltolt széthúzott statikus blokk elem

BLOKK-SZELEKTOR{ position:static; text-align:center;
width:auto; margin-left:±ÉRTÉK ;
margin-right:±ÉRTÉK ; }

Középről eltolt méretezett abszolút elem

SZELEKTOR{ position:absolute; text-align:center;
width:+±ÉRTÉK ; left:±ÉRTÉK ; margin-left:auto;
right:0; margin-right:auto; }

Középről eltolt széthúzott abszolút elem

SZELEKTOR{ position:absolute; text-align:center;
width:auto; left:0; margin-left:±VALUE;
right:0; margin-right:±ÉRTÉK }

Utoljára, bónuszként, a lassan az igazítás/eltolás témában svájci bicska szerepét betöltő tábla elem, amennyiben tartalom széles elem, középre igazítás utáni eltolására van szükségünk (böngésző függetlenül)

Tartalom széles középről eltolt abszolút pozicionált táblaelem

HTML minta:

<table><tr><td> TARTALOM </td></tr></table>

CSS minta:

TÁBLA SZELEKTOR{ margin-left:±VALUE; margin-right: auto;
position: absolute; right: 0;
text-align: center; width: auto;}

A minták nagyrészt megegyeznek az előző bejegyzésben szerepelttel, kivéve persze, hogy megjelennek benne az eltolást létehozó CSS tulajdonság-érték párok:

• inline elem esetén, margin-left-nek adhatunk egy pozitív ill. negatív értéket, ezek sorban balra ill. jobbra fogják az adott inline elemet eltolni
• középen eltolt méretezett abszolút elem esetén, a left CSS tulajdonságnak adhatunk pozitív/negatív értéket előbbivel balra, utóbbival jobbra tolhatjuk az adott elemet
• középen eltolt széthúzott abszolút elem esetén, elsőnek állítsuk a bal/jobb margókat egyforma értékre – pozitív érték összenyomja, negatív érték széthúzza az elemet – majd balra tolás létrehozása érdekében, növeljük a bal margót és ugyanennyivel csökkentsük a jobbat, jobbra tolás esetén vice versa.

Táblázat felhasználása esetén a margin-left-nek adott pozitív-negatív értékek hozzák létre a balra-jobbra eltolást.

Ahogy már láthattuk abszolút elemet ie8-ig nem használhatunk középre igazításhoz, csak a statikus széthúzott és a tábla minta működőképes. Linkre kattintva a szokásos példafájl magyar, táblázattal felturbózott kiadása is megtekinthető .

Következő részben a nem kevésbé izgalmas, nem ill. pozicionált ős tetejéhez történő igazításról és igazítás utáni eltolásáról lesz szó.

Hajrá CSS, mindenKi a szabadba