Neko

Ú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.

Az egyedi modulstílus készítéséről itt, a három részre vágásról pedig itt olvashattok.
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(//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(//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(//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 jöjjenek a kódok

Modul DIV 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

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.