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 elemINLINE-SZELEKTOR { margin-left:±VALUE; }
BLOKK-SZELEKTOR { text-align:center; }
BLOKK-SZELEKTOR{ position:static; text-align:center;
width:auto; margin-left:±ÉRTÉK ;
margin-right:±ÉRTÉK ; }
SZELEKTOR{ position:absolute; text-align:center;
width:+±ÉRTÉK ; left:±ÉRTÉK ; margin-left:auto;
right:0; margin-right:auto; }
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áblaelemHTML 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