Plutví je jedním z klíčových konceptů CSS. Bez pochopení tohoto principu nelze vytvářet webové stránky na základě CSS. Z plovoucím prvkem se dá v podstatě popsat jako plavání, což vystihuje věc do puntíku. V podstatě to znamená, že prvek se usadí vlevo nebo vpravo vedle jiného prvku (obvykle by byl prvek pod jiným prvkem).
První příklad by měl tento aspekt objasnit.
<p><img src="bild.jpg" /> V tomto balení jsou 12 vlastních tvarů, které můžete použít ve svých letácích, pozadích atd. Tvary se dělí na 18, 21 a 24 pruhů a různé šířky paprsků. Tato přednastavení jsou dobrým základem pro pěkné efekty ve vašich rozvrženích a obrázcích.</p>
Zde byl definován odstavec. Uvnitř tohoto odstavce jsou umístěny obrázek a běžný text.
Pohled na výsledek ukazuje, že obrázek je ve skutečnosti v textovém proudu.
Nyní přichází do hry vlastnost float.
img { float: left;}
Zde je zase pohled na výsledek.
Takže tento obrázek byl plovoucí. Text kolem něj nyní proudí.
Vlastnosti float můžete přiřadit hodnoty left a right, abyste prvek nechali "plovat" vlevo (float: left) nebo vpravo (float: right). Můžete také obrázku přidělit hned vlastnost float: right.
V tomto případě se stane tři věci:
• Grafika je vyjmuta z normálního proudu.
• Pohybuje se do p-elementu úplně nahoru.
• Zobrazuje se co nejvíce vpravo.
Pohled na dosavadní výsledky ukazuje, že to zatím nevypadá moc pěkně. Ve skutečnosti chybí mezery mezi obrázkem a proudícím textem. Upravte syntax následujícím způsobem:
img {
float: left;
margin-right: 20px;
}
Obrázku byl přidělen pravý okraj 20 pixelů. Výsledek vypadá následovně:
Jen trochu si zahrajte s mezery.
Ukončení plovoucího stavu
Zpět k příkladu s obrázkem. Rozšířím syntaxi o další textový odstavec.
<p><img src="bild.jpg" />V tomto balení jsou 12 vlastních tvarů, které můžete použít ve svých letácích, pozadích atd. Tvary se dělí na 18, 21 a 24 pruhů a různé šířky paprsků. Tato přednastavení jsou dobrým základem pro pěkné efekty ve vašich rozvrženích a obrázcích.</p><p>V tomto balení jsou 12 vlastních tvarů, které můžete použít ve svých letácích, pozadích atd. Tvary se dělí na 18, 21 a 24 pruhů a různé šířky paprsků. Tato přednastavení jsou dobrým základem pro pěkné efekty ve vašich rozvrženích a obrázcích.</p>
Výsledek vypadá následovně:
Skutečně obklopuje nejen první odstavec grafiku. Totéž platí i pro druhý textový odstavec. Důvodem je jednoduše fakt, že grafika přesahuje nad první odstavec dolů. Pro lepší pochopení přiřadím odstavci, ve kterém je grafika, pozadí určité barvy.
Pokud se podíváte na výsledek, je zřejmé, že grafika skutečně přesahuje dolů z odstavce. Tato situace není vždy žádoucí. V tomto bodě se stává zajímavá vlastnost clear. Pomocí této vlastnosti lze ukončit plavání. clear uvádí následující hodnoty:
• left – ukončí float: left
• right – ukončí float: right
• both – ukončí jak float: right tak i float: left
V následujícím příkladu přiřazuji druhému odstavci vlastnost clear: left k ukončení plutví.
<!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" />V tomto balení jsou 12 vlastních tvarů, které můžete použít ve svých letácích, pozadích atd. Tvary se dělí na 18, 21 a 24 pruhů a různé šířky paprsků. Tato přednastavení jsou dobrým základem pro pěkné efekty ve vašich rozvrženích a obrázcích.</p>
<p style="clear:left;">V tomto balení jsou 12 vlastních tvarů, které můžete použít ve svých letácích, pozadích atd. Tvary se dělí na 18, 21 a 24 pruhů a různé šířky paprsků. Tato přednastavení jsou dobrým základem pro pěkné efekty ve vašich rozvrženích a obrázcích.</p>
</body>
</html>
Syntaxe ukázána vede k tomu, že druhý odstavec je nyní skutečně zobrazen pod obrázkem.
Většinou můžete místo clear: left nebo clear: right použít clear: both. Proto se doporučuje vytvořit příslušnou třídu ve svém stylu, kterou pak při potřebě zavoláte.
.clearing {
clear: both;
}
Tuto třídu můžete vždy použít, pokud chcete ukončit plovoucí prvky.
<p class="clearing">Obsah ...</p>
K čemu slouží floating
Plovoucí prvky nejsou samozřejmě zapotřebí pouze pro tok textu ve spojení s obrázky. Ve skutečnosti tvoří základní koncept webových stránek založených na CSS. Díky plovoucím prvkům lze například velmi jednoduše vytvářet vícesloupcové rozložení. Podívejte se na následující příklad:
<!DOCTYPE html>
<html lang="cs">
<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>Hlavní stránka</li>
<li>Kontakt</li>
<li>Impresum</li>
</ul>
</div>
<div id="inhalt">
Zde je obsah stránky.
</div>
</body>
</html>Zde je vytvořeno dvousloupcové rozložení. Zvláštností je, že sloupce jsou vedle sebe postaveny.
A právě toto vedle sebe postavení je realizováno prostřednictvím koncepce floatingu. Podrobné informace o vytváření webových stránek na základě floatingu budou následovat v dalším průběhu tohoto řetězce.
