Bejegyzés született:

  • 15.02.2009
  • 10:58 DE.-kor
  • txn által

Pozicionálások a gyarkorlatban, haladó VI. : Alulra igazítás majd eltolás 0

feb15

Nézzük is mire is számíthatunk: ie6-7 render egymás felett, netrender-el , egyedül talán a tartalommagas abszolút pozicionált elem néz ki hasonlóan, de böngészőfüggetlenségről ez esetben nem beszélhetünk (azért ne írjuk le végleg a bejegyzésben szereplő mintákat, hiszen ie6 kivételével minden böngészőben ie7-8, opera, safari, chrome azonosan működnek). További megkötést jelent, hogy statikus tartalommagas elemet alulra igazításhoz nem használhatunk, ennek pozícióját a böngésző ill. az elem normál szövegfolyambeli pozíciója határozza meg.

A minták minden egyéb tekintetben szimmetrikusak a fentre igazítás mintáival, a margin-top,top és a maring-bottom,bottom értékek cserélődnek fel, lássuk is :

Alulra igazított méretezett statikus blokk

BLOKK-SZELEKTOR { position:static; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0; }

Alulra igazított méretezett abszolút elem

SZELEKTOR { position:absolute; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Alulra igazított tartalomszéles abszolút elem

SZELEKTOR { position:absolute; height:auto;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Alulra igazított széthúzott abszolút elem

SZELEKTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:0;
top:0; bottom:0; }

A példafájlon megfigyelhető, ha a már igazított konténerelem tartalmát alulra akarjuk igazítani, a konténerben lévő elemen az alulra igazítás mintáját még egyszer alkalmaznunk kell, azaz :

Alulra igazított tartalomszéles abszolút elem

SZELEKTOR { position:absolute; height:auto;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Az esetleges eltolást ebben az esetben, a margin-bottom tulajdonságnak adott konkrét értékek hozzák létre, azaz minden ahogy fent, kivéve, hogy

margin-bottom:±ÉRTÉK;

hajrá CSS :)

iratkozz fel a komment RSS-re

Még nem született komment ehhez a bejegyzéshez

Kérlek gazdagítsd a bejegyzést az észrevételeiddel

* -al jelölt mezők megadása kötelező

b{}xm{}dels.toxin.hu is powered by WordPress and the original FREEmium Theme.
developed by Dariusz Siedlecki and brought to you by FreebiesDock.com