b{}xm{}dels.toxin.hu

Remélhetőleg mindenki sikerrel átvészelte Április elsejét , a lap meg a WordPress motor frissítését…

A pozicionálási modellek elméleti szakaszának lezárásával, gyakorlati problémái-lehetőségei illetve azok megoldási módszerei következnek (sőt általánosságban is lezártuk az elméleti részt, mostantól gyakorlatban azonnal kamatoztatható megoldásokról-módszerekről szóló bejegyzések fognak következni, ill. esetleg a szelektorokról,doctype-okról,CSS mértékegységekről, hasLayout-ról lehet-lesz még bejegyzés valamikor). Ezen bejegyzésben arról a mintáról lesz szó aminek segítségével statikus elemek jobb-bal margóit ill. széthúzott abszolút (stretched absolute) elemek margóit -kivéve ie6- egymástól függetlenül tudjuk kitolni-behúzni, az elem pozíciójának megváltoztatása (offset) nélkül.

Lássuk e bejegyzéshez tartozó mintákat:

Horizontálisan behúzott-kitolt margójú, statikus blokk elemek:

BLOKK-KIVÁLASZTÓ {
position:static; width:auto;
margin-left:±VALUE;
margin-right:±VALUE; }

Horizontálisan behúzott-kitolt margójú, abszolút pozicionálású elemek:

KIVÁLASZTÓ{ position:absolute; width:auto;
left:0; margin-left:±VALUE;
right:0; margin-right:±VALUE; }

Vertikálisan behúzott-kitolt margójú, abszolút pozicionálású elemek:

KIVÁLASZTÓ { position:absolute; height:auto;
top:0; margin-top:±VALUE;
bottom:0; margin-bottom:±VALUE; }

A példafájlon illetve különböző böngészőtípusok alatt(én, ie6 abszolút nem megy ill. ie7-b1.8,fx2-3 alatt ellenőriztem) megnézhető és ki is próbálható a fenti minta, az arannyal jelölt elemek margói egymástól függetlenül állíthatóak, behúzáskor az adott elem mérete csökken, kihúzáskor nő, az elem lapon elfoglalt pozíciója az állítás során nem változik. Pozitív margók az elem középpontja felé mozgatják a margót, negatív margók azzal ellentétesen.

Lássuk a mintával kapcsolatos egyéb megkötéseket, a minta nem működik

• statikus elemeken, statikus blokk elemek vertikálisan nem széthúzhatóak
• float-olt elemek nem széthúzhatóak
• inline-text elemek nem széthúzhatóak ill. a behúzás-kitolás sem müködik
• width:100%,height:100% CSS tulajdonság beállításával széthúzott elemeken a minta nem működik
• ie6 képtelen abszolút elemek széthúzására ehelyett tartalomszélességűre állítja őket

Hajrá CSS