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: