b{}xm{}dels.toxin.hu

frissítés megvolt, dizájncsere megvolt

admin — Sun, 12 Jul 2009 09:30:25 +0000

az eredeti dizájn
a módosított dizájn, ami látható tölthető,

legközelebbi bejegyzés köv. héten, várható téma : időzítések (setTimeout,setInterval) javascript, addig is Gmail for Mobile HTML5 Series: Using Timers Effectively az ajánlott olvasnivaló

dizájncsere

admin — Sat, 11 Jul 2009 18:47:51 +0000

work in progress … alakul …

Fluid CSS elrendezések IIb. A befelé növekvő doboz – a megoldás

txn — Sat, 14 Mar 2009 12:23:32 +0000

A probléma tehát adott, az előző bejegyzésben megkezdett fluid CSS elrendezés megalkotása zátonyra futott. A viewport felosztása ugyan problémamentesen lezajlott, egyszerűen kívánt arányban %-os szélességértéket kaptak a leendő tartalmat tároló blokkok, azonban a fluid CSS elrendezés felépítéséhez szükséges további elemek: margók,keretek,behúzások beillesztésekor probléma lépett fel. Egyrészt előbbi elemeknek vagy nem adhatunk meg %-os értéket : border, vagy megadhatunk ugyan, de akkor a dizájnolhatóságot csapjuk agyon (én még nem kaptam változó margin,border,padding tulajdonságokkal rendelkező psd-t dizájnertől), ha viszont fix érték(ke)et állítunk be: kinyírjuk a fluid CSS-elrendezést (lásd előző bejegyzés), szükség volt tehát a nagy ötletre, amit kedvenc CSS-könyvünk le is szállít számunkra.

A konkrét probléma tehát, a leendő tartalmat tároló blokk elemeknek – legyenek azok float-olt, abszolút, vagy statikusak- nem állíthatunk be border,padding,margin tulajdonságot, mert ezzel azok szélesség dimenziói megváltoznának.

Ellenben, ha mindeme tulajdonságokat egy tartalmazó elem széles elemnek, egy statikus blokknak, adnánk meg, majd ezt az elemet helyeznénk a leendő tartalmat tároló blokk elembe – aminek a továbbiakban nem állítunk be padding,border,maring értéket, így a szélessége fix marad-, lényegében az elem befele növekedne, ellenben ugye az eredeti CSS box modellel, ami kifelé növekszik : a width CSS tulajdonság a tartalom szélességét állítja be, ehhez adódnak hozzá a padding,border,margin szélességek.

Tehát a megoldás, a bejegyzés címét is adó, a befelé növekvő doboz, először a minta:

HTML

TARTALOM

vagy
TARTALOM

CSS

SZELEKTOR { width:SZÁZALÉK; min-width:+ÉRTÉK; }
SZELEKTOR *.oi { margin:+ÉRTÉK; border:WIDTH STYLE COLOR;
padding:+ÉRTÉK; background:STYLES; display:block; }

a könyv az ‘Outside-in Box’ terminus technikus-t vezette be, ezért a ‘oi’ class név. A minta táblára és magasságra nem, csak szélességre alkalmazható, viszont így is megoldja a fenti problémánkat – és az előző bejegyzésben szereplő ie6,7 egyedi viselkedésését ill. bug-ját- .

Előbbi mintával kisegítve, folytathatjuk a szépreményű, fluid CSS elrendezés felépítését, tehát

#wrapper {
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
}
#nav {
    float: left;
    min-width: 170px;
    width: 20%;
}

#main {
    float: left;
    min-width: 170px;
    width: 80%;
}





    
        Szélessége 20% a konténer elemének
    


    
        Szélessége 80% a konténer elemének

ból, kiindulva, a fenti mintát az előbbi kódhoz hozzáadva,

#wrapper {
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
}
#nav {
    float: left;
    min-width: 180px;
    width: 20%;
}
#main {
    float: left;
    min-width: 180px;
    width: 80%;
}

#nav .oi, #main .oi{
	background-color:gold;
	border:5px solid silver;
	padding:10px;
	margin:15px;
}




    
    	
            
                Szélessége 20% a konténer elemének - border:5px; padding:10px; margin:15px;
            
		
    
    
    	
            
                Szélessége 80% a konténer elemének - border:5px; padding:10px; margin:15px;

