Blog

DIV elemek pozicionálása CSS-el

Ebben a kis oktató anyagban szeretnék segítséget adni azoknak, akik most ismerkednek az XHTML nyelv rejtelmeivel és a jövőben modern felépítésű oldalakat szeretnének készíteni, vagy csupán az alap dolgokat elsajátítani.
Az alábbi leírásban egy három oszlopos oldal szerkezetét fogjuk megvalósítani, fejléccel és lábléccel közrefogva. A felhasznált kódok mennyisége nagyon minimális – ezek működését, szerepkörét ismertetni fogom.

Lássunk is hozzá!

Első lépés: Szükséges fájlok és az alap szerkezet

Készítsünk egy üres HTML fájlt, mondjuk page.html néven, majd egy szintén üres CSS fájlt style.css névvel és tegyük őket egy könyvtárba.

Nyissuk meg a HTML fájlt kedvenc kód szerkesztőnkkel és illesszük be az alábbi kódot:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>My CSS Layout</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrapper">
	</div><!--end wrapper-->
</body>
</html>

Ez a kód egy hagyományos XHTML szerkezet, amibe most egy három oszlopos oldalt fogunk készíteni. Ügyeljünk arra, hogy az első sor mindig a !DOCTYPE-al kezdődő legyen a leendő oldalunkban, ugyanis ebben definiáljuk, hogy milyen HTML változattal is írjuk a az oldal további kódját. A hatodik sorban kerül meghívásra a CSS fájlunk, amelynek mindig a relatív elérési utat célszerű megadni, ám nem kötelező, szerepelhet teljes elérés is. Jelen esetben nem írunk elé útvonalat, mivel egy könyvtárban van a page.html fájllal. A body részben felveszünk az első DIV elemünket és ellátjuk egy azonosítóval is (ID), amely most a wrapper névre hallgat. Ezt az ID-t fogjuk használni a style.css fájlunkban, hogy különböző formázásokat adhassunk meg a DIV-nek.

Második lépés: Alap formázások

Nyissuk meg a style.css fájlt és szúrjuk be a következő kódot:

* {
	margin:0;
	padding:0;
}

body {
	margin:auto;
	background-color:#C3D9FF;
	font:12px Verdana;
	color:#000;
}

#wrapper {
	margin:20px auto;
	width:950px;
}

A width:950px; érték adja meg az oldalt magában foglaló DIV szélességét (#wrapper DIV) 950 pixelre, és a margin:20px auto; középre helyezi azt, hagyva a felső margónak 20 pixel térközt.

Most térjünk vissza a page.html fájlunkhoz és a wrapper DIV elem közé szúrjuk be az alábbi kódot:

<div id="header">
</div><!--header vege-->

<div id="sidebar1">
</div><!--sidebar1 vege-->

<div id="content">
</div><!--content vege-->

<div id="sidebar2">
</div><!--sidebar2 vege-->

<div id="footer">
</div><!--footer vege-->

Az ID a DIV elemek egyedi azonosítására szolgál az oldal szerkezetben. Az első a fejléc (#header), ami az oldal felső részén helyezkedik el, majd ezt követi a bal oldali oszlop (#sidebar1). Harmadikként jön az oldal tartalmi része (#content), ami középen fog elhelyezkedni. Ez mellé jön a jobb oldali oszlop (#sidebar2), végül a lábléc (#footer) ami teljesen az oldal aljára fog kerülni. Ahhoz, hogy az elemek ott helyezkedjenek el, ahova szeretnénk őket tenni, meg kell adni a méretüket és az elhelyezkedésükre vonatkozó utasításokat a style.css fájlban.

Harmadik lépés: A teljes elrendezés kialakítása

Térjünk vissza a style.css fájlra és illesszük be az alábbi kódot:

#header {
	width:930px;
	padding:10px;
	height:100px;
	background-color:#6192DF;
	font:30px Arial;
}

Ezzel formázzuk a fejlécünk méretét 930 pixel szélesre, hagyva 10 pixel helyközt mind a négy oldalon (fönt, lent, jobbról, balról), hogy majd a szöveg ne simuljon teljesen a szélekhez. Mivel azt szeretnénk, hogy a fejléc szélessége pont akkora legyen, mint az oldal (#wrapper) szélessége ezért 930 pixelt kell megadnunk, mivel ehhez még hozzájönnek a 10 pixeles helyközök pluszba. Tehát: 930+10(bal)+10(jobb)=950px, azaz pont akkora mint a #wrapper DIV széllessége. A height érték adja meg a fejléc magasságát, ami jelen esetben 100 pixel. A background-color:#6192DF; értékkel adunk egy lágy kék háttérszint a fejlécnek, majd a font:30px Arial; -al egy viszonylag nagyobb méretű, Arial betűkészletet határozunk meg.

#sidebar1 {
	width:180px;
	padding:10px;
	float:left;
	background-color:#8BABDF;
}

Hogy a baloldali sávot valóban balra helyezzük, a float:left; értéket kell használnunk. Ekkor a #sidebar1 DIV, a #wrapper DIV bal oldalához fog igazodni. Mivel itt is használunk 10 pixel térközt, ezért a szélességet 180 pixelre állítjuk, így fogunk kapni egy szép kerek 200 pixeles szélességet végül.

#content {
	width:530px;
	padding:10px;
	float:left;
	background-color:#FFFFFF;
}

