Kétoszlopos HTML elrendezés

A weboldalunk fő szerkezeti elemei:

Fejléc: Rendszerint az oldal vagy cég logóját és nevét tartalmazza. Esetleg reklámot. Az oldal bal felső sarkának kiemelt szerepe van, hiszen a felhasználók rendszerint ott kezdik az oldal olvasását.
Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye.
Menüsáv: Itt tehetjük elérhetővé a webhely belső oldalait.
Tartalom: A konkrét oldalon közreadott egyedi tartalom.
Lábléc: Céginfó, jogi információk, az oldal készítőjének linkje a leggyakoribb elemei.

A fenti elemeket egy tároló elemben helyezzük el. A tároló elem szélességének és magasságának megadásával meghatározzuk az oldal megjelenítésére használt terület méretét. A fő szerkezeti elemeknél, így már elegendő csupán a magasságot meghatározni.

A menüsáv és a Tartalom most egymás mellé kerül. Ezt többféle képen elérhetjük. Példánknál a menüsávnál float:left; stílusdefiníció használva érjük el, hogy a következő tárolóelem esetünkben a tartalom vele egy sorba kerüljön.

A style jellemzőben használható stílusdefiníciókról a CSS3 fejezetben részletesen lesz szó.

Példa:

Forráskód


<body>
  <div id="tarolo" style="height:400px;width:400px;">        
    <div id="fejlec" style="background-color:#98FB98;height:50px;"> 
       Webáruház neve és lógója 
    </div>
    <div id="menu" style="background-color:#6B8E23;height:30px;text-align:center;"> 
       Termkek | Vásárlás | Kapcsolatok 
    </div>
    <div id="balmenu" style="background-color:#2E8B57;height:260px;width:100px;float:left;">  
        <b>Kínálat</b><br>-PC<br>-Laptop<br>-Egér 
    </div>  
    <div id="tartalom" style="background-color:#98FB98;height:260px;"> 
        Az olda tarlama
    </div>
    <div id="lablec" style="background-color:#6B8E23;height:30px;text-align:center;"> 
        Céginfó, jogi információk
    </div>
  </div>  
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_div3.html