a példafájlon megtekintve, majd a böngésző ablak méretezésével játszva, látható hogy immáron tetszőleges margin, padding, és border CSS tulajdonság beállítására van lehetőség az elrendezés szétesése nélkül, megelégedéssel nézhetjük ie netrenderel-t is, tevékenységünk – ill. az elrendezés – legalábbis eddig, böngészőfüggetlen.

Az alapok tehát megvannak, a következő bejegyzésekben kiterjesztjük lehetőségeinket ill. finomítjuk a mintát.

foly. köv. , hajrá CSS

Fluid CSS elrendezések IIa. A befelé növekvő doboz – a probléma

txn — Mon, 09 Mar 2009 06:26:50 +0000

Ebben a bejegyzésben ‘from scratch’, nulláról kezdünk el felépíteni egy fluid-alkalmazkodó css elrendezést ill. megismerkedünk azzal a mintával, ami egyáltalán lehetővé teszi, hogy egy ilyen elrendezés ne csak elméletben, hanem a gyakorlatban is tervezhető (design) / kivitelezhető (sitebuild) legyen.

Aki esetleg hiányolná a pragmatizmust, a gyakorlatba való átültethetőséget a mintából, tekintse meg a netvibes kezdőlapot, és kövesse szemmel, a google vagy youtube widget-et megjelenítésében beálló változásokat, miközben átméretezi a webböngészőt, ergo a fluid layout tervezési elvei, túl az előző bejegyzésben szerepelteken:

“különböző eszközök megjelenítési képességeihez automatikusan adaptálódik (hozzáigazul), megjelenítési képességek alatt azok (esetlegesen egymástól eltérő) betűtípusait, megjelenítési dimenzióit (szélesség x magasság) ill. nagyítási lehetőségeit értem”

közvetlenül a gyakorlatban kamatoztathatóak : widget gyártáskor. Másrészt megtekinthető hova lesz a téma kifuttatva, azaz hova érkezünk meg pár hónap múlva, előbbi dizájn minden egyes elemére és annak megvalósítására, a későbbiekben egy-egy jegyzet elejéig, vissza fogunk még térni.

Alkalmazkodó CSS elrendezés megtervezésekor/kivitelezésekor, ellentétben a szokványos megközelítéssel, kívülről-befelé haladunk, elsőnek meghatározzuk a viewport szélességértékét, majd ezt a szélességet osztjuk fel százalékos arányban a lehetséges tartalomblokk elemek között ill. meghatározzuk előbbi tartalomblokk elemek lehetséges minimális, maximális szélességét, ennek megfelelően :

#wrapper {
	font-family: verdana, arial, sans-serif;
	font-size: 18px;
	margin: 0 auto;
	max-width: 1000px;
	overflow:hidden;
}
#nav {
	float: left;
	min-width: 170px;
	width: 20%;
} #main {
	float: left;
	min-width: 170px;
	width: 80%;
}

ill. előbbieket szemléltetve , következő lépés lenne a margók(margin), behúzások(padding), keretek(border) hozzáadása az elrendezéshez, azonban ha előbbi CSS tulajdonságok valamelyikét beállítjuk a tartalomblokk elemek egyikén -vagy másikán is- , pl.

#nav {
    float: left;
    min-width: 170px;
    width: 20%;
    border:1px solid black;
}

látható, hogy a tartalomblokk elemek ebben az esetben már férnek el egymás mellett. Adódna a megoldás, a tartalomblokk elemek százalékos szélességének csökkentése:

#nav {
    float: left;
    min-width: 170px;
    width: 19.8%;
    border:1px solid black;
}

1-1 px mindkét oldalon, (1000-.8×1000-2) = .198X1000 , de ha a konténerelem szélessége nem 1000px, hanem pl., 100px (vagy 1000-nél kisebb) a fenti megoldás már nem helyes, 100px-re pl.

#nav {
    float: left;
    min-width: 170px;
    width: 18%;
    border:1px solid black;
}

18%-kot kéne beállítani, (100-.8×100-2)=.18×100, hasonló a probléma nemcsak a border, de margin ill. padding esetében is, habár e két utóbbira adhatunk meg %-kos szélességértéket, máskérdés hogy változó margin,padding értékek, dizájnolhatóság és látvány szempontjából sem túl szerencsések.

