2015.04.10. 12:50, Enma22
A kódok összevonhatóak, így egy ilyet tudunk kreálni:
.column_side td.modtitle {
valamint
.column_main td.modtitle {
Ezek ugye külön stílust adnak a szélső modulnak, és külön stílust a középső modulnak.
Ami még lényeges, hogy magasságnak akkora méretet adj meg, amekkora a fejlécedben a kép, ha egyedit készítesz mondjuk Photoshopban, vagy Photo Filtrében. És persze modul szélességnek is.
Szélső modulhoz van egy ilyen szépséges kis kódunk is:
.column_side {
width: 160px;
}
Ez a szélső modul szélessége.
.column_main {
width: 400px;}
Ez pedig a középsőé.
Az alap kódból kiindulva a padding azt határozza meg, hogy balról mekkora köz legyen a modulok között, és ugye az oldal szélétől.
A font-size egyértelmű, betűméretet ad.
A font-weight adja meg, hogy félkövér vagy normál szöveg legyen.
Amit még megadhatunk:
font-family - betűtípus
font-style - stílus, normal, vagy italic, ami dőltet jelent
font-variant - normal vagy small-caps, azaz csupa nagybetű, a nagybetűs szavak első betűje nagyobb
Jöhet a szín, ami a color, ide a kódgenerátorral ügyködhettek valamit.
Aztán lehet még árnyékot is adni neki.
text-shadow: 2px 2px 5px #000000;
Az első szám a horizontális, a második a vertikális, a harmadik szám pedig az elmosás, majd szín. ne legyen nagyon különböző, mint az alap szín, mert vakíthat.
Aztán még egy kis extra a text-transform, amivel nagybetűssé, kisbetűssé, kapitálissá is varázsolhatjuk, bár annyira nem jellemző.
text-transform: uppercase vagy lovercase vagy capitalize;
Ami még fontos, az a szöveg helyzete, vagyis a text-align, ami center, left vagy right lehet.
A betűk közé rakhatunk egy kis szünetet is, ezzel széthúzva őket, ha gondoljuk.
letter-spacing: 2px;
Ha mínusszal írjuk, akkor pedig összébb húzza őket.
Ennyit a szövegről.
Jöhet a háttér, amit már korábban taglaltunk a body résznél, ugyan úgy kell megadni itt is, ismétlést felesleges, ha elég nagy képet választottál, vagy nem képet akarsz, hanem sima színt. Amennyiben szerkesztett fejléced lesz, úgy a magassághoz a képed magasságát add meg! Lásd lejjebb!
background-image: url(kep url); vagy
backgroung-color: #ededed;
Magasságot is meg lehet adni, valamint paddig-ot, hogy milyen távolságra legyen a szöveg a szélétől.
Magasság: height: 19px;
padding: 2px 2px 4px 3px;
Ez egyszerűbb, mint mindet külön megadni, amúgy ha bizonyos oldalakat akarunk, akkor padding-left, right, bottom, top.
Keretet is adhatunk neki, én nem szoktam rajta variálni, egyszerű kerettel dolgozom.
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
border-left: ;
border-right: ;
Most nem írtam végig, de olyan méretet, és színt adsz neki, ami az oldalad dizájnjához megy.
Le is lehet őket kerekíteni, itt is rengeteg variáció van, a legegyszerűbb ez:
border-radius: 2em 2em 3em 3em
Ki kell tapasztalni melyik szám melyik sarkot kerekíti, lehet 0-át is beírni, így az nem lesz kerek.
Azt hiszem ennyi lenne.
Itt a kód egyben, ezt tudjátok variálni. Ha mindegyik modulnak más fejlécet szeretnétek, akkor tegyétek elé amit a cikk elején is leírtam.
td.modtitle { /* modulok fejléce */
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
}