A tartalmi rész (#content) pozíciója az iménti bal oszlop jobb oldalához lesz igazítva, ugyancsak a float:left; érték használatával. Szélessége 550 pixel, belekalkulálva a 10 pixeles térközökkel.

#sidebar2 {
	width:180px;
	padding:10px;
	float:left;
	background-color:#8BABDF;
}

Ezzel meg is megformázzuk a jobb oldali oszlopunkat is. A bal oldali oszlophoz hasonlóan, szintén 200 pixel szélesre a helyközökkel együtt és persze a balra igazítás (float:left;) értékével. Ha megfigyeljük, most mind a három oszlop, (#sidebar1, #content, #sidebar2) egymás mellé került és a szélességük pont 950 pixel, a paddig értékekkel együtt. Tehát szépen megkapjuk az oldalunk tervezett szélességét.

#footer {
	width:930px;
	padding:10px;
	height:30px;
	background-color:#6192DF;
	clear:both;
}

Végezetül definiáljuk a láblécet is (#footer), amely pontosan mint a fejlécünk, 950 pixel széles a helyekkel együtt, viszont valamivel vékonyabb annál (30 pixel).

Itt használunk egy speciális értéket: clear:both; Ez nagyon fontos, mivel ezzel tudjuk az eddigi jobbra igazításainkat lezárni és egy teljesen új körbefutási “láncot” kezdeni. Jelen esetben ez a “lánc” nem tartalmaz további szemeket, mivel a láblécünk ki fogja tölteni a teljes oldal szélességet, ellenben a középső három oszlopokkal, ahol a három oszlop felel meg egy-egy láncszemnek.

Most hogy az oldalunk felépítésével megvagyunk, vigyünk bele némi tartalmat, hogy lássuk, hogy is néz ki amit alkodtunk. A szöveget a DIV elemek közé kell elhelyeznünk, jelen esetben a header, sidebar1, content, sidebar2 és a footer azonosítóval ellátottak közé. Használjuk a már jól bevált Lorem ipsum szöveget a minta tartalomhoz:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pretium tincidunt tellus. Donec bibendum. Sed gravida eros eget odio. Vivamus nec ante nec dui suscipit faucibus. Nunc mollis imperdiet metus. Donec aliquet interdum quam. Ut tempus arcu a urna. Nullam adipiscing mi id ligula. Nam sollicitudin placerat metus. Morbi tempus consequat dui.

Ha mindent jól csináltál és elmenteted mindkét fájlt, majd a page.html-t megnyitottad a böngésződben, az alábbi kép kellet hogy fogadjon:

css float thumb

Én azt javasolom, hogy a fenti kódokat mindenki saját kezűleg írja be szerkesztőbe, ha még kezdő e téren, mivel így jobban rögzülnek a parancsok és később kevesebbet kell puskázni. Ha mégis inkább készen szeretnéd megkapni a fenti példát, akkor itt alant le is letöltheted azt.

Ha kérdésed, észrevételed, vagy akár javaslatod van a tutorialal kapcsolatba, akkor azt bátran írd le a hozzászólásokban.
Jó tanulást és kódolást mindenkinek!

Letöltés: CSS Float Minta (1.48 kB)

Hozzászólások

Szóljon hozzá!

Új generációs játékok