Dobozok elkészítése

2006, július 7 - 16:48

A példában használt előlaphoz háromfajta dobozt fogunk elkészíteni:
-a kiemelt hírek dobozát
-egy teljes szélességű és
-egy fél oldal szélességű dobozt.

Az előlap HTML váza a következő:

<!-- kikapcsoljuk a breadcrumbot -->
<style>#breadcrumb{display: none}</style>
			<!-- kiemelt hír helye -->
<div id="front_wrap">
	<div id="front_left1" class="front_half">
		<h3>Itthon</h3><!-- a doboz címkéje -->
			<!-- generált tartalom -->
	</div>
	<div id="front_right1" class="front_half">
		<h3>Nagyvilág</h3><!-- a doboz címkéje -->
			<!-- generált tartalom -->
	</div>
	<div id="front_middle3" class="front_middle">
		<h3>Szubjektív</h3><!-- a doboz címkéje -->
			<!-- generált tartalom -->
	</div>
</div>

Jelen esetben három kategóriából -Itthon, Nagyvilág, Szubjektív- listázunk híreket. A breadcrumbot eltüntetjük, kialakítjuk a HTML-vázat, és az egyes dobozokat felcímkézzük. (Én, amit lehet, statikusra hagyok, persze lehet a címkéket is dinamikusra tenni...)

A kiemelt hírnek nem készítünk dobozt, mert az mindig legfelülre kerül, ráadásul ha nem akarunk kiemelt hírekkel vesződni, akkor dobozok szépen a helyükre ugranak.

A dobozok megjelenítésére a következő CSS-kód szolgál (megj: igyekeztem minél kevesebb formázást benne hagyni a szemléltetés kedvéért):

/* fél szélességű doboz */
.front_half{float: left; width: 216px; margin-right: 14px;}
/*a teljes szélességű doboz */
.front_middle{float: left; width: 447px;}
/* doboz címkéje */
#front_wrap h3 {margin-bottom: 7px; border-bottom: 2px solid #cccccc; text-transform: uppercase}
/* a hírek címkéje */
#front_wrap .node h2.title a {border-bottom: 1px solid #aaaaaa}
/* egy kis cikképformázás */
#front_wrap img {float: left; width: 70px; padding: 1px; margin: 4px 5px 0px 0px; border: 1px solid #aaaaaa}
/* tovább link */
a.front_more{display: block; float: right; margin-top: -12px; margin-bottom: 25px}
#front_right1{ margin-right: 0px; }
/* híreket elválasztó elem */
.front_hr {display: block; clear: both; width: 216px;}

Ezzel megvolnánk. Tegyük most ezeket egy kicsit félre, és lássuk a lekérdezéseket.

Megjegyzés:
ha valaki nodevote-ot használ, de nem akarja a főlapon is viszontlátni, akkor a HTML vázban a legelső sort így használja:

<style>#breadcrumb, fieldset {display: none}</style>

és a css-be is vegye bele ezt:

#front_wrap fieldset {display: none}