4. lecke - Dobozokból oldalak
A leckéből megtanulhatjuk, hogy a már kiválóan kezelt dobozokból hogyan lehet különféle elrendezésű oldalakat összerakni.
A lecke vázlatát tartalmazó prezentáció innen letölthető (ppt, ~1,5 MB)
4.1. Egyhasábos szerkezet
Bevezetés gyanánt egy egyszerű egyhasábos elrendezést készítünk el. (Ilyet!)
Első lépés ismét a HTML kód megírása, ahol 4 dobozt helyeztünk el. A "container" (tároló) nevű doboz tartalmazza a három fő DIV-et.
<div id="header">
<p>Tartalom... </p>
</div>
<div id="content">
<div class="text_box">
<p>Tartalom... </p>
</div>
</div>
<div id="footer">
<p>Tartalom... </p>
</div>
</div>
Lássuk ezek után a stíluslap egyes részeit.
A "body" rész egyetlen újdonsága az utolsó sorban látható: az "y" irányban ismétlődő háttérkép használata.
margin: 0;
padding: 0;
font: normal 11px verdana, tahoma, arial, sans-serif;
color: #505050;
background: url(hatter1.png) repeat-y center top;
}
A "container" CSS kódjának egyik érdekessége, hogy azt a postion: relative beállítással középre igazítottuk. A background: transparent (átlátszó) tulajdonságra azért van szükség, hogy az előbb megadott háttérkép látszódjék.
width: 550px;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
background: transparent;
}
A "header" (fejléc) függőleges méretét height: 80px beállítással korlátoztuk. Érdemes megfigyelni az overflow: hidden (~ túlcsordulás: rejtve) tulajdonságot: ennek következtében az esetleg túl hosszúra sikeredő szöveg nem lóg ki a dobozból.
width: 550px;
height: 80px;
position: relative;
text-align: center;
background: transparent;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
A tartalmat magába foglaló "content" doboz attól lesz rugalmas méretű, hogy nem adtuk meg a magasságát. A margin-bottom: 20px; beállítás a láblécet tartja a kívánt távolságban.
width: 550px;
text-align: left;
background: transparent;
padding: 0;
margin-bottom: 20px;
}
A "footer" (lábléc) fölé a border-top: 1px dotted #cccccc; beállítással húztunk egy pontozott vonalat.
width: 550px;
height: 50px;
background: transparent;
border-top: 1px dotted #cccccc;
padding-top: 2px;
}
Még egy apróság: a bekezdések első sorát a p:first-line{font-weight: bolder;} beállítás használatával emeltük ki.
4.2. Kéthasábos szerkezet
Második gyakorló feladatként a fentiekben elkészített oldalt alakítjuk át. A cél: a bal oldalon jelenjen meg egy menü elhelyezésére alkalmas oszlop. Valahogy így!
A HTML kód csak annyiban változik, hogy az oldalmenüt tartalmazó "left_side" azonosítójú doboz kódját beillesztjük a "content" alá.
<div id="content">
<div class="text_box">
<p>Tartalom... </p>
</div>
</div>
<div id="left_side">
<p>Tartalom... </p>
</div>
...
Természetesen ahhoz, hogy ez az új rész a tartalom mellé (nem pedig alá, amit a HTML kód eredményezne) kerüljön, az egyes részek stílusát be kell állítanunk.
A "content" CSS kódjában a szélességet le kell csökkentenünk, hogy legyen mellette hely az oldalsó doboznak. De a lényeg a float: right; beállításban van: hatására a jobbra igazított tartalom körül "folyósan" (~float) jelenik meg majd a menü.
width: 400px;
text-align: left;
padding: 0;
margin-bottom: 20px;
float: right;
}
Az új, "left_side" nevű doboz tulajdonságai nem szorulnak magyarázatra:
width: 150px;
text-align: left;
padding: 0;
margin-bottom: 20px;
border-right: 2px solid #DF0404;
}
Annak érdekében, hogy a lábléc (footer) mindkét fölötte levő doboz alá kerüljön, alkalmazzuk a clear: both; beállítást: így a doboz minden "lebegő" elem alá fog kerülni.
width: 550px;
height: 50px;
border-top: 1px dotted #cccccc;
padding-top: 2px;
clear: both;
}
Ismét egy apróság: a bekezdések első karakterét a
p:first-letter{background-color: #DF0404; padding: 1px; color: #FFFFFF;}
beállítás használatával emeltük ki.
Feladatok
4.1. feladat
Kapjunk vérszemet: kéthasábos oldalunkat alakítsuk át három hasábossá! A két menü-hasáb a tartalom jobb és bal oldalán helyezkedjen el, a fejléc és lábléc maradjon. Valahogy így!
