Dem�:

Modul neve

Ide pedig ker�l a tartalom! :) B�rmilyen kin�zetet k�sz�thetsz, csak a kreativit�sod szab hat�rt!  Olvasd el a lent l�v� le�r�st s k�sz�tsd el magad, avagy lesd meg az �ltalunk k�sz�tett modulst�lusokat, s ha valamelyik tetszik, haszn�ld fel nyugodtan! :)

Mindenki l�tott m�r olyan oldalt, ahol k�l�nleges a modulok kin�zete, s mindenki szomjazik a tud�sra, mellyel ez kivitelezhet�. Igaz�b�l semmi �jdons�g nem kell hozz�, ha valaki kicsit is b�torkodott belen�zni a K�l�nleges friss�t�s cikkbe, l�thatta, hogy ez a megold�s kulcsa. Igen, r�szben CSS-ben, egyszer kell megadni a "modul" fels� �s als� r�sz�t, ak�r k�zep�t. Nem v�letlen �rtuk id�z�jelbe a modul sz�t, ugyanis nem lehet a modulokat egy CSS-vel �gy alak�tani. Egy t�bl�zatra van sz�ks�g�nk, amit CSS-vel form�zunk meg, s ezt a t�bl�zatot kell egyszer� modulba bem�solni. Teh�t igen, csak egyszer� modulok kin�zet�t lehet �gy extr�zni.

K�r�nk mindenkit, aki az al�bbi le�r�st vagy �ltalunk k�sz�tett CSS-t haszn�lja, tiszteljen meg azzal, hogy kreditel minket legal�bb link form�j�ban. K�sz�nj�k!

T�bl�zat:
Kezdj�k a t�bl�zattal, ezt a k�dot kell a modul forr�sk�dj�ba illeszteni. Szerkeszt�i n�zetben ne lep�dj meg, csak egy egyszer� t�bl�zatot fogsz l�tni, ami 3 sorb�l �ll. �t�rhatod a c�met, tartalmat. T�bbsz�r egym�s ut�n rakhatod, �gy olyan mintha t�bb modul lenne egy modulban.
Az els� sor v�g�n add meg, hogy mekkora legyen a sz�less�g: width="450px". Ez a sz�m egyezzen meg a CSS-ben megadott sz�less�ggel.

<table cellspacing="0" cellpadding="0" width="450px">
    <tbody>
        <tr>
            <td class="fejlec" height="10">Fejl�c</td>
        </tr>
        <tr>
            <td class="tartalom" height="10">Tartalom</td>
        </tr>
        <tr>
            <td class="lablec" height="10">L�bl�c</td>
        </tr>
    </tbody>
</table>

CSS:
Azt, hogy milyen kin�zete legyen a t�bl�zatnak, CSS k�dban kell megadni. Itt kell megadnod a k�peket, ami �ltal�ban 3 k�l�nb�z� k�p. Kell egy k�p, ami lesz a "modul" fejl�ce, kell egy, ami a k�zepe lesz, teh�t, ahov� a tartalom ker�l, s kell egy, ami az alja (l�bl�c) lesz. �rtelemszer�en a k�pek sz�less�ge egyezzen meg. Legjobb megold�s, ha valamilyen grafikai programban szerkesztesz egy neked tetsz� sz�vegdobozt, majd, ha elk�sz�lt, akkor 3 r�szre v�god, �gy biztos, minden j�l fog passzolni. A k�dot egy bal/jobb oldali modul forr�sk�dj�ba rakd be, �gy b�rmelyik modulba is raktad a t�bl�zat k�dj�t, mindegyik ez alapj�n fog megjelenni. Az�rt is aj�nlatosabb oldals� modulba tenni, mivel �gy designv�lt�sn�l egyszer�en csak ezt a CSS-t kell �talak�tanod, nem kell minden egyes t�bl�zatba beleny�lni. A k�dban jel�lt�k, hogy hol mit kell megadni. Term�szetesen a k�d a magyar�zattal egy�tt m�k�dik, nem kell t�r�ln�d.
Megj.: a tartalom k�phez elegend� egy kisebb m�ret� k�p is, ugyanis ism�tl�dni fog.

Ha nem akarsz bajl�dni vele: k�sz modulst�lusok - teljesen k�sz CSS
Modulst�lusok k�pekben - modulst�lusokr�l k�pek, amelyeket csak sz�t kell v�gnod, felt�lt�s ut�n be kell illesztened CSS-be, ak�r �t is szerkesztheted �ket

S itt a k�d, ha magad szeretn�d elk�sz�teni:

<style type="text/css">

/* ez a r�sz a t�bl�zat (modul) fejl�c�re, nev�re vonatkozik */

td.fejlec
{background:url("http://") no-repeat;  /* fejl�c url c�me */
font-family: verdana;        /* bet�t�pus */
font-size: 10pt;             /* bet�m�ret */
color: #000000;              /* bet�sz�n */
text-align:center;           /* n�v igaz�t�sa: center=k�z�p, left=bal, right=jobb */
height: 65px;                /* fejl�c-k�p magass�ga */
width: 450px;}               /* fejl�c-k�p sz�less�ge */

/* ez a r�sz a tartalmi r�szre vonatkozik */

  td.tartalom
{background:url("http://") repeat-y;  /* tartalom k�p�nek url c�me */
padding-right: 20px;         /* t�vols�g a jobb oldalt�l */
padding-top: 1px;            /* t�vols�g a fels� r�szt�l */
padding-bottom: 1px;         /* t�vols�g az als� r�szt�l */
padding-left: 20px;          /* t�vols�g a bal oldalt�l */
color: #000000;              /* bet�sz�n */
font-size: 8pt;}                 /* bet�m�ret */

/* ez a r�sz a t�bl�zat (modul) alj�ra vonatkozik */

td.lablec
{background:url("http://") no-repeat;  /* a fejl�c-l�bl�c url c�me */
height: 177px;}              /* a fejl�c-l�bl�c magass�ga */
</style>