Cikkajánló
Hello! I’m a hobby designer who loves to do it. I bet orders, but not for free. Most of my themes are mobile-friendly. If you like what I do,
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
A változatosság kedvéért ma is hoztam egy egyszerű kinézetű G-Portálos témát. A színvilág nem sokban tér el az Emma Roberts-es kinézettől. Teljesen véletlen, hogy mind a kettő alapszíne a
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
DIV kódolású modulstílus részletes leírása
Egyedi szövegdoboz

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis lobortis est, eget molestie eros pharetra a. Nullam fermentum, nisl vel sodales dapibus, felis augue aliquam sem, eget pharetra dui risus sed massa. Aenean egestas quis urna sit amet laoreet. Aliquam venenatis eu urna porta mollis. Donec vitae augue varius, posuere arcu in, feugiat purus. Donec adipiscing enim vitae diam lacinia scelerisque. Nullam aliquet dui odio, nec tempus eros aliquam in. Sed pretium commodo sapien quis adipiscing. Proin ut vulputate ipsum. Nulla vestibulum tellus in lorem feugiat lobortis. Vivamus at nisl faucibus, aliquam mauris at, vestibulum sapien. Etiam placerat pellentesque nibh. Aenean quis pulvinar nisi. Morbi sit amet ornare urna.

2015.


Úgy hiszem, hogy a DIV-es kódolás sokkal egyértelműbb és könnyebb, mint a táblázatos megoldás. Elsőre lehet majd nem így látjátok, de ha használjátok és megszokjátok rájöttök, hogy ezzel sokkal könnyebb bánni, mintha táblázatos kódot használnátok. Ha meg van a három rész a modulstílusból (fejléc, tartalom, lábléc) akkor töltsd fel egy képtárba a G-Portálon a képeket vagy egy olyan tárhelyre, ami neked szimpatikus. A három kép url címét pedig a CSS kódban a megfelelő url címnél le kell cserélni. Ez egyértelműen kitűnik a kódban. A CSS kódban kell a modulod szélességét és magasságát is megadnod. Az a biztos, ha mindhárom css részben (fejléc, tartalom, lábléc) megadod az értékeket. A DIV kóddal nem is kell bajlódni semmit. Ha beállítottad a képeket, akkor már csak a szöveget kell átírni és készen is vagy. Egyedül a CSS kódban kell dolgoznod amíg a modulod tökéletes nem lesz. A CSS kódot külön-külön is leírtam és mellé írtam, hogy mi micsoda benne.
 

CSS kód leírása
 

.centerDiv { /* ezzel lesz a modul pont középen a honlapodon */
    width: 83%; /* százalékban tudod megadni, hogy pontosan hol helyezkedjen el a modul */
    margin: 0 auto; /* ezt nem kell bántani!! */

#modulfejlec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547028_90.png) no-repeat; /* a fejléced url képe. a no-repeat-on ne változtass!!! */
   font-family: book antiqua; /* cím betűtípusa */
   font-size: 24px; /* cím betűmérete */
   font-weight: normal; /* cím félkövér-e vagy normál */
   font-style: italic; /* cím dőlt */
   height: 205px; /* fejléc kép magassága */
   width: 529px; /* fejléc kép szélessége */
   color: #F48F9A; /* cím betűszíne */
   text-align: center; /* cím középen van */
   line-height: 143px; /* ennyivel dobja el fentről a címet, hogy pont a rubrikában legyen. Padding helyett alkalmazzukl ezt!!!! */

#tartalom {
   background-color: transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404546066_04.png) repeat-y; /* a tartalmi rész képének az url címe */
   font-family: Trebuchet MS; /* tartalom betűtípusa */
   color: #F6E0E2; /* tartalom betűszíne */
   font-size: 14px; /* szöveg betűmérete */
   font-weight: normal;
   text-align: justify; /* szöveg sorkizárt, de lehet jobbra, balra vagy középre igazított is */
   text-shadow: 1px 1px 1px #EC4257; /* szövegnek árnyék */
   height: 100%; /* magasság százalékban megadva. Maradjon így!!! */
   width: 529px; /* a háttérképed szélessége */
   padding-left: 24px; /* ezzel tudod állítani, hogy a szöveg pont középen helyezkedjen el a modul bal és jobb széléhez képest. */

#tartalom-szelessege { /* itt magának a tartalomnak amit írsz, annak a szélességét kell beállítani */
   width: 480px;

#modullablec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547020_84.png) no-repeat; /* a lábléced képének url címe */
   width: 529px; /* a kép szélessége */
   height: 208px; /* a kép magassága */
   line-height:295px; /* fentről ennyivel dobja le a szöveget, hogy pont a kör közepén helyezkedhessen el. Padding helyett használatos!!! */
   padding-left: 60px; /* ennyivel dobja befelé a szöveget */
   color: #F06A7B; /* szöveg színe */


És akkor használd fel a kódokat és készíts te is egyedi modulstílust smiley
 

DIV modulstílus kódja
 

<div class="centerDiv">
    <div id="modulfejlec">
        Friss bejegyzésed címe</div>
    <div id="tartalom">
        <div id="tartalom-szelessege">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis lobortis est, eget molestie eros pharetra a. Nullam fermentum, nisl vel sodales dapibus, felis augue aliquam sem, eget pharetra dui risus sed massa. Aenean egestas quis urna sit amet laoreet. Aliquam venenatis eu urna porta mollis. Donec vitae augue varius, posuere arcu in, feugiat purus. Donec adipiscing enim vitae diam lacinia scelerisque. Nullam aliquet dui odio, nec tempus eros aliquam in. Sed pretium commodo sapien quis adipiscing. Proin ut vulputate ipsum. Nulla vestibulum tellus in lorem feugiat lobortis. Vivamus at nisl faucibus, aliquam mauris at, vestibulum sapien. Etiam placerat pellentesque nibh. Aenean quis pulvinar nisi. Morbi sit amet ornare urna.</div>
    </div>
    <div id="modullablec">
        Dátum</div>
</div>


CSS kód
 

<style type="text/css">
.centerDiv
{
    width: 83%;
    margin: 0 auto;
}
#modulfejlec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547028_90.png) no-repeat;
   font-family: book antiqua;
   font-size: 24px;
   font-weight: normal;
   font-style: italic;
   height: 205px;
   width: 529px;
   color: #F48F9A;
   text-align: center;
   line-height: 143px;
}
#tartalom {
   background-color: transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404546066_04.png) repeat-y;
   font-family: Trebuchet MS;
   color: #F6E0E2;
   font-size: 14px;
   font-weight: normal;
   text-align: justify;
   text-shadow: 1px 1px 1px #EC4257;
   height: 100%;
   width: 529px;
   padding-left: 24px;
}
#tartalom-szelessege {
   width: 480px;
}
#modullablec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547020_84.png) no-repeat;
   width: 529px;
   height: 208px;
   line-height:295px;
   padding-left: 60px;
   color: #F06A7B;
}    
-->    </style>

lindadesign Hozzászólások
1 727 megtekintés

Hozzászólások