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    

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.
  1. A felbontás növelésével a képernyő közepén egy egyre keskenyedő függőleges sávban jelenik meg.
  2. A felbontás csökkenésével a felhasználó vízszintes görgetésre kényszerül.
  3. 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*

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