A lebegés az egyik kulcsfontosságú CSS koncepció. CSS alapú weboldalak ezen elve nélkül nem hozhatók létre. A "float" a "lebeg" fordításával is szépen leírható, amely lényegre törő módon jellemez. Végül is a lebegés nem más, mint hogy egy elem balra vagy jobbra rendeződik el egy másik elem mellett. (Általában az elem egy másik elem alatt lenne).
<p><img src="bild.jpg" /> Ebben a készletben 12 saját formát találsz, amelyeket plakátjaidban, háttérképeidben stb. használhatsz. A formák 18, 21 és 24 sávra, valamint különböző sugárszélességekre vannak osztva. Ezek a beállítások jó alapot nyújtanak a szép hatásokhoz a elrendezéseidben és képeidben.</p>
Egy bekezdés lett megadva itt. Ennek a bekezdésnek egy kép és szöveg található benne.
Egy pillantás az eredményre azt mutatja, hogy a kép a szövegáramban van elhelyezve.
Most jön a float tulajdonság bevetése.
img { float: left;}
Itt ismét nézzük az eredményt.
Tehát a kép lebegővé vált. Ennek eredményeként a szöveg áramlik a kép körül.
A float tulajdonsághoz hozzá lehet rendelni az left és right értékeket, hogy az elemet balra (float: left) vagy jobbra (float: right) állítsa fel "lebegését".
Próbálhatod azonnal a float: right értéket alkalmazni a képre.
Ebben az esetben három dolog történik:
• A grafika a normál áramlásból ki lesz véve.
• Az p elembe kerül, teljesen felülre.
• Amennyire lehet, a jobb oldalon jelenik meg.
Egy pillantás a korábbi eredményekre jelzi, hogy ez még nem néz ki igazán szépen. Valójában hiányoznak a kép és az azt körülvevő szöveg közötti távolságok. Változtasd meg a szintaxist a következő módon:
img {
float: left;
margin-right: 20px;
}
A képhez 20 pixel jobb margót rendeltünk. Ez az alábbi látványt eredményezi:
Itt kicsit kísérletezhetsz a margó távolságokkal.
A lebegés befejezése
Ismerjük újra át a kép példáját. Bővítem a szintaxist egy további szövegrészlettel.
<p><img src="bild.jpg" />Ebben a készletben 12 saját formát találsz, amelyeket plakátjaidban, háttérképeidben stb. használhatsz. A formák 18, 21 és 24 sávra, valamint különböző sugárszélességekre vannak osztva. Ezek a beállítások jó alapot nyújtanak a szép hatásokhoz a elrendezéseidben és képeidben.</p><p>Ebben a készletben 12 saját formát találsz, amelyeket plakátjaidban, háttérképeidben stb. használhatsz. A formák 18, 21 és 24 sávra, valamint különböző sugárszélességekre vannak osztva. Ezek a beállítások jó alapot nyújtanak a szép hatásokhoz a elrendezéseidben és képeidben.</p>
Az eredmény így néz ki:
Valójában nemcsak az első bekezdés öleli körbe a grafikát. Ugyanez igaz a második szövegrészre is. Ez egyszerűen annak köszönhető, hogy a grafika túlnyúlik az első bekezdésen. A jobb megértés érdekében adjunk hátteret a grafikát tartalmazó bekezdésnek.
Ha megnézed az eredményt, láthatod, hogy a grafika valóban túlnyúlik a bekezdésen. Ez természetesen nem mindig kívánatos ebben a formában. Ebben a pontban válik érdekessé a clear tulajdonság. Ennek segítségével lehet a "lebegést" befejezni. A clear arra kényszeríti a következő elemet, hogy ténylegesen egy lebegő elem alatt kezdődjön, és ne mellette. A clear tulajdonságnak a következő értékei vannak:
• left - befejezi a float: left-et
• right - befejezi a float: right-ot
• both - mind a float: right mind a float: left befejezi
A következő példában a második bekezdéshez hozzárendelek egy clear: left-et, hogy befejezzem a lebegést.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Ebben a készletben 12 saját formát találsz, amelyeket plakátjaidban, háttérképeidben stb. használhatsz. A formák 18, 21 és 24 sávra, valamint különböző sugárszélességekre vannak osztva. Ezek a beállítások jó alapot nyújtanak a szép hatásokhoz a elrendezéseidben és képeidben.</p>
<p style="clear:left;">Ebben a készletben 12 saját formát találsz, amelyeket plakátjaidban, háttérképeidben stb. használhatsz. A formák 18, 21 és 24 sávra, valamint különböző sugárszélességekre vannak osztva. Ezek a beállítások jó alapot nyújtanak a szép hatásokhoz a elrendezéseidben és képeidben.</p>
</body>
</html>
A megadott szintaxisnak köszönhetően a második bekezdés most valóban a kép alatt jelenik meg.
A legtöbb esetben a clear: left vagy clear: right helyett érdemes az clear: both használni. Ezért érdemes egyszerűen létrehozni egy ehhez megfelelő osztályt a stíluslapban, amelyet szükség esetén hívhatunk.
.clearing {
clear: both;
}
Ezt az osztályt minden alkalommal használhatjátok, amikor egy elem lebegését be szeretnétek fejezni.
<p class="clearing">Tartalom ...</p>
Arra jó a lebegés
Nyilvánvalóan a lebegés nemcsak a szövegáramlatot szolgálja a képekkel kapcsolatban. Valójában ez a CSS-alapú weboldalak alapjául szolgál. Köszönhetően a lebegésnek például többszálú elrendezések könnyen megvalósíthatók. Nézd meg az alábbi példát:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Főoldal</li>
<li>Kapcsolat</li>
<li>Impresszum</li>
</ul>
</div>
<div id="inhalt">
Itt van az oldal tartalma.
</div>
</body>
</html>Egy kétszálú elrendezés épül fel itt. A különleges az, hogy az oszlopok egymás mellett helyezkednek el.
És éppen ezt az egymás melletti állást a lebegési elv valósítja meg. A weboldalak felépítésének részletes információi a lebegés alapján a sorozat további részeiben megtalálhatók.
