AR Design
CSS
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>

 
Menü Plusz

 Üdvözlés
 Regisztráció
 Bejelentkezés
 Honlaptérkép
 Oldal: infó, vk
  AR mackók
 Szabályzat
 Hirdess ingyen!
 Linkcserék
 Buttoncserék
 ALL szövetség

 
AR ajánló

 Design-szettek
 CSS kódok
 Üzenőfal portálodra
 Több kinézet CSS-vel
 Képváltós menü
 Kérdezz-Felelek script
 Különleges frissítés
 Egy modulban több
 Képeffekt CSS-vel
 CSS magyarázat
 Különleges modulstílus
 Különleges modulstílus div

 
Chat


 
Online
2 látogató van itt
 
   
                                   

 

                                                              


Astropapa-iskolája mindenkit szeretettel vár és INGYENES TANÁCSOT AD minden kedves érdeklõdõnek!    *****    Supernatural - ODaát - 13. ÉVad - Extrák - Infók - ÉRdekességek - ODaát - Supernatural - 13.ÉVad - Supernatural - ODaát    *****    A csillagjövõ oldalon,nem csak alacsonyak az árak, hanem a tanácsadás, teljesen ingyenes. Szeretettel várlak minden nap    *****    Új design! Az egyetlen magyar Olicity és a legaktívabb Zöld Íjász rajongói oldala! 6. évad & Arrowverse hírek!    *****    No.1 Christina Aguilera Fan Site - Minden ami X-Tina, minden héten újdonságok! Katt!    *****    TelenovelasWeb - Hírek, képek, videók, saját véleménnyel tarkított bejegyzések telenovellákról és a színészekrõl! Gyere!    *****    Hamarosan olvashatók lesznek az oldalamon az Asztro-tükör asztrológiai írásai, cikkei.    *****    Gesztenye, gesztenye, gesztenye... és egy álmos sün! Gyertek az októberi rétre Mályvával és Pipitérrel! Irány a Mesetár!    *****    Születési,baba,hold horoszkóp,elõrejelzés,párkapcsolati elemzés,fogamzási képlet! Ingyenes tanácsadás!Várlak!Kattints!    *****    Ha te is a letisztult stílus híve vagy, nézz be hozzám! Smink, ruha, kritika //Style and Stuff// Style and Stuff//    *****    MINDEN HÓNAPBAN INGYENES G-PORTÁL SABLON! TELJESEN ÁTSZERKESZTHETÕ A LEGÚJABB KÓDOKKAL! Ne maradj le egyik hónapban sem!    *****    Rendeld meg az asztrológiai csomagok egyikét és teljesen ingyen megbeszélheted velem a kérdéseidet telefonon, skypeon!!!    *****    Nézz filmet messengeren! Ha szereted a filmeket klikk ide! Film!Film!Film!Film!Film!Film!Film!Film!Film!Film! Film!Film!    *****    Nézz filmet messengeren! Ha szereted a filmeket klikk ide! Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!    *****    A CSILLAGJÖVÕ OLDALON RENDKÍVÜLI AKCIÓK,LEHETÕSÉGEK.A MEGRENDELÉSEK UTÁN TELJESEN INGYENES KONZULTÁCIÓ,TANÁCSADÁS.VÁRLAK    *****    Õszi manókalandok a réten! Búcsúztassátok el ti is útra kelõ madarainkat Mályvával és Pipitérrel! Gyertek a Mesetárba!    *****    | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale |    *****    Bûbájos boszorkák - Charmed - Extrák - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed - Charmed -Játékok    *****    Infrashape Horizontal fittness stúdió Debrecen    *****    WISE-VOGUE | SZISSZ ÉS KLAU BLOGJA TERMÉKTESZTEKKEL, TIPPEKKEL, ÖTLETEKKEL A MINDENNAPOKRA // WISE-VOGUE // WISE-VOGUE