ugrás a tartalomhoz

Div-ek kialakítása cserélhető stíluslapokhoz

holli · 2007. Jan. 7. (V), 10.45
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.
 
1

css ZEN Garden

Protezis · 2007. Jan. 7. (V), 12.30
Szia!

Ha esetleg nem ismerned, a css Zen Garden oldala adhat nemi utbaigazitast a tartalmi kialakitast illetoen.
2

Zen Garden

holli · 2007. Jan. 7. (V), 13.02
A Zen Garden fordított engem a stíluslapos formázás felé. Egy kicsit más jellegű, mint ami nekem kell - ott fix tartalommal dolgoznak, ez meg is látszik néhány stíluslapnál, például ennél : az utólag kiegészített bekezdés kilóg a háttérképből -, de akkor a hozzászólásodat úgy tekintem, hogy a "minden elemhez külön div" megoldásra szavazol.
3

Oldalak

janoszen · 2007. Jan. 7. (V), 13.11
Kezdd el egy-két weblaboros ember honlapját nézegetni. Vagy akár a WL forrását. Az sokat segíthet. Az enyém pl. kicsit olyan mintaprojektnek készült, de viszonylag egyszerű az oldalszerkezet.
4

Nincs tökéletes megoldás

Jano · 2007. Jan. 7. (V), 14.08
Az ötlet jó, de a CSS korlátos lehetőségei, a böngészők hiányos támogatása és a dizájn bonyolultságától függően mindig elképzelhető olyan eset, hogy bele kell nyúlni a HTML-be, vagy dizájnból kell valamit elhagyni. Persze ha már előre gondolkozol ezek nagyon apró módosítások lesznek. Jó úton haladsz, szerintem nem érdemes tovább bonyolítanod, az első 2-3 dizájn elkészülte után már 90%-ra jó lesz többire is.

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.

  • listakban elso elemnek "elso" osztályt adni
  • menuk tudjanak "aktiv" osztalyt kapni amikor kivalasztjak
  • body-nak lehessen classt adni ha a site tobb "szekciora" bomlik, igy ezeknek lehet CSS-bol egyeni kinezetet adni. Pl egy hirportalon rovat szerint: belfold, tech
  • ha akarsz szoveget kepre cserelo modszert alkalmazni akkor (ures) feleslegesnek tuno spanokat lehet kodba tenni (ha php tolja ki akkor ezeket akar parameterezni is lehet, hogy pl menukbe, fejlecekbe beletegye-e)

Hirtelen ennyi jutott eszembe.
5

Nagyjából

holli · 2007. Jan. 8. (H), 18.54
Nem kapkodom el, az biztos :) Már meg is találtam a honlapodon, Jano, hogy mire lesz nekem jó az "elso" osztály meg az aktív menü. A bodyn és a spanokon még rágódok egy kicsit, na pontosabban igyekszem kideríteni, hogy van-e különbség a zengardenes spanmegoldás és az üres span közt, eddig csak id-t meg class-t használtam; lelkes vagyok, de kezdő :) Köszi.
6

Üres span vs. körbefogó span

Jano · 2007. Jan. 8. (H), 20.16
Amikor körbeveszed span-nal a szöveget, akkor azt azért csinálod, hogy az eredeti befoglaló elemnek adott háttérkép felett lévő szöveget valahova el tudjad rakni a span segítségével.
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.
7

jó lesz

holli · 2007. Jan. 9. (K), 23.21
Ezt is kösz :) És a body is kell, hogyne kellene, eddig is minden oldalon másmilyen hátterem volt, ki se mondom, hogy hogyan oldottam meg, jaj... (bár azzal nemrég találkoztam először, hogy a bodyhoz is tartozhat id meg class).

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.