Weblap elrendez�se a CSS haszn�lat�val

F�ADMIN  2004.08.26. 16:51

Meguntad a t�bl�zatokat, �s a CSS a kedvenc eszk�z�d hogy elrendezd weblapjaidat, annak ellen�re, hogy unalmasnak �s cs�ny�nak t�nik? Ez a cikk le�rja egy m�dj�t annak, hogy egy sz�p CSS elrendez�st k�sz�ts�nk h�tt�rk�pek �s marg�k haszn�lat�val.
Ehhez egy XHTML oldalt fogunk haszn�lni: " Tartalom k�ls� st�lussal". Ha minden megvan, kezdj�nk bele!

P�lda f�jlok

Ezt az XHTML oldalt fogjuk haszn�lni. Kattints a View / Source men�pontra, hogy megkapd. Let�ltheted a k�peket, amiket ehhez haszn�ltam.

A egyszer� CSS f�jl �gy n�z ki:

k�d

#wrapper { }

#header { }

#navigation { }

#sidebar { }

#main { }

A h�tt�r elk�sz�t�se

A #wrapper haszn�lat�val fogjuk defini�lni a munkater�letet, ami majd a tartalmunkat fogja megjelen�teni. Egy k�toszlopos oldalt fogunk k�sz�teni, a fejr�sz alatt navig�ci�s men�vel. Valami ilyent:



Most el kell d�nten�nk, hogy milyen sz�les legyen a tartalomr�sz. 600 pixel az eg�sz, 200 pixel a men�oszlop (400 pixel a fo~ tartalom). L�pj be Photoshopba vagy valami egyszer� k�pszerkeszt� programba �s k�sz�ts egy 600 pixel sz�les k�pet, ami a h�ttered lesz.

A k�p mind�ssze 1-4 pixel magas legyen, mert ezzel lesz kit�ltve a lap csempeszer�en az alj�ig. Ne felejtsd el, hogy a k�ped tartalmazza a men�oszlop h�tter�t is. Itt van amit haszn�lni szoktam:



Itt jegyezz�k meg, hogy a sz�vegter�let �s a perem k�z�tt 8 pixel t�vols�g van. Nem szeretn�nk, hogy ezen a dekorat�v kereten sz�veg legyen, s�t egy kicsit beljebb �runk, �gy 10 pixel helyet fogunk hagyni a men�oszlopunk el�tt.

A c�msor elk�sz�t�se

A #header haszn�lat�val a meglev� h�tt�r tetej�re egy k�pet helyezhet�nk. Ennek a k�pnek j� esetben 600 pixel sz�lesnek kell lennie, de a magass�ga b�rmekkora lehet. Ne felejts�k el, hogy bele kell illenie a h�tt�rbe. L�ssuk az eny�met.

A k�pnek ki kell eg�sz�tenie a meglev� h�tteret folytatva a keretet azzal megegyez� �rnyalattal. Ez a p�lda nagyon egyszer�, a tied lehet bonyolultabb.



A tartalomr�sz

Most k�szen van a k�t f� k�p�nk, �gy el tudjuk kezdeni az elrendez�s k�dol�s�t.

Kezdj�k a #wrapper elemmel:

k�d

#wrapper {
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0;
text-align: left;
background: url(images/background.gif) center repeat-y;
}

Marg�: 0 pixel t�vols�gra helyezz�k a #wrappert a tetej�t�l, �s autoumatikus t�vols�gra a bal, jobb oldalt�l �s az ablak alj�t�l. Helykit�lt�s: 0 annyit jelent nincs helykit�lt�s, �s a h�tt�r is passzol a mi h�tt�rk�p�nkh�z.

A c�msor elhelyez�se

Most ef�l� a c�msor k�p�t kell elhelyezn�nk. Mivel a #wrapper-t 600 pixel sz�lesre �ll�tottuk, �gy nem sz�ks�ges ezt �jra jel�ln�nk. Csak a magass�g�t �s a h�tter�t kell megadnunk.

k�d

#header {
height: 100px;
background: url(images/header.gif) no-repeat top left;
}

Marg� haszn�lata elv�laszt�sra

Most megvan a tartalomr�sz�nk �s a c�msorunk, �gy m�r csak a #navigation, #sidebar �s #main elemekhez kell a CSS-t elk�sz�teni. Tudjuk, hogy a #sidebar sz�veg�nek a bal oldalon kell lennie, de ha most megn�zed az �sszes inform�ci� a men�oszlop ut�n k�zvetlen�l tal�lhat�, mint egy �tlagos dokumentumban..

