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    

Úsztatott, állandó méretű weboldal



Csupán úsztatással ritkán alakítjuk ki egy-egy weboldal szerkezetét. Kétségtelenül egyszerű megoldás, és ezért is használtuk a HTML5 weboldalak készítése fejezetben.

Az első példa a korábban megismert állandó méretű elrendezést mutatja. A felhasználó mindig ugyanakkorában látja az oldalt függetlenül a képernyőn rendelkezésre álló helytől. Kis felbontás esetén a felhasználó szorgalmasan görgethet. Nagy felbontás esetén pedig a képernyő csupán egy részét használjuk.

Minden elem margóinak és szegélyeinek vastagsága: 0. Ha nem így lenne, akkor a magasságok szélességek méreteinek meghatározásakor ezt figyelembe kellene venni.

A második példa annyiban különbözik, hogy a baloldali menü mérete: auto. Látszik, hogy a szöveges tartalom ekkor beúszik a menü alá.

Az áttekinthetőség érdekében a példakódból kimaradt a színek, margók (0px) és szegélyek (0px) beállítása.

1. példa:

Forráskód



<style type="text/css">  
  body {height:400px;width:600px; 
        border: 1px solid #ff2210;} 
  #tarolo {height:400px;width:600px; }
  #fejlec {height:50px; }
  #menu {height:30px;text-align:center; }
  #balmenu {height:290px;  width:100px; float:left;}
  #tartalom {height:290px; } 
  #lablec {height:30px;text-align:center;}
</style>   
...
<body>
  <div id="tarolo" >        
     <header id="fejlec"> Webáruház neve ...</header>
     <nav id="menu">Termkek | Vásárlás... </nav>
     <div id="balmenu"> 
       <br> <b>Kínálat</b> ....
     </div>  
     <div id="tartalom"><p> Az oldal tartalma ...
         szöveg  </p>     
     </div>
     <footer id="lablec"> Céginfó, jogi ...</footer>
   </div>
<body>  

Eredmény*

2. példa:

Forráskód



<style type="text/css">  
...
  #balmenu { width:100px; float:left;}
...
</style>   
 

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