A képen egy szokásos oldal elrendezés (layout) látható:
Oldal elrendezés kialakítása <div> tag-ekkel
A zölddel jelölt body elemünk a legkülső, ami a kijelzőn megjelenik, és kitölti azt. Ezen belül minden téglalapnak egy-egy <div> elem felel meg.
A pirossal jelölt #wrapper azonosítójú elem az oldal elrendezés szélességének megadására és a középre igazításra szolgál, valós tartalmat közvetlenül nem jelenít meg.
A kékkel jelölt elemek tartalmazzák az oldal tartalmi elemeit, képeket, szövegeket, stb…
Az oldal középső része két oszlopra van osztva egy jobbra és egy balra úsztatott (float) elemmel. Az oszlopok magassága általában nem egyforma, azt a bennük lévő tartalom határozza meg.
A helyes megjelenítés érdekében az úsztatott elemek után szükséges egy “tisztázó” elem elhelyezése (.clear osztállyal ellátva).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="HTML Layout Example">
<meta name="keywords" content="HTML5, CSS3">
<meta name="author" content="ZeoN">
<title>Title...</title>
</head>
<body>
<div id="wrapper">
<div id="header"> #header <h1>Az oldal címe</h1>
</div>
<div id="navigation"> #navigation <p>Home | Contact | About</p>
</div>
<div id="content"> #content <p>Lorem ipsum dolor sit amet, et nemore deleniti sea, sale propriae eum ne, vim at
detracto pericula. Et fuisset theophrastus usu, summo mnesarchum at mei. Est in iudico bonorum convenire. Te mea
ipsum exerci vituperata, sit et hinc facer assentior. Vix id laudem regione urbanitas, falli suavitate vel et,
wisi mazim dolorem id per. Te vel noster blandit.</p>
<p>Iisque eloquentiam concludaturque nec cu, menandri honestatis delicatissimi ea mel. Vis ex docendi fastidii
hendrerit. Deleniti mandamus efficiantur ex nam, feugiat accumsan tincidunt an cum, alterum deseruisse
vituperatoribus his in. Ex qui probatus concludaturque, suas officiis atomorum his ad, ei movet graecis mei.
Ipsum lorem molestie no eum. Mel ea summo graeci, qui et quaeque principes concludaturque.</p>
<p>Ut ius quodsi definiebas, mel cu facer cetero. Elitr mentitum ea eum, offendit euripidis vim te. Habeo utinam
animal at quo, mel nullam adipiscing an. Ei expetendis efficiantur vis.</p>
</div>
<div id="sidebar"> #sidebar </div>
<div class="clear"></div>
<div id="footer">
<p>#footer</p>
</div>
</div>
</body>
</html>
A HTML-ben lehetőleg csak a tartalmat és azok határát kijelölő szakasz elemeket (<div>) adjuk meg. Kinézetről egyelőre semmit nem mondtunk, ennek megfelelően az oldal így fog kinézni:
Formázás
Csatoljuk hozzá az oldalhoz a kinézetet leíró .css fájlt:
<head> ... <link rel="stylesheet" type="text/css" href="styles.css"> </head>
Majd készítsük el az eredeti ábrának megfelelő kinézetet:
Először a fő elemekhez tartozó szelektorokat:
body {}
#wrapper {}
#header {}
#navigation {}
#content #sidebar {}
#footer {}
.clear {}
Majd sorban ezek tartalmát:
A body elemen megadhatjuk pl. az
- oldal háttérszínét:
background - az alapértelemezett szöveg igazítást:
text-align - betűtípust:
font-family - betűszínt:
color
body {
background: #eee;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
}
A #wrapper azonosítójú szakasszal állítjuk az oldal
- szélességét:
width - középre igazítást:
margin: ... auto;
Továbbá be van állítva rá
- szegély:
border - szegély lekerekítés:
border-radius - belső margó:
padding
#wrapper {
width: 700px;
background: #ddd;
margin: 20px auto;
border: 1px solid #999;
border-radius: 5px;
padding: 10px;
}
Ezt kapjuk:
A #header részen beállítjuk a
- magasságot:
height - háttérszínt
- szegélyt
- belső margót:
padding
#header {
height: 160px;
background: #ccc;
border: 1px solid #999;
padding: 10px;
}
A #navigation résznél a háttérszín, szegély, és a belső margó hasonló az előzőekhez. A külső margó érdekesebb, mivel itt most felső és alsó margót meg kell adnunk, hogy ne érjen hozzá a #header -höz és a #content-hez, viszont a jobb és bal oldalon nem kell külső margó, mert azt már a #wrapper belső margója megadja: margin: 10px 0;
#navigation {
background: #ccc;
margin: 10px 0;
border: 1px solid #999;
padding: 10px;
}Itt tartunk:
Kéthasábos elrendezés kialakítása
A legérdekesebb a kéthasábos rész kialakítása. A #wrapper szélessége 700 pixel volt ebből kell gazdálkodni. Tegyük fel, hogy 500 pixel szélesre akarjuk a tartalmi részt, a maradék helyre pedig az oldalsávot. Mennyi lesz ennek a szélessége? Sajnos nem 200 pixel (700-500)…
A dobozmodell szerint a CSS-ben a width-el csak a tartalom szélességét adjuk meg, amihez még hozzájön a belső margó (padding), szegély (border) és a külső margó (margin) mérete.
Tehát egy elem teljes szélessége = width + padding + border + margin.
Ha tartani akarjuk magunkat az eddigi 10 pixeles hézagokhoz, 1 pixeles szegélyekhez, akkor az oldalsávnak 146px marad. Hmm… miért?
A jobb oszlop teljes szélessége: width = 500px + jobb-bal padding 2 * 10px + jobb-bal szegély 2 * 1px = 522px
A két oszlop között szintén 10px hézagot szeretnénk hagyni. Így az oldalsávnak 700px – 522px – 10px hézag = 168px marad. Mivel a width az elem belső szélességét adja meg, ebből még le kell vonni az oldalsáv szegélyét és belső margóját: 168 – 21 – 210 = 146px.
Ahhoz, hogy az oszlopok egymás mellé kerüljenek, úsztatni (float) kell őket:
#content {
width: 500px;
float: left;
background: #ccc;
border: 1px solid #999;
padding: 10px;
}
#sidebar {
width: 146px;
float: right;
background: #ccc;
border: 1px solid #999;
padding: 10px;
}Eredmény:
Amint képen pirossal kiemelve látható, az elemek úsztatásának van egy kellemetlen mellékhatása is. Mivel az oszlopok úsztatva vannak és magasságuk sem feltétlenül egyforma (a benne lévő tartalom határozza meg), ezért sajnos a #footer elem a képen látható módon felcsúszik.
A problémát úgy lehet elkerülni, hogy az úsztatott elemek után egy “tisztázó” szakaszt (<div class="clear"></div>) kell beiktatni, aminek tartalma nincs, szerepe csak az oszlopok “kiegyengetése”…:
...
<div id="sidebar">
#sidebar
</div>
<div class="clear"></div>
<div id="footer">
#footer
</div>
...
A .clear osztályhoz tartozó CSS kód, ami a feladatot elvégzi:
.clear {
clear: both;
}Ezzel a #footer a helyére kerül, amit szintén megformázhatunk. Itt már csak arra kell figyelni, hogy a #footer elemünknek csak felső margó kell, mivel bal, jobb és alsó oldalon szükséges 10px távolságot a #wrapper elem belső margója már megadja, így ezeket 0-ra kell állítani: margin: 10px 0 0 0;
Tehát:
#footer {
background: #ccc;
margin: 10px 0 0 0;
border: 1px solid #999;
padding: 10px;
}Végeredmény:
A példa megtekinthető: itt.
1 comment for “Egyszerű oldal elrendezés kialakítása”