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ó 
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.
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.
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 :
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.
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.
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 :
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.
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:
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:
 |
 |
 |
 |
Wordpress Themes sponsored by BlogPerfume
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