További problémát jelent ie6,7 floatolt elem kezelése is, ie7 az 50%-ra állított szélességű elemeket mindképp egymás mellé helyezi, margin,padding,border beállítástól függetlenül (feltételezve, hogy mi is erre gondoltunk), kár hogy ezzel a viselkedésével magára maradt, ie6 ellenben a float-olt elemeket nem pozicíonálja minden esetben közvetlenül egymás mellé.

A következő bejegyzésben, mindeme problémákat orvosló minta kerül bevezetésre, ami annyira alapnak fog bizonyulni, hogy az összes fluid CSS elrendezés reá fog épülni.

hajrá CSS

Fluid CSS layouts – Alkalmazkodó CSS elrendezések I.

txn — Sun, 01 Mar 2009 14:17:24 +0000

A pozicionálások témakört befejezvén, az elkövetkező bejegyzésekben a CSS elrendezésekkel, és azok holdudvarával fogunk részletekbemenőleg foglalkozni.

Elöljáróban és zárójelben, amennyiben a ‘fluid layouts’-ra egy megfelelő vagy már bevezetett/elfogadott magyar terminus-technicus-t bekommentálna valaki azt előre is megköszönném, egyelőre az alkalmazkodó elrendezést fogom használni – ami elég faramuciul hangzik – ilyenkor mindenki gondoljon a ‘fluid layouts’-ra …

Alkalmazkodónak mondhatunk egy elrendezést akkor, ha a következő alapfeltételeknek képes megfelelni :

különböző eszközök megjelenítési képességeihez automatikusan adaptálódik (hozzáigazul), megjelenítési képességek alatt azok (esetlegesen egymástól eltérő) betűtípusait, megjelenítési dimenzióit (szélesség x magasság) ill. nagyítási lehetőségeit értem
akadálymentesség
modularitás
könnyű testre szabhatóság
nyílt forrású javascript könyvtárak használatán alapultság

előbbi tulajdonságok mindegyikéről bővebben lesz még szó a későbbiekben, ebben a bejegyzésben ‘csupán’ megtekintjük azt az alapot, amit a későbbiek során kibővítünk ill. építkezni fogunk.

Az alap és forráskódjának megtekintése után, lássuk mire is képes még az elrendezés a fentieken túl

amennyiben változik a látótér (viewport) szélessége (a megjelenítő eszközök egymástól különböző felbontásban dolgoznak), automatikusan képes annak nagyságától függően egy sorba vagy oszlopba szervezni tartalmát (vagy a tartalmát felépítő elemeket)
képes követni a látótér szélességének növekedését (adott pontig, túl széles oszlopszélesség már az olvashatóság rovására menne)
az elrendezés egyes építőblokkjai képesek követni a látótér szélességének csökkenését, szintén csak egy adott pontig, azon túl a csökkenés már az elrendezés olvashatóságát akadályozná meg
táblázatmentesség

Előbbi tulajdonságok képezik azon tulajdonságok minimális halmazát, aminek egy alkalmazkodónak mondott elrendezésnek meg kell tudnia felelni. A példafájlban szereplő elrendezés képes erre, erről előbbi linkre kattintás után, a böngésző ablakának átméretezésével győződhetünk meg.

Természetesen számos más tulajdonság is előtérbe kerülhet -ahogy fog is a későbbiekben-, egy adott elrendezés megvalósításakor, előbbi példafájl a ‘minimális’ követelményeknek felel csak meg, ill. csak azokat a HTML elemeket(markup) ill. CSS tulajdonságot(style) tartalmazza, amik képessé teszik eme megfelelésre, képességeit a további bejegyzések alkalmával fogjuk majd bővíteni.

folyt. köv.

ui: itt hívnám fel a figyelmet a fentiekhez kacsolódó rrd cikksorozatra: webdesigner leszel s katona vadakat terelő juhász címmel

Pozicionálások a gyarkorlatban, haladó VII. : Vertikális középre igazítás

txn — Sun, 22 Feb 2009 16:53:53 +0000

