Fix kétoszlopos szerkezet

Egy fix szélességű weboldal csak szűk felbontástartományban nyújt kielégítő felhasználói élményt.

A felbontás növelésével a képernyő közepén egy egyre keskenyedő függőleges sávban jelenik meg.
A felbontás csökkenésével a felhasználó vízszintes görgetésre kényszerül.
A mobil böngészők a fix szélességű oldalakat rendszerint kicsinyítve jelenítik meg.

Az itt bemutatott HTML kód azonos a Folyékony kétoszlopos és a Hibrid kétoszlopos elrendezések kódjával. Csupán CSS segítségével fogjuk megjelenítését módosítani, annak érdekében, hogy minden felbontásnál megfelelő felhasználói élményt nyújtson.

1. Példa:

Forráskód

...
<style type="text/css"> 
...
  /* Elrendezés */
  #tarolo {width:300px; margin-left: auto; margin-right: auto;}
  #fejlec {height:20px;}
  #menu {height:14px;text-align:center;}
  #tartalom {height:200px; margin-left:60px; width:240px;} 
  #balmenu {height:200px;  width:60px; float:left;}
  #lablec {clear:both; height:30px;text-align:center;}
</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*

* 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_fix_webaruhaz.html