CSS : Különleges modulstílus div id-vel |
Különleges modulstílus div id-vel
Különleges modulstílus
Tetszik? Bármilyen kinézetet készíthetsz, csak a kreativitásod szabhat határt. Akkor olvasd el a lenti leírást figyelmesen, majd próbáld ki. Biztos menni fog! :) Ha még sem, kérdezz bátran a kérdezőben!
Adliz&RanKeL
Ennek ugyanaz a lényege, mint a már ismert Különleges modulstílusnak, csak a kivitelezése más, egyszerűbb. Szintén két kódra van szükség, ahogy már említettük, szimplán CSS-vel nem lehet megoldani.
DIV id
Egyszerű modul forráskódjába kell illesztened. Oda, ahol meg szeretnéd jeleníteni ezt a kinézetet. Szerkesztői nézetben írhatsz bele nyugodtan.
<div id="total">
<div id="fejlec">Modul neve</div>
<div id="tartalom">
<div id="szelesseg">Ide jön a tartalom!</div>
</div>
<div id="lablec">ide jöhet pl. dátum</div>
</div>
CSS:
A CSS kódban lehet meghatározni a kinézetet. Itt kell megadnod a képeket, ami 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 div id-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 div id-be 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.
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 CSS, amire szükséged van:
<style type="text/css">
#fejlec {
background:url("http://") no-repeat; /* fejléc url címe */
font-family: verdana; /* betűtípus */
font-size: 14pt; /* betűméret */
font-weight: bold; /* betű vastagság, ha nem akarod, írd: normal */
padding-left: 80px; /* modul nevének helye bal oldaltól */
padding-right: 30px; /* modul nevének helye jobb oldaltól */
height: auto; /* ezt hagyd így */
width: auto; /* ezt hagyd így */
line-height: 100px; /* a fejléc magasságát add meg itt */
color: #9a002c; } /* betűszín */
#total {
width: 431px;} /* itt add meg a modul szélességét, tehát a képek szélességét */
#szelesseg {
width: 400px;} /* itt add meg a tartalom szélességét, ajánlott 1-2 pixellel kisebbet megadni, mint a totál, illetve, ha van keret, akkor azt is számold le */
#tartalom {
background:url("http://") repeat-y; /* tartalom képének url címe */
text-align: justify; /* szöveg igazítása, jelenleg sorkizárt, lehet még bal, jobb, közép: left, right, center */
font-size: 8pt; /* betűméret */
color: #004d58; /* betűszín */
padding-left: 30px; } /* tartalom a modul bal oldalától */
#lablec {
background:url("http://") no-repeat; /* lábléc url címe */
height: 72px; /* lábléc magassága */
font-family: verdana; /* betűtípus */
font-size: 7pt; /* betűméret */
font-weight: bold; /* betű vastagság, ha nem akarod, írd: normal */
color: #71b6c2; /* betűszín */
padding-left: 300px; /* lábléc szövege a modul bal oldalától */
padding-top: 30px;} /* lábléc szövege a lábléc tetejétől */
</style>
|