Kétoszlopos oldalelrendezés

No, akkor jak2 kedvéért elmondom, hogyan lehet megcsinálni egy kétoszlopos oldalelrendezést. Tudom, hogy máshogy is meg lehet csinálni, és azt is, hogy nem vagyok én a világ legjobb designere, hogy “osszam az észt” tehát ilyen jellegű megjegyzések kíméljenek.

Ugye, azt szeretnénk, hogy legyen egy fejlécünk, alatta a tartalom, két oszloppal, majd alatta a lábléc. Ehhez ugye kell az alap HTML, ami valahogy így fest:

!lt;div id="fejlec"!gt;!lt;/div!gt;

!lt;div id="tartalom"!gt;
!lt;div id="bal"!gt;!lt;/div!gt;
!lt;div id="right"!gt;!lt;/div!gt;
!lt;/div!gt;

!lt;div id="lablec"!gt;!lt;/div!gt;

Na, és akkor most jön a CSS része a dolognak. Nem kell ide táblázat, meg lehet ezt szépen is oldani:


div#tartalom{
padding: 0px;
margin: 0px;
width: 600px;
}
div#bal{
left: 0px;
top: 0px;
width: 400px;
float: right;
overflow: hidden;
}
div#right{
padding: 0px;
margin: 0px;
width: 199px;
float: left;
overflow: hidden;
}

Ez persze nagyon az alap, ezt úgy változtatjuk ahogyan szeretnénk. Nézzünk néhány apróságot.

A float, azaz lebegés azt adja meg, hogy balra, avagy jobbra “ússzon” az a bizonyos div. Ezt fontos megadni, máskulönben egymás alá kerül a két div.

Az overflow: hidden; tulajdonság azt eredményezi, hogy ha valami nagyobb a diven belül, mint maga a div (pl. egy kép) akkor a divünk ne essen szét, hanem egyszerűen csípje le azt az óriást.

Most így nagyjából ennyi. Aztán még mutatok egy trükköt a pontozott aláhúzásra, hogy minden böngészőnél pontozott legyen az az aláhúzás.

« »

mefiblog logó

Írja és rendezi Mefi, avagy Nádai Gábor © 2005-2024

A blogot büszkén pörgeti a WordPress motorja, Anders Norén sablonjának átbuherált változatával.