Középre igazításkor alapvető feladat, hogy egy elemet annak legközelebbi őt tartalamazó pozicionált ősének vertikális közepére igazítsuk. Túl az előbbin, cél még, hogy a középre igazítás automatikus legyen, azaz a tartalamzó elem magasságának változásákor, ne kelljen az elemet folyamatosan kézzel újra és újra középre igazítsuk. E két célnak próbálnak megfeleni a bejegyzésben szereplő minták.

Essünk is túl a már szokásos a feketelevesen, ie6-ie7 netrenderer-el által generált kimenet, a render-ből generált képből kiderül, -hasonlóan a korábbi jegyzetekben szerepelt mintákhoz- ie6 képtelen az abszolút pozicionált elemek középre igazítására, ie7 alatt kezdtek a dolgok rendbe jönni, de még itt sincs lehetőségünk méretezett elemek középre igazítására, kizárólag széthúzott abszolút pozicionált elemekkel tehetjük ezt meg (height:auto), ie8,opera,safari,chrome,fx2-3 (utolsó publikus verziók), a jegyzetben szereplő minták egyformán jelennek meg.

Középre igazított inline elem

SZELEKTOR { line-height:+ÉRTÉK; }

Középre igazíott méretezett abszolút elem

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

Középre igazított tartalamzó elem széles abszolút elem

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

Mindezeket a példafájlon megszemlélve, a tanúságok, szűk keresztmetszet: ie6-7 ergo, inline elemek gond nélkül középre igazíthatóak (első minta böngészőfüggetlen), abszolút elemeket mechanikusan középre tolhatunk, de böngészőfüggetlen automatikus méretezésre vagy középen tartásra ne is számítsunk amíg ie6 köztünk van.

A minták működéséről, láthatjuk, hogy a pozicionálásnak három lehetséges módja van, elsőnek az inline, a tartalmazó elemnek konkrét méret legyen beállítva, majd adjuk meg a line-height tulajdonságának ugyanezt az értéket, legyen px vagy % stb, a többi a böngésző dolga, adhatunk meg kisebb vagy nagyobb értéket is, ezzel az inline elem vertikális pozicióját tudjuk befolyásolni az-az eltolás hozható létre, ekkor egy overflow:hidden tulajdonság is kerüljön beállításra különben ie6 széttolhatja a tartalmazó elemet, megváltoztathatva az eredetileg beállított magasság értéket.

Abszolút pozicionálások, látható a két módozat közti különbség, vagy a height-nek adunk meg konkrét éréket és a margin-top,-bottom értékeknek auto-t, vagy vice-versa. Első esetben a konténerelem magasságának változásait nem követi az elem, utóbbi esetben ahogy változik a konténer úgy változik a középre rendezett elem magassága is.

Sajna statikus vagy tartalommagas elemet nem tudunk középre rendezni, a már középre igazított abszolút elemeken belüli elemek középre igazításakor a

Középre igazított tartalamzó elem széles abszolút elem

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

mintát kell mégegyszer felhasználnunk.

hajrá CSS

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

txn — Sun, 15 Feb 2009 09:58:28 +0000

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

Pozicionálások a gyarkorlatban, haladó V. : Felűre igazítás majd eltolás

txn — Sat, 14 Feb 2009 14:39:41 +0000

S02E01 ….
Folytatván az igazítások ill. a pozicionálások a gyakorlatban, haladó minták leírását, a bal, jobb, középre igazítás után a felűre igazítás mintája következik. Egyből a lényeg : a netrenderer által generált ie6-7 összehasonlító ábrát megszemlélve : a következtetés, ez a minta bizony korántsem nevezhető böngésző függetlennek, ennek ellenére alapszinten, az abszolút pozicionálást ebben az esetben kerülve, s -egyelőre- jobb híján be kell érnünk vele.

Felűre igazított méretezett statikus blokk elem

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

Felűre igazított tartalomszéles statikus blokk

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

Felűre igazított méretezett abszolút elem

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

Felűre igazított tartalomszéles abszolút elem

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

Felűre igazított széthúzott abszolút elem

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

