Fluid CSS elrendezések IIb. A befelé növekvő doboz – a megoldás 0
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
<BLOKK><div class=”oi”> TARTALOM </div></BLOKK>
vagy
<INLINE><span class=”oi”> TARTALOM </span></INLINE>
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%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<p>
Szélessége 20% a konténer elemének
</p>
</div>
<div id="main">
<p>
Szélessége 80% a konténer elemének
</p>
</div>
</div>
</body>
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;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="oi">
<p>
Szélessége 20% a konténer elemének - border:5px; padding:10px; margin:15px;
</p>
</div>
</div>
<div id="main">
<div class="oi">
<p>
Szélessége 80% a konténer elemének - border:5px; padding:10px; margin:15px;
</p>
</div>
</div>
</div>
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 
iratkozz fel a komment RSS-re
Még nem született komment ehhez a bejegyzéshez