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    

Úsztatás (float) tulajdonság



A float ( úsztatás ) tulajdonság lehetővé teszi, hogy egy elemet az azt tartalmazó tárolóelem (szülő elem) jobb vagy bal széléhez igazítsunk ( úsztassunk ). Az úsztatott elem mellé további úsztatott elemek kerülhetnek és a szöveges tartalom is szabadon körülfolyhatja.

A float tulajdonság lehetséges értékei:
left = Az elem balra úszik a további tartalom jobb oldalára kerül.
right = Az elem jobbra úszik a további tartalom bal oldalára kerül.
none = Az elem nincs úsztatva és nem lehet mellette szöveg.
inherit = Az érték a szülő elemtől örökölődik.
(alapértelmezett értéke: none)


Az float tulajdonságot használhatjuk képek, táblázatok, tároló elemek oldalra úsztatására, az oldal szerkezetének kialakítására.

A háttérkép ismétlődése módjának megadása:

kijelölő
{
float
:
kulcsszó;
}



1. Példa:

Forráskód



<body>    
     Egy kép alapértelmezetten úgy jelenik meg
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     mintha egy nagy betű lenne.   
</body>
 

Eredmény*

2. Példa:

Forráskód



<style> 
    .balra {float:left;  width: 40px; height: 40px;}  
</style	> 
….
<body>    
     A balra úsztatott képet jobbról veszi körbe
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     a szöveg. A margók beállításával növelhetjük 
     a szöveg és kép távolságát.   
</body>
 

Eredmény*

3. Példa:

Forráskód



<style> 
    .jobbra {float:right; width: 40px; height: 40px;}  
</style	> 
….
<body>    
     A jobbra úsztatott képet balról veszi körbe
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     a szöveg. A margók beállításával növelhetjük 
     a szöveg és kép távolságát.   
</body>
 

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