Ennek kijav�t�s�ra marg�kat fogunk alkalmazni. Egyszer�en a marg� adja meg, hogy hol lesz az elem "lev�gva". A float attrib�tumot a sz�veg balra mozgat�s�hoz haszn�ljuk:

k�d

#sidebar {
width: 175px;
margin-left: 15px;
margin-right: 10px;
float: left;
}

Eml�kezz�nk csak: eld�nt�tt�k, hogy 10 pixel helynek kell lennie a bal oldalon, �gy nem fog a men�oszlop a kerettel �rintkezni. Tegy�k 15-re! Ezt a Margin-left-el csin�ljuk. A Margin-right k�l�nveszi a jobb oldalon a v�laszt�vonalat �s a men�oszlopot. Most a #main-ban helyet kell csin�lnunk a men�oszlopnak (200 pixel). Teh�t lev�gunk 15 pixelt a jobb, �s 10 pixelt a bal oldalon. Most szint�n float attrib�tumot haszn�lunk, hogy az elem�nk j�l illeszkedjen jobbra.

k�d

#main {
width: 370px;
margin-left: 10px;
margin-right: 20px;
float: right;
}

Ha nagyobb v�laszt�vonalad van a h�tt�rk�peden a tartalom �s a men�oszlop k�z�tt, akkor t�bbet is lev�ghatsz mindk�t oldalon hogy ne ker�lj�n sz�veg r�. Itt egy �bra, hogy l�thasd, hogy hogy haszn�ljuk a marg�kat:



A navig�ci� elrendez�se

Eml�kezz�nk csak! V�zszintes navig�ci� men�t kell k�sz�ten�nk, ami a fejr�sz �s a men�oszlop k�z�tt helyezkedik el.

"Mi van a h�tt�rk�ppel? Nem lehet rajta sz�veg egy sorban" - mondhatod. Ez az ami�rt k�sz�t�nk egy �j h�tt�rk�pet, ak�rcsak a fejr�szben tett�k. Ism�t bizonyosodj meg r�la hogy passzol az eredeti h�tt�rhez.



A lista kiegyens�t�se

Ekkor a navig�ci� men�nk egy rendezett lista. Ez lehet hogy j�, de egy lista nem f�r el egy 20 pixel magas ter�leten. Egyenes�ts�k ki!

El�sz�r meg kell adnunk a #navigation magass�g�t �s h�tter�t.

k�d

#navigation {
height: 20px;
margin: 0;
text-align: center;
background: url(images/nav.gif) no-repeat top left;
}

Most egyenes�ts�k ki a list�t. Ez a lista �gy egy blokk- t�pus� elem �s most egy sorr� kell v�ltoztatnunk, hogy minden elem egym�s mellett jelenjen meg. Ennek ellen�re mi azt akarjuk, hogy a navig�ci� listak�nt tegye ezt meg, �gy egy Child Selector-t haszn�lunk:

k�d

#navigation li {
display: inline;
list-style-type: none;
}

List-style-type attrib�tum elt�nteti azt a sz�rny� k�rt a lista elemei el�l. Ez az �bra megmutatja, hogy hogyan is kellene m�r kin�znie a lapodnak. K�l�n sz�nekkel jel�ltem az elemeket:



C�msor elt�ntet�se

Ha nem akarod a c�msort megjelen�teni, k�sz�ts egy .hide oszt�lyt:

k�d

.hide {
display: none;
}

Valamint �rd be ezt a k�dot a kiv�lasztott c�msorba:

k�d

<h1 class="hide"/Heading</h1/

Ez el fogja "rejteni" a c�msort a b�ng�sz�b�l, de egy CSS n�lk�li eszk�zzel tekintve (Palm Pilot, mobiltelefon) l�that� lesz.

V�gs� l�p�sek

Ha nem megfelel� neked az oldalad igaz�t�sa, vagy szeretn�l mag�nak az oldalnak h�tteret - akkor ezt megteheted egy �j body CSS elem l�trehoz�s�val.

k�d

body {
text-align: center; /* Az �sszes elem k�z�pre */
background: url(images/bgpattern.gif) repeat;
}

Lehets�ges egy m�sik elem l�trehoz�sa, ami a magass�got 100%-ra �ll�tja az eg�sz dokumentumban, hogy megbizonyosodj: minden b�ng�sz� megfelel�en jelen�ti meg.

k�d

html/body {
height: 100%;
}

Ezzel cikk�nknek v�ge. Az oldalad sz�pen elrendezett lehet CSS-vel, amely m�k�dik egyar�nt IE6, Mozilla, Opera �s a t�bbi kompatibilis b�ng�sz� alatt.