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