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    

Folyékony kétoszlopos oldal


Folyékony oldalelrendezésnél az oszlopszélesség beállítására fix értékek helyett a befoglaló terület %-os értékét szokás megadni.

Esetünkben helyi menü a tároló div szélességének 20%-át, a tartalom pedig 80%-át foglalja el. A tartalom baloldalán 20%-os margó biztosítósítja a menüoszlop számára szükséges szabad területet.

A tartalom így mindig teljes mértékben kitölti a rendelkezésre álló területet. A helyi menü esetén azonban gyakran zavaró a szélesség változása.

1. Példa:

Forráskód


...
<style type="text/css"> 
...
  /* Változik a Fix elrendezéshez képest */
  #tarolo   {width:100%;}
  #tartalom {margin-left:20%; width:80%;} 
  #balmenu  {width:20%; float:left; }
</style>   ....
<body>
   <div id="tarolo">        
     <header id="fejlec"> Webáruház neve és lógója </header>
     <nav id="menu">Termékek | Vásárlás | Kapcsolatok </nav>
     <div id="balmenu"> 
       <br>
       <b>Kínálat</b>
       <ul> 
         <li>PC</li>
         <li>Laptop</li>     
         <li>Táblagép</li>     
       </ul>
     </div>  
     <div id="tartalom">
       <p> Az oldal tartalma ... </p>     
     </div>
     <footer id="lablec"> Céginfó, jogi info...</footer>
   </div>     
</body> 

Eredmény*

Eredmény*

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ő: ketoszlopos_folyekony_webaruhaz.html