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

Úsztatott blokkok használata


Az úsztatott (float) elemek használatának előnye:

  • Népszerű és gyakran használt megoldás.
  • Az úsztatott blokkokat követő szöveggel kitölthető a fennmaradó terület.
  • A jobbra és balra történő úsztatás kombinálásával összetett szerkezetek hozhatók létre.

Az úsztatott (float) elemek használatának hátránya:

  • Nem használhatók vertical-align és a text-align tulajdonságok. Igazítás csak a blokk méretének illetve margóinak méretének állításával lehetséges.
  • Az egy sorban egymást követő blokkoknak mindig felső éle esik egybe.
  • Ha a blokkok magassága különböző, akkor a magasabb elem megakaszthatja az alatta lévő sorban található blokkok megjelenítését. Ekkor nem a sor elején kezdődik a blokkok megjelenítése, hanem a legmagasabb elem után.

1. Példa:

Forráskód


...
<style type="text/css"> 
...
  /* Az információ blokkok beállítása */
   #tartalom .InfoBlokk {
     display:block; float:left; 
     width:80px; 
     background-color:#033;color:#fff; 
     margin:2px; padding:5px; 
     vertical-align:top;
   }
</style>   ....
<body>
   <div id="tarolo"> 
     <input type='checkbox' name='chmenu' id='chmenu' value='chmenu' >       
     <header id="fejlec"> Webáruház neve és lógója </header>
     <nav id="menu">
        <label for='chmenu'  id='MenuLabel' >Menü</label>
        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 class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       Az oldal további tartalma ...  szöveg ...<
       <p> szöveg szöveg szöveg szöveg szöveg szöveg...  </p>
     </div>
     <footer id="lablec"> Céginfó, jogi információk</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ő: float_webaruhaz.html


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