CSS Box Model a jeho nevýhody pri liquid layout

CSS Box Model a jeho nevýhody pri liquid layout

Box model v CSS hovorí o tom, ako sú usporiadané jednotlivé atribúty width, height, padding, margin a border tak, aby spolu vytvorili objekt (viď obrázok). Týmito atribútami sú vymedzené obdĺžnikové oblasti stránky (každá oblasť je tzv. box), ktoré ohraničujú výsledný obsah objektu.

Box model prešiel počas histórie viacerými vývojovými štádiami. Momentálne používaný model sa zdá elegantný a použiteľný, ale má niektoré nepríjemné vedľajšie účinky, ktoré znepríjemňujú webdizajnérovi život.


CSS BOx Model

 

Celková šírka objektu v box modeli je: celková šírka = width + padding + border + margin

Problém vzniká pri použití rôznych jednotiek naraz

Predstavme si, že sa rozhodneme na stránke použiť takzvaný liquid layout. Šírku webstránky a jej jednotlivých elementov nebudeme definovať v pevných jednotkách, ale napríklad v percentách alebo emoch.

Keďže sa snažíme dodržiavať aj estetické kritériá a zámer nášho grafického návrhu, snažíme sa, aby stránka pôsobila vizuálne harmonicky. Objekty jeden pod druhým musia byť zarovnané, mať rovnaké šírky a ich okraje prechádzať z jedného do druhého plynule.

V grafickom návrhu sme sa rozhodli jeden z objektov, ktorý nazvime pracovne „banner,“ orámovať jemným šedým rámčekom o šírke 1px (približne ako tento, ale krajšie ;]). 

Tento objekt má na stránke fungovať ako banner, natiahnutý na celú šírku stránky.

A tu narazíme na problém: ak použijeme jednotky absolútne (pixely) a relatívne (percentá, emy, exy, atď..) naraz, nepodarí sa nám dosiahnuť žiadaný efekt.

Prečo? – objektu priradíme element <div class=“banner“>...</div> a naštýlujeme ho pomocou CSS:

Žiadame, aby bol element natiahnutý na 100% šírky stránky, a aby mal border o šírke 1px.

.banner {
   width: 100%;
   border: 1px solid #B5BFC6;
}

Keď však prepočítame celkovú šírku podľa box modelu, získame 100% + 1px a hľa, banner sa zrazu nezmestí do nadefinovanej šírky stránky. Čo s tým?

Nuž, pravdupovediac, nič. ;]

Existuje niekoľko čiastočných riešení

Najjednoduchším riešením je navrhovať stránky tak, aby sa takýto problém nemohol nikdy vyskytnúť, t.j. na citlivých elementoch nepoužívať žiadne vizuálne prvky, ktoré vyžadujú rovné línie zarovnané s ostatnými objektami okolo. Ďalšou možnosťou je nepoužiť 100%, ale nejaké menšie číslo, a opäť prispôsobiť aj všetky okolité objekty.

Môj popis tohto fenoménu nie je úplný, okrem spomenutého jednoduchého prípadu na problém s nekompatibilnosťou absolútnych a relatívnych jednotiek v box modeli sa dá naraziť pri práci na najrôznejších riešeniach a je len na webdizajnérovi, ako sa s ním vyrovná. ;]

 

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.