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.