AR Design
CSS
CSS : Különleges modulstílusok

Különleges modulstílusok


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>

 
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
 
   
                                   

 

                                                              


Asztrológiai tanácsadás - BECSÜLET KASSZÁS alapon már Skype-on is! INGYENES OKTATÁS az ASZTRO-suliban!    *****    A csillagjövõ asztrológia,nagyon sok olvasmányt,ezoterikus,témákat,szoftvereket és óriási nyári akciókat ajánl, NEKED!    *****    Egy blog rólam, velem, mert szeretek ide írni. Ðzsí. *** Augusztus 25-én PlayDay, azaz játéknap sok-sok nyereménnyel! :)    *****    Tudod hol van és mit jelent a horoszkópodban a Felszálló holdcsomópont? A Chiron? A Lilith? Én megmondom.Látogass meg!    *****    Gyere és nézd meg a lovas és állatos blogom.Különbözõ érdekes történetekkel és sok friss blogbejegyzéssel.Jó nézelõdést!    *****    Ünnepi minijáték vár rád! Kattanj rá, küldd be a megoldást, és NYERJ! =)    *****    Az ASZTRO-suli mindenkit Szeretettel vár. Tanuld meg az asztrológiát a saját horoszkópod elemzésével -TELJESEN INGYEN!    *****    A csillagjövõ asztrológia portálon akció! Születési horoszkóp + 3 év elõrejelzés + Párkapcsolati elemzés 2000 Ft. katt!    *****    Szereted a humort, jó zenéket? Szeretnél ilyen mûsorban részt venni? Keress oldalamon!    *****    "Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.    *****    PROJECT DC egy futurisztikus-disztópikus SZEREPJÁTÉK! Bármikor szívesen látjuk a csatlakozókat!    *****    Ne maradj le semmirõl, értesülj elsõ kézbõl a Selena Gomezzel kapcsolatos hírekrõl! Hat éve várja a látogatókat az oldal    *****    Református exmisszus-gyakornok, jégkorong, izomautók, rap zene. Igen, ez mind én vagyok! Hogyan? Nézz be és megtudod! :)    *****    Szeretsz írni? Lenne egy jó témád, amit megosztanál másokkal? Akkor kattints, és nyerj egy vendégposztot nálam! :)    *****    Kedveled Ian Somerhaldert? Odáig vagy a szépséges színésznõért, Nina Dobrevért? Kattints! Nem csak TVD rajongóknak!    *****    Szeretsz filmet nézni? Akkor itt a helyed! Nézz filmet facebook messengeren. Klikk ide!!!!    *****    MAYFLOWER / egy májusban született lány blogja / MAYFLOWER / egy májusban született lány blogja / MAYFLOWER    *****    DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE! DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE!    *****    ***Egy blog. Egy lány. Egy élet.*** Ðzsí blogol. *G-PORTÁL KÖZÖSSÉGMENTÉS ugyanitt. Ha hiányzik a régi közösség.*BLOG***    *****    Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok