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

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

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