A gyakorlati projektem során egy tipikus oszlop elrendezésből indulok ki. Azonban mielőtt élőben bemutatnám ezt a projektet, konkrétan meg szeretném mutatni nektek, hogyan lehet éppen oszlop elrendezéseket létrehozni. Itt fókuszban lesznek a két- és háromoszlopos elrendezések, mivel ezek még mindig alkotják a weboldalak többségének alapját.
Az abszolút webtervezés klasszikusa valószínűleg a két oszlopos elrendezés. Az általában a bal oldali ablak részén a navigáció kerül bemutatásra, míg a jobb oszlopban a tényleges tartalom található. A blogokkal összefüggésben azonban ez a viselkedés kissé megváltozott. Valójában sok blogban a navigáció vagy reklám jobbra kerül bemutatásra, míg balra a tényleges tartalom látható.
Ezeken az alkalmazásokat CSS-ben viszonylag könnyen lehet megvalósítani. Valójában a két oszlopos elrendezések a legegyszerűbb elrendezési formák.
A következő példában meg fogom mutatni egy két oszlopos elrendezést, amely abszolút százalékos értékekkel működik.
Itt a teljes példa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Elrendezés abszolút pozícionálással</div>
<div id="nav">Navigáció</div>
<div id="main">Ez a tartalomterület</div>
<div id="footer">Itt találhatók a szerzői jogi információk.</div>
</body>
</html>Így néz ki az egész a böngészőben:
Mellesleg könnyen áthelyezheti a bal oszlopot jobbra. Ehhez módosítsa az alábbi utasításokat:
• Az #nav-nál változtassa meg az left: 0 értéket right: 0-ra.
• A #main-nél az margin-left-et egyszerűen változtassa meg margin-right-ra.
Miután mentette a módosításokat, látható lesz a kívánt eredmény.
Az abszolút pozícionálás alapján megjelenített elrendezésnek azonban egy problémája van: Ha a bal oszlop tartalma bővül, áthelyeződhet a láblécben.
Ez egyszerűen annak tudható be, hogy az abszolút pozícionált elemekhez nem "szabad helyet hagyni". A problémát úgy lehet megkerülni, hogy a központi területbe megfelelő tartalmakat helyezünk el, amelyek hosszabbak a bal oldalon lévő tartalomnál.
Ezt az elrendezési formátumot csak abban az esetben használja, ha biztos benne, hogy a központi terület valóban magasabb, mint a bal (vagy jobb) oszlop.
Kétoszlopos lebegési opcióval
A feljebb említett problémát, a közölt talp átfedését a float tulajdonság használatával lehet orvosolni. Az átírt szintaxis a következőképpen néz ki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Elrendezés abszolút pozícionálással</div>
<div id="nav">Navigáció régiója</div>
<div id="main">Ez a tartalomterület</div>
<div id="footer">Itt találhatók a szerzői jogi információk.</div>
</body>
</html>Itt mindkét oszlop kapott float tulajdonságot. Ezáltal az oszlopok mostantól egymás mellett vannak elhelyezve.
A bal oszlopnak 20 százalékos szélességet jelöltek ki. Ügyeljen különösen arra, hogy a float-tal elhelyezett elem valóban mindig szélességet vár.
A tényleges tartalomterület 80 százalékos szélességet kap. Ezt a területet is float: left-re helyezték. Ezáltal ez a terület a bal oszlop mellett jelenik meg.
Azért, hogy a talpberegható mindig az ablak alsó részén - tehát az oszlopok alatt - látható legyen, a következő szintaxist használták:
#footer {
clear: both;
}
Már utaltam a lehetőségre, hogy saját osztályt határozunk meg ennek a változatnak.
Háromoszlopos float alkalmazás
A háromoszlopos elrendezés is népszerű lehet a webtervezésben. Egy tipikus felosztás itt a következőképpen néz ki:
• A bal oszlopban található a navigáció.
• A középső oszlopban az aktuális tartalom található.
• Jobbra további információk vagy reklámok jelennek meg.
Alább egy példát találsz egy rugalmas háromoszlopos elrendezésre. A szintaxis - amint azt hamarosan észre fogod venni - az előzőleg mutatott kétoszloposéhoz hasonló. Azonban most már előfordul egy right kiegészítő div terület is, amely végül a jobb ablakműsort fogja képviselni.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Elrendezés abszolút pozícionálással</div>
<div id="nav">A navigációs terület</div>
<div id="main">Ez a tartalomterület</div>
<div id="right">Ez a jobb oszlop</div>
<div id="footer">Itt vannak a szerzői jogi információk.</div>
</body>
</html>
Az új területnek 20 százalékos szélesség lett hozzárendelve. Így a felosztás a következőképpen néz ki:
• A bal és jobb oszlop egyenként 20 százalékot vesznek fel a rendelkezésre álló megjelenítési területből.
• Az középső oszlop 60 százalék szélességű.
A megjelenített szintaxisnak köszönhetően a right terület valóban jobbra lesz megjelenítve.
A szintaxis ebben a pontban azonban rugalmas. Az main területet például a következőképpen lehetne módosítani:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Ebben a beállításban a float értéke right-ra lett állítva. Ezáltal a right terület balra kerül.
Ebben a bemutatóban megfigyelhettétek, hogy milyen könnyen definiálhatók alap elrendezések float segítségével. Ez a tudás most az alapja egy weboldal felépítésének. A következő bemutatók lépésről lépésre fogják bemutatni az oldal felépítését, az alapstruktúra kialakításával kezdve.
