~>&#

Babablogom

 
Beszlgessnk
 
Bejelentkezs
Felhasznlnv:

Jelsz:
SgSg
Regisztrci
Elfelejtettem a jelszt
 
Eddig
Induls: 2015-04-09
 
Kdok

Modulok fejlce

2015.04.10. 12:50, Enma22
Oldals s kzps

Ez az alap kd, de van a GPortalnak egy olyan CSS kdja, amiben van mg pr szmunkra rdekes sor.

Alap:

td.modtitle { /* modulok fejlce */
padding-left: 4px; 
font-size: 9pt; 
font-weight: bold; 
color: white; 
background-color: #686868; 
height: 19px
}
 
Az sszes modulra egyformn hat.
 
Ez pedig a szls s a kzps modulra vonatkozik:
.column_side,
.column_main {

 

A kdok sszevonhatak, gy egy ilyet tudunk krelni:

.column_side td.modtitle {

valamint

.column_main td.modtitle {

Ezek ugye kln stlust adnak a szls modulnak, s kln stlust a kzps modulnak.

Ami mg lnyeges, hogy magassgnak akkora mretet adj meg, amekkora a fejlcedben a kp, ha egyedit ksztesz mondjuk Photoshopban, vagy Photo Filtrben. s persze modul szlessgnek is.

Szls modulhoz van egy ilyen szpsges kis kdunk is:

.column_side {
    width: 160px;
}

Ez a szls modul szlessge.

.column_main {

width: 400px;}

Ez pedig a kzps.

Az alap kdbl kiindulva a padding azt hatrozza meg, hogy balrl mekkora kz legyen a modulok kztt, s ugye az oldal szltl.

A font-size egyrtelm, betmretet ad.

A font-weight adja meg, hogy flkvr vagy norml szveg legyen.

Amit mg megadhatunk:

font-family - bettpus

font-style - stlus, normal, vagy italic, ami dltet jelent

font-variant - normal vagy small-caps, azaz csupa nagybet, a nagybets szavak els betje nagyobb

Jhet a szn, ami a color, ide a kdgenertorral gykdhettek valamit.

Aztn lehet mg rnykot is adni neki.

text-shadow: 2px 2px 5px #000000;

Az els szm a horizontlis, a msodik a vertiklis, a harmadik szm pedig az elmoss, majd szn. ne legyen nagyon klnbz, mint az alap szn, mert vakthat.

Aztn mg egy kis extra a text-transform, amivel nagybetss, kisbetss, kapitliss is varzsolhatjuk, br annyira nem jellemz.

text-transform: uppercase vagy lovercase vagy capitalize;

Ami mg fontos, az a szveg helyzete, vagyis a text-align, ami center, left vagy right lehet.

A betk kz rakhatunk egy kis sznetet is, ezzel szthzva ket, ha gondoljuk.

letter-spacing: 2px;

Ha mnusszal rjuk, akkor pedig sszbb hzza ket.

Ennyit a szvegrl.

Jhet a httr, amit mr korbban taglaltunk a body rsznl, ugyan gy kell megadni itt is, ismtlst felesleges, ha elg nagy kpet vlasztottl, vagy nem kpet akarsz, hanem sima sznt. Amennyiben szerkesztett fejlced lesz, gy a magassghoz a kped magassgt add meg! Lsd lejjebb!

background-image: url(kep url); vagy

backgroung-color: #ededed;

Magassgot is meg lehet adni, valamint paddig-ot, hogy milyen tvolsgra legyen a szveg a szltl.

Magassg: height: 19px;

padding: 2px 2px 4px 3px;

Ez egyszerbb, mint mindet kln megadni, amgy ha bizonyos oldalakat akarunk, akkor padding-left, right, bottom, top.

Keretet is adhatunk neki, n nem szoktam rajta varilni, egyszer kerettel dolgozom.

border-bottom: 2px solid #000000;

border-top: 2px solid #000000;

border-left: ;

border-right: ;

Most nem rtam vgig, de olyan mretet, s sznt adsz neki, ami az oldalad dizjnjhoz megy.

Le is lehet ket kerekteni, itt is rengeteg varici van, a legegyszerbb ez:

border-radius: 2em 2em 3em 3em

Ki kell tapasztalni melyik szm melyik sarkot kerekti, lehet 0-t is berni, gy az nem lesz kerek.

Azt hiszem ennyi lenne.

Itt a kd egyben, ezt tudjtok varilni. Ha mindegyik modulnak ms fejlcet szeretntek, akkor tegytek el amit a cikk elejn is lertam.

td.modtitle { /* modulok fejlce */
padding-left: 4px; 
font-size: 9pt;
font-family: tahoma;
font-style: normal;
text-shadow: 2px 2px 3px #000000;
text-align: center;
backgroung-image: url(kepem.hu/kepem.jpg);
border-bottom: 1px solid #000000; 
font-weight: bold; 
color: #ffffff; 
background-color: ; 
height: 19px
}
Szlj hozz te is!
Nv:
E-mail cm:
Amennyiben megadod az email-cmedet, az elrhet lesz az oldalon a hozzszlsodnl.
Hozzszls:
Azrt, hogy ellenrzhessk a hozzszlsok valdisgt, krjk rd be az albbi kpen lthat szt. Ha nem tudod elolvasni, a frissts ikonra kattintva krhetsz msik kpet.
rd be a fenti szt: j CAPTCHA krse
 
Mg nincs hozzszls.
 
Friss
Friss bejegyzsek
2015.06.10. 11:16
2015.06.09. 18:03
2015.06.09. 17:53
2015.06.09. 13:30
2015.06.09. 12:46
2015.05.27. 15:21
2015.05.19. 16:37
2015.05.19. 15:39
2015.05.19. 15:33
2015.05.13. 10:40
Friss hozzszlsok
 

Ha érdekelnek az animék,mangák,videojátékok, japán és holland nyelv és kultúra, akkor látogass el a személyes oldalamra.    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    Könyves oldal - Ágica Könyvtára - ahol megnézheted milyen könyveim vannak, miket olvasok, mik a terveim...    *****    Megtörtént Bûnügyekkel foglalkozó oldal - magyar és külföldi esetek.    *****    Why do all the monsters come out at night? - Rose Harbor, a város, ahol nem a természetfeletti a legfõbb titok - FRPG    *****    A boroszkányok gyorsan megtanulják... Minden mágia megköveteli a maga árát. De vajon mekkora lehet ez az ár? - FRPG    *****    Alkosd meg a saját karaktered, és irányítsd a sorsát! Vajon képes lenne túlélni egy ilyen titkokkal teli helyen? - FRPG    *****    Mindig tudnod kell, melyik kikötõ felé tartasz. - ROSE HARBOR, a mi városunk - FRPG    *****    Akad mindannyijukban valami közös, valami ide vezette õket, a delaware-i aprócska kikötõvárosba... - FRPG    *****    boroszkány, vérfarkas, alakváltó, démon és angyal... szavak, amik mind jelentenek valamit - csatlakozz közénk - FRPG    *****    Why do all the monsters come out at night? - Rose Harbor, a város, ahol nem a természetfeletti a legfõbb titok - FRPG    *****    why do all monsters come out at night - FRPG - Csatlakozz közénk! - Írj, és éld át a kalandokat!    *****    CRIMECASESNIGHT - Igazi Bûntényekkel foglalkozó oldal    *****    Figyelem, figyelem! A második vágányra karácsonyi mese érkezett! Mesés karácsonyt kíván mindenkinek: a Mesetáros    *****    10 éves a Haikyuu!! Ennek alkalmából részletes elemzést olvashatsz az anime elsõ évadáról az Anime Odyssey blogban!    *****    Ismerd meg az F-Zero sorozatot, a Nintendo legdinamikusabb versenyjáték-szériáját! Folyamatosan bõvülõ tartalom.    *****    Advent a Mesetárban! Téli és karácsonyi mesék és színezõk várnak! Nézzetek be hozzánk!    *****    Nagyon pontos és részletes születési horoszkóp, valamint 3 év ajándék elõrejelzés, diplomás asztrológustól. Kattints!!!!    *****    A horoszkóp a lélek tükre,egyszer mindenkinek érdemes belenézni.Keress meg és én segítek értelmezni a csillagok állását!    *****    HAMAROSAN ÚJRA ITT A KARÁCSONY! HA SZERETNÉL KARÁCSONYI HANGULATBA KEVEREDNI, AKKOR KATT IDE: KARACSONY.GPORTAL.HU