CSS : Menü/Friss kiírás táblázattal és CSS-vel |
Menü/Friss kiírás táblázattal és CSS-vel
Demó:
ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép |
Kettő kódra van szükségünk, az egyik a táblázat, a másik pedig a CSS.
Táblázat:
Ezt a kódot annak a modulnak a forráskódjába kell beillesztened, amelyikbe szeretnéd a menüt / frissítést kirakni. A beillesztés után visszatérhetsz rendes szerkesztői nézetbe, ahol látni fogsz két cellát egymás alatt. Értelemszerűen az elsőbe megy a menü neve, vagy a frissítés neve, dátuma; a másodikba pedig a tartalmi rész. Kód:
<table>
<tbody>
<tr>
<td class="friss1">ide jön dátum stb</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="friss2">ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép ide jön a szöveg vagy a kép</td>
</tr>
</tbody>
</table>
CSS:
A CSS kódban tudjuk megadni a menünk / frissítésünk kinézetét. Ha jól megfigyelted az előbbi táblázat kódban van kettő "class" rész, ezek a CSS-ben is megtalálhatóak. A "friss1" vonatkozik a menü / frissítés címére, dátumára stb; a "friss2" pedig a tartalmi részre. Ezt a kódot legcélravezetőbb jobb/bal oldalon lévő egyszerű modul forráskódjába rakni, így ha több helyre is beilleszted a táblázat, nem kell mindig újra elkészíteni hozzá a CSS-t. A kódban lévő magyarázatot nem kell kitörölnöd, a kód így is működik. Kód:
<style type="text/css">
td.friss1 /* menü vagy frissítés címe */
{width: 400px; /* szélesség */
height: 15px; /* magasság */
background-color: #cccccc; /* háttérszín */
font-size: 9px; /* betűméret */
font-color: #000000} /* betűszín */
td.friss2 /* tartalmi rész */
{width: 400px; /* szélesség */
background-color: #F0F8FF; /* háttérszín */
font-size: 10px; /* betűméret */
font-color: #000000} /* betűszín */
</style>
Természetesen több tulajdonság is megadható (betűtípus, keret stb.).
|