Ebbe most nem írok kódokat, egyszerűen csak adok pár tippet, hogy mit hogyan érdemes megcsinálni egy jó dizájnhoz. Nálam kellett egy kis idő, míg letisztult a fejemben a kép, és így egy elég jól összeszedett dizájn kerekedett belőle.

Ezzel a kóddal lehet a modulokat lejjebb helyezni az oldal tetejétől.

Igazából egy sokat használt dologról van szó, a padding-ról, amit már több helyen is alkalmaztunk.

Itt is lehet őket, külön a szélső és a középső modulokra egyaránt.

.column_main {

padding-top: 500px;}

.column_side {

padding-top: 300px;}

Ide nem csak a felső (top), hanem akár a többi oldalt is be lehet írni, azért a jobb oldalt nem szokás, és az alsót sem érdemes, de balra el leht őket csúsztatni. Már akinek ehhez van kedve.

Na jó erről mégsem írtam elég részletesen, mivel akár azt is megtehetjük, hogy nem egy háttér van, hanem több, és azokat be kell pozícionálni, hogy ne egymáson legyenek.

Például ha van egy fejléced, és egy háttér a modulok alá. Azt ugyanis szintén be lehet állítani, hogy a modulok milyen távolságban legyenek az oldal tetejétől, amit szerintem még szintén nem írtam le.

Így nem kell külön a szerkeszthető fejléc, hanem csak bepozícionálja az ember a modulokat, és utána a háttereket is.

Ez a kód hozzá:

background: url(img.jpg) right bottom no-repeat, url(img2.jpg) left top repeat;

Részletes leírás a különböző részekről a legelején a blognak a Body témánál, de a fontosabb kódoknál is megtalálható.

Az url a kép url címe ugye, a right bottom a pozíció, a repeat meg az ismétlés, vagy éppen nem ismétlés.

Ha pontosan akarod őket pixel szerint, vagy %-ra, akkor leírás a fontosabb kódokban. Több háttérhez vesszővel el kell csak választani a sorokon belül.

background-image: url(img.jpg), url(img2.jpg);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;

A fejlécemen van/volt egy dobokockás kép, ami igazából háttérkép, csak nincs ismételve, és balra van állítva. Leírom azért hogy ezt hogyan is oldottam meg. Amúgy több kép is megadható háttérnek, csak pozícionálni kell, de valahol le is írtam szerintem.

Talán a Body témánál.

Ezt a kódot illesztettem be a fejléc kódjai közé:

background: #ffffff url("//css-elements.gportal.hu/portal/css-elements/image/gallery/1430632610_54.png") no-repeat left center;

Ez azt jelenti, hogy fehér a háttér színe, de van egy háttérkép is, ami nem ismétlődik, balra középre van igazítva.

A fejléc magasságát úgy állítottam be, hogy beleférjen a kép.

A képet rakhatod persze a másik oldalra is.

Demo nincs ha éppen más a témám.

Ide most nem teszek semmilyen kódot, hanem magát a példa menüt láthatjátok, aztán a tovább után lesz a kód maga magyarázattal.

Itt igazából adottak a kódok, lehet CSS-be is beletenni, vagy csak abba a modulba, ahol éppen használni kívánod, és akkor minden egyes táblázatnak új kódot tudsz megadni.

Ha modulon belül szerkeszted, akkor a Forráskódot használhatod hozzá, nem kell külön kódnézetre váltani ezért, így azonnal látod az eredményt.

Ha készítesz egy táblázatot a szerkesztőben, és forráskódra váltasz, akkor ezt láthatod:

Ez a táblázat:

Ez pedig a kódja:

A kódok mind a két szövegre hatnak, hiszen txtnormal stílusúak. Ahhoz, hogy ez csak a középső modulban működjön ezt kell megadni:

.column_main .txtnormal a {

}

De ha nem raksz "a" betűt, akkor a sima szöveget is tudod vele alakítani, ez azonban úgy tudom hat magára a  cikk szövegére is, nem csak a link nélküli tartalmakra (előző cikk, stb).

Szóval úgy használjátok, ahogy a többit, természetesen hover is megadható:

.column_main .txtnormal a:hover {

}

És ez érvényes fordítva is, ha a külső modulok txtnormálos szövegeit akarod átalakítani, pl a Blogplusz archívum részét, Ugrás a blogra, Oldal tetejére szövegeket.

Akkor .column_side .txtnormal a {

}

Ki hogyan akarja variálni.

Hat még az egyszerű modulokban a szerkesztés alatt a gombokra (csak te látod) és a képtár modulra is!

Szinte teljesen ugyan az, mint a Mit szólsz hozzá, csak más funkciót lát el, nálam ugyan olyan a stílusa, mint annak. De aki akarja, az variálhat rajta.

Alap kód:

A Mit szólsz hozzá? egy link, ami a kommentekhez vezet, és ennek is lehet saját stílust adni. Alap kód: