b{}xm{}dels.toxin.hu

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