2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

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>


1 778 megtekintés

Hozzászólások