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 