Div-ek kialakítása cserélhető stíluslapokhoz
Kedves mindenki.
Cserélhető stíluslapokra vágyom, de elég régóta helyben topogok, mivel minden új stíluslapnál akad valami igazítanivaló a tartalmi részen, ahhoz pedig a jövőben nem szeretnék nyúlni.
Valami középutas megoldást keresek: viszonylag kevés div alkalmazásával változatos kinézetű, 1-2-3 oszlopos honlapvariációkat szeretnék alkotni.
A mostani elképzelésem sematikusan így néz ki:
<div id=”blog”>
<h1>cím</h1>
<div id=”poszt>
<h2>bejegyzescim</h2>
bejegyzés
<div id=”bejegyzeslab> idő, komment, stb. </div>
</div>
<div id=”menu1”>
<h3> alcím </h3>
<h4> linkek1cim </h4>
<ul>
<li> link1 </li>
</ul>
<div class=”menu1linklab”> (valami) </div>
<h4> linkek2cim </h4>
<ul>
<li> link2 </li>
</ul>
<div class=”menu1linklab”> (valami) </div>
<div id=”menu1lab”> (valami) </div>
</div>
<div id=”menu2”>
<h3> (valami) </h3>
<h5> linkek3cim </h5>
<ul>
<li> link3 </li>
</ul>
<div class=”menu2linklab”> (valami) </div>
<h5> linkek4cim </h5>
<ul>
<li> link4 </li>
</ul>
<div class=”menu2linklab”> (valami) </div>
<div id=”menu2lab”> (valami) </div>
</div>
<div id=”bloglab”> valami </div>
</div>
Kérem szépen a véleményeteket, hogy (az általam még nem ismert várható problémákra tekintettel) elég jó-e ez így, vagy inkább minden egyes elemhez új div-et éri meg bepakolni, vagy netán teljesen másképp kellene csinálni.
■ Cserélhető stíluslapokra vágyom, de elég régóta helyben topogok, mivel minden új stíluslapnál akad valami igazítanivaló a tartalmi részen, ahhoz pedig a jövőben nem szeretnék nyúlni.
Valami középutas megoldást keresek: viszonylag kevés div alkalmazásával változatos kinézetű, 1-2-3 oszlopos honlapvariációkat szeretnék alkotni.
A mostani elképzelésem sematikusan így néz ki:
<div id=”blog”>
<h1>cím</h1>
<div id=”poszt>
<h2>bejegyzescim</h2>
bejegyzés
<div id=”bejegyzeslab> idő, komment, stb. </div>
</div>
<div id=”menu1”>
<h3> alcím </h3>
<h4> linkek1cim </h4>
<ul>
<li> link1 </li>
</ul>
<div class=”menu1linklab”> (valami) </div>
<h4> linkek2cim </h4>
<ul>
<li> link2 </li>
</ul>
<div class=”menu1linklab”> (valami) </div>
<div id=”menu1lab”> (valami) </div>
</div>
<div id=”menu2”>
<h3> (valami) </h3>
<h5> linkek3cim </h5>
<ul>
<li> link3 </li>
</ul>
<div class=”menu2linklab”> (valami) </div>
<h5> linkek4cim </h5>
<ul>
<li> link4 </li>
</ul>
<div class=”menu2linklab”> (valami) </div>
<div id=”menu2lab”> (valami) </div>
</div>
<div id=”bloglab”> valami </div>
</div>
Kérem szépen a véleményeteket, hogy (az általam még nem ismert várható problémákra tekintettel) elég jó-e ez így, vagy inkább minden egyes elemhez új div-et éri meg bepakolni, vagy netán teljesen másképp kellene csinálni.
css ZEN Garden
Ha esetleg nem ismerned, a css Zen Garden oldala adhat nemi utbaigazitast a tartalmi kialakitast illetoen.
Zen Garden
Oldalak
Nincs tökéletes megoldás
Nagy segítséget adhat a tag-eken kívűl ha ügyesen használod az osztály és ID tulajdonságokat is! Nagyon le tudnak egyszerűsodni a kiválasztók. Erre jó példa az index kódja.
Hirtelen ennyi jutott eszembe.
Nagyjából
Üres span vs. körbefogó span
Amikor a span üres akkor a spannak adod a háttérképet es a szöveg fölé pozicionálod és méretezes, hogy betakarja azt.
Az első megoldás hátránya, hogyha valaki CSS-t bekapcsolva, de képeket kikapcsolva netez, akkor a szöveg eltünik neki (mert odébb lett pozicionálva) de háttérkép sem jelenik meg a letiltás miatt.
A második módszer hibája, hogy átlátszó képekkel nem működik (hiszem ekkor az alatta lévő szöveg bezavarna). Ami fontosabb, hogy sajnos az IE-ben vacak a cache kezelés, legalabbis IE6-ban, és ha agresszív cachel-ésre van állítva a beállításoknal a böngésző (tipikusan fejlesztőknél, a default beállítés nem ez kivéve a megrendelődet :) akkor a háttérképet minden alkalommal letölti a linen belül lévő spanra ahányszor az egér felette megmozdul és villogni fog.
Lehet választani. Én a másodikat szeretem.
jó lesz
Igazán nem akarom senkinek beosztani a szabadidejét, de ez olyan nagyon izgalmas téma, és az első stíluslapos élmények olyan nagyon meghatározóak, szívesen olvasnék róla egy hosszabb lélegzetű leírást. A tanfolyam-jellegű cikkekben többnyire apró példák vannak, csak az adott fejezethez kapcsolódva.