itt megtanulhatod, hogy hogyan is kell használni a táblázatkódot. egyáltalán nem nehéz, csak meg kell érteni a működésének alapjait. szóval vágjunk is bele :)
először is, a táblázatkódnak 2 fele van. van egyszer egy olyan kód, amit a modulodba kell tenni, amit meg akarsz táblázatkóddal változtatni, és van egy css része, ami hasonlít egy kicsit a sima cssekre, és ezzel tudod alakítani hogy hogyan nézzen ki a táblázatod. először kezdjük azzal az egyszerű kóddal, amit a modulodba kell tenni.
<table cellpadding="0" cellspacing="0" width="238px">
<tbody>
<tr>
<td class="fejlec" height="10">fejlécszöveg</td>
</tr>
<tr>
<td class="tartalom" height="10">tartalom</td>
</tr>
<tr>
<td class="lablec" height="10">láblécszöveg</td>
</tr>
</tbody>
</table>
neijedj meg tőle, nemolyan bonyolult mint amilyennek tűnik. amint láthatod, 3 része van: a fejléc, a tartalom, és a lábléc. ezeket úgyhívjuk hogy classok, és pirossal jelöltem a kódban őket. tehát ha a táblázatkódba beírod hogy <td class="valami"></td> és a cssbe meg beírod hogy td.valami akkor ott tudod formázni azt a classt. mint például itt nálunk is, van 3 classunk, a fejlec,a tartalom és a lablec classok, és az ehhez tartozó cssben ezeket formázzuk így: td.fejlec, td.tartalom, td.lablec. ezeket te átnevezheted a kódban, csak akkor a cssben is átkell nevezned, mert csak úgy fog hatni a classra. :) remélem érthető eddig. :)
ezeken kívül még ebben a kódban állíthatsz a táblázat szélességén is, kékkel jelöltem a kódban, hogy hol. :)
és most lássuk a css részét.:
<p><style type="text/css">
/* ez a rész a táblázat (modul) fejlécére, nevére vonatkozik */
td.fejlec
{background:url("kép url címe") 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: 0px; /* 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("kép url címe") repeat-y; /* tartalom képének url címe */
padding-right: 0px; /* távolság a jobb oldaltól */
padding-top: 0px; /* távolság a felső résztől */
padding-bottom: 0px; /* távolság az alsó résztől */
padding-left: 0px; /* távolság a bal oldaltól */
color: #000000; /* betűszín */
font-size: 8pt;
font-family: arial;} /* betűméret */
/* ez a rész a táblázat (modul) aljára vonatkozik */
td.lablec
{background:url("kép url címe") no-repeat; /* a fejléc-lábléc url címe */
height: 53px;} /* a fejléc-lábléc magassága */
</style></p>
pirossal jelöltem itt is a classokat nektek, amiknek mind a két kódban meg kell egyezniük, különben nem fog működni. :) amúgy a kód a nevek.gp-ről van, szóval nem én címkéztem fel, de gondoltam ha ezt használjuk, könnyebben megértitek a lényeget. :) szóval a nagy része fel is van címkézve nektek, de megpróbálom részletesebben elmagyarázni.
szóval ha szeretnél képet a fejlécnek, modulháttérnak, láblécnek, mint nálam is láthatod az oldalsó moduloknál, akkor készítsd el photoshopban a modult, vagdosd szét 3 részre, majd töltsd fel őket egyesével egy képfeltöltőre. másold ki a fejléc rész képének url-jét, majd keresd ki a megfelelő classot (értelemszerűen a td.fejlec class lesz az), és ott keresd ki azt hogy background. ez minden cssnél így van, a background résznél tudod állítani a hátteret, akár kép az, akár csak egy sima szín. szóval ott van egy olyan hogy url("kép url címe"), a kép url címe szöveg helyére másold be a kép linkjét, idézőjelek maradjanak, figyelj rájuk, különben nemfog működni. ha ez megvan, állítsd be a magasságát, tehát nézd meg photoshopban hogy milyen magas a fejlécképed, és a kódban a height-nél tudod beállítani.
ezek a fontosabb dolgok, ezeken kívül még beállíthatod a betűtípust a font-family-nál, a betűméretet a font-size-nél, a betűszínt a color-nál. a többi meg felvan címkézve. :)
nos remélem boldogulsz vele, ha nem, kérdezz a kérdezőben :)
|