HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Kétoszlopos HTML5 elrendezés



Példánkban szereplő kód csupán annyiban tér el a kétoszlopos HTML elrendezésnél megismerttől, hogy a HTML5-ben bevezetett új elemeket használjuk a szerkezeti elemek megvalósításához.

A HTML5 weboldalunk fő szerkezeti elemei:

  1. 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.
  2. Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye.
  3. Menüsáv: Itt tehetjük elérhetővé a webhely belső oldalait.
  4. Tartalom: A konkrét oldalon közreadott egyedi tartalom.
  5. 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;">        
    <header id="fejlec" style="background-color:#98FB98;height:50px;"> 
       Webáruház neve és lógója 
    </header>
    <nav id="menu" style="background-color:#6B8E23;height:30px;text-align:center;"> 
       Termkek | Vásárlás | Kapcsolatok 
    </nav>
    <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>
    <footer id="lablec" style="background-color:#6B8E23;height:30px;text-align:center;"> 
        Céginfó, jogi információk
    </footer>
  </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_div4.html