Azaz, amennyiben nem akarunk konkrét magasságot beállítani, hagyjuk a height tulajdonságot : auto – értéken. Statikus helyett abszolút pozicionálás, túl a nyilvánvaló position tulajdonságbeli különbségen, abszolút pozicionálás esetében : a top, bottom tulajdonságok jelennek meg , értékük minden esetben ill. esetenként megegyezik a margin-top,-bottom tulajdonságokéval. Tartalom ill. széthúzott (tartalmazó elem magas) abszolút pozicionálás esetén, margin-bottom,bottom auto, ill. nulla értéket vesz fel.

Széthúzott abszolút pozicionálásról, ie6 esetében le kell mondanunk, és ahogy a példafájlon is látszódik statikus blokk elemeket egy adott konténerben minden különösebb nehézség nélkül értsd. a böngésző megteszi magától, egymás alá rende(re)lhetünk.

Eltolás: nagyon egyszerűen lehetséges a már igazított elemeken eltolást kieszközölni: egyszerűen a mintákban szereplő: margin-top:0 helyére margin-top: +-Értéket kell behelyettesíteni .

hajrá CSS

Pozicionálások a gyarkorlatban, haladó IV. : Középre igazítás majd eltolás

txn — Sun, 08 Jun 2008 10:27:48 +0000

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 (

TARTALOM

) é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:

TARTALOM

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

Pozicionálások a gyarkorlatban, haladó III. : Középre igazítás

txn — Sat, 07 Jun 2008 08:59:11 +0000

Balra igazítás és tolás után, – a várható téma- előbbiek fordítottjai a jobbra igazítás és tolás következne, de ehelyett a középre igazításról fogunk ‘beszélni’, lévén előbbiek a balra tolás/igazításnak a megfordítottjai, csak a margin-left/right ill. left/right tulajdonságok értékeinek fel/megcseréléseiben különböznek tőlük(ilyenre szokták volt írni, hogy : házifeladatnak) .

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.

Ha az IE Netrenderel-el – firefox extension is van már hozzá – megnézzük a példafájlról ill. a lehetséges, és a majd ie8 alatt mind jól megjelenített , mintákról készült, ie6 által lerenderelt lapot , láthatjuk, hogy lehetőségeink jelen pillanatban eléggé behatároltak, mindenesetre lássuk őket:

Középre igazított méretezett statikus blokk elem

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

Közpre igazított tartalmazó elem széles statikus blokk elem

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

Középre igazított méretezett elem

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

Középre igazított tartalmazó széles elem

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

A könyvben: “An element can’t be shrinkwrapped if it is centered” szerepel, ezért, a Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolása idevonatkozó mintáját beszúrom ide:

Középre igazított tartalom széles tábla elem

HTML minta

TARTALOM

CSS minta

SZELEKTOR { position:static;
width:auto; margin-left:auto; margin-right:auto; }

a fenti mintákat egy kicsit elemezve: tartalmat text-align:center CSS tulajdonság-érték pár megadásával tudunk beállítani, statikus elem középreigazításakor használhatunk fix, vagy dinamikusan változó szélességet, előbbi esetén a jobb-bal margókat:auto-ra utóbbi esetben egy fix értékre kell beállítani, zérus értékre állítás esetén lesz az elem tartalmazóelem széles. Abszolút pozicionált elemet használva, ekkor az elemet legközelebbi pozicionált őséhez képest igazíthatjuk középre, előbbi értékekhez még egy left,right:0 CSS tulajdonság-érték párt is hozzá kell adnunk.

Horizontálisan tartalom szélesre egy elemet, ezek szerint, csak táblázat felhasználásával tudunk beállítani(lásd utolsó minta). ie6 képtelen abszolút elemeket középre igazítani , ie7 már elboldogul az abszolút széthúzott elemmel középre igazított méretezettel továbbra sem, ie8b1: már helyesen jeleníti meg őket, Firefox2-3rc2,Opera-Safari (utolsó elérhető verziók, win) szintén.

A példafájlon látható hogy méretezett statikus elem esetén a margók mérete, míg fix margóbeállítás esetén az elem szélessége fog dinamikusan változni. Amennyiben százalékot állítunk elem, vagy margószélességnek, ezek a befoglaló elem szélességének megadott százalékos arányában, dinamikusan fognak átméreteződni.

Következő bejegyzésben a már középre igazított elemen fogunk eltolást kieszközölni :
Hajrá CSS