logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Abszolút poícionálású 2 oszlopos honlap



Kétoszlopos abszolút pozicionálású honlap esetén a bal oldali oszlop szélességét kell csupán megadni. A jobboldali automatikusan kitölti a rendelkezésre álló területet. Természetesen a tartalomterület és a fejléc, valamint menüsor szélességének megadásával csökkenthetjük a megjelenítésre használt területet.

Az elrendezés előnye az úsztatással szemben, hogy a bal oldali kevésbé fontos tartalom töltődik be utoljára.

Vegyük észre, hogy a HTML kódban a bal oldali menü és a tartalom kódja felcserélődött.

Változó méretű abszolút pozicionálású div jobb oldalára nem kerülhet, mert a változó méretű div a hosszú tartalom esetén a következő div alá kerül. A harmadik div-et a másodikban elhelyezett jobbra úsztatott elemmel lehet megvalósítani.

Abszolút pozicionálásnál a lábléc elhelyezéséhez (második példa) fix pozicionálást kell használni. Ekkor viszont ügyeljünk arra, hogy a tartalomterület alsó margója (ha kevés a tartalom, akkor a baloldali oszlopé is) magasabb legyen a lábléc magasságánál.

1. példa:

Forráskód



<style type="text/css">  
  • { margin:0; padding:0;}
#tarolo {position:relative; display:block; min-height:100%; width: 100%; } #fejlec {position:absolute; display:block; top: 0; left:0; height:50px; width: 100%; } #menu {position:absolute; display:block; top: 50px; left:0; height:30px; width: 100%; text-align:center; } #balmenu {position:absolute; display:block; top: 80px; left:0; height:290px; width:100px; } #tartalom {position:absolute; display:block; top:80px; left:100px;} </style> ... <body> <div id="tarolo" > <header id="fejlec"> Webáruház neve ...</header> <nav id="menu">Termkek | Vásárlás... </nav> <div id="tartalom"><p> Az oldal tartalma ... szöveg </p> </div> <div id="balmenu"> <br> <b>Kínálat</b> .... </div> </div> <body>

Eredmény*

2. példa:

Forráskód



<style type="text/css">  
...
#lablec {position:fixed; bottom:0; display:block; 
          height:30px; width: 100%;}
#tartalom {... padding-bottom:40px; } 
...
</style>   
<body>
....
<div id="lablec"> Céginfó, jogi információk</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ő: css_elrendezes_ketoszlopos_abszolut_fix_02.html

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.