b{}xm{}dels.toxin.hu

Némi kihagyás után (költözés) akkor jegyzetgyártás, folyt. köv.: A mostani és az elkövetkező tizenegy bejegyzésben, különféle CSS tulajdonság kombinációk, és pozicionálási modellek felhasználásával – az eddigi minták kombinálásával: haladó – , az elemeket: balra, jobbra, középre, fel, le igazítjuk – legközelebbi vagy pozicionált ősükhöz, méretezve vagy tartalom/tartalmazó elem szélesen – ill. rajtuk igazítás után eltolást eszközölünk.

E bejegyzésben szereplő minta segítségével, egy elemet és annak tartalmát szülőeleme, vagy legközelebbi pozicionált ős eleme bal oldalához fogjuk igazítjuk. – A színpad az enyém -

Egy konténerelem tartalmának balra igazításához, annak text-align CSS tulajdonságát állítsuk left értékre. Magának a konténernek balra igazításakor, lehetőségünk van a konténert:

• fix szélességre állítani, ehhez a konténerelem következő CSS tulajdonság-érték párjainak beállítása szükségeltetik: margin-left:0, margin-right:auto, width:+ÉRTÉK, a margin-right:auto-ra állítása akadályozza meg a konténer tartalmazóelem szélesre nyúlását. Abszolút pozicionált elemet használva – ekkor a legközelebbi pozicionált ős bal oldalához történik az igazítás – margin-left, margin-right helyett a left:0, right:auto tulajdonság-érték párokat kell használnunk ill. beállítanunk.
• tartalmazóelem szélesre állítani, ekkor a width:auto, margin-left/right:0 ill. abszolút pozicionált elem esetén utóbbiak helyett left:0,right:0 tulajdonság-érték párokat kell beállítanunk
• tartalom szélesre állítani, ekkor statikus blokk elemet nem, csak abszolút pozicionált elemet használhatunk a következő CSS tulajdonság-érték párok beállítása mellett: width:auto, right:auto, és margin-right:auto – megtörténik a tartalom szélesre állítás – valamint left:0 és margin-left:0 – megtörténik a balra igazítás – .

Fentieknek megfelelően az egyes lehetőségekhez tartozó minták a következőek:

Balra igazított méretezett statikus blokk elem

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

Balra igazított tartalmazóelem széles statikus blokk elem

BLOKK-SZELEKTOR { position:static; text-align:left;
width:auto; margin-left:0;
margin-right:0; }

Balra igazított méretezett abszolút elem

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

Balra igazított tartalom széles abszolút elem

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

Balra igazított tartalmazóelem széles abszolút elem

SZELEKTOR{ position:absolute; text-align:left;
width:auto; left:0; margin-left:0;
right:0; margin-right:0; }

Valamint a mintához tartozó példafájl , böngészőfüggést nem tapasztaltam ie6,7,8b1,ff2-3rc1,Opera,Safari3.1.1. aki tapasztalna, kérem jelezze, ez mondjuk a többi mintánál is jó lenne, folyt. következik:

Hajrá CSS