Plávanie je jedným z kľúčových CSS konceptov. Bez pochopenia tohto princípu nie je možné vytvoriť webové stránky na základe CSS. Plávanie sa dá v preklade veľmi pekne vyjadriť ako "float", čo presne vystihuje podstatu. V podstate to znamená, že prvok sa zaradí doľava alebo doprava vedľa iného prvku. (V bežnom prípade by prvok stál pod iným prvkom).
Prvý príklad by mal tento aspekt objasniť.
<p><img src="obrazok.jpg" /> V tejto sade nájdete 12 vlastných tvarov, ktoré môžete použiť vo svojich letákoch, pozadia atď. Tvary sú rozdelené do 18, 21 a 24 prúžkov a rôznych šírok lúčov. Tieto predvoľby sú dobrým základom pre krásne efekty vo vašich rozloženiach a obrázkoch.</p>
Tu bola definovaná odstavec. V tomto odstavci sa nachádza obrázok a bežný text.
Na pohľad na výsledok je vidieť, že obrázok je zaradený do textu.
Teraz príde do hry vlastnosť float.
img { float: left;}
Opäť si pozrime výsledok.
Takže obrázok bol "zafloatovaný". Text preto obteká obrázok.
Vlastnosti float sa dá priradiť hodnoty left a right, aby sa prvok "zafloatoval" doľava (float: left) alebo doprava (float: right).
Skúste aplikovať float: right priamo na obrázok.
V tomto prípade sa deje tri veci:
• Grafika je vyňatá z bežného toku.
• Posúva sa v rámci elementu p úplne nahor.
• Zobrazuje sa čo najviac vpravo.
Pohľad na súčasné výsledky jasne ukazuje, že to ešte nie je úplne pekné. Skutočne chýbajú odsadenia medzi obrázkom a obtekajúcim textom. Upravte syntax nasledovne:
img {
float: left;
margin-right: 20px;
}
Obrázku bola priradená pravá hrana o šírke 20 pixelov. Toto je výsledný pohľad:
Skúste si jednoducho trochu pohrať s medzernými odsadeniami.
Ukončenie floatu
Ešte raz späť k príkladu s obrázkom. Rozšírim syntax o ďalší textový odsek.
<p><img src="obrazok.jpg" />V tejto sade nájdete 12 vlastných tvarov, ktoré môžete použiť vo svojich letákoch, pozadia atď. Tvary sa delia na 18, 21 a 24 prúžkov a rôzne šírky lúčov. Tieto predvoľby sú dobrým základom pre krásne efekty vo vašich rozloženiach a obrázkoch.</p> <p>V tejto sade nájdete 12 vlastných tvarov, ktoré môžete použiť vo svojich letákoch, pozadia atď. Tvary sa delia na 18, 21 a 24 prúžkov a rôzne šírky lúčov. Tieto predvoľby sú dobrým základom pre krásne efekty vo vašich rozloženiach a obrázkoch.</p>
Výsledok vyzerá takto:
V skutočnosti nie len prvý odsek obteká tento grafikon. To isté platí aj pre druhý textový odsek. Je to jednoducho preto, že grafika vyčnieva cez prvý odsek nadol. Pre lepšie pochopenie priradím odseku, v ktorom je grafika obsiahnutá, jednoducho pozadie.
Po prezretí výsledku je jasné, že grafika skutočne vyčnieva nadol z odseku. Tento spôsob nie je vždy žiadaný. V tejto fáze je zaujímavá vlastnosť clear. Tým sa dá ukončiť floatovanie. clear núti nasledujúci prvok začať skutočne pod floatovaným prvkom a nie vedľa neho. Vlastnosť clear pozná tieto hodnoty:
• left – ukončí float: left
• right – ukončí float: right
• both – ukončí jak float: right, tak aj float: left
V nasledujúcom príklade priradím druhému odseku vlastnosť clear: left, aby som ukončil floatovanie.
<!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="obrazok.jpg" />V tejto sade nájdete 12 vlastných tvarov, ktoré môžete použiť vo svojich letákoch, pozadia atď. Tvary sa delia na 18, 21 a 24 prúžkov a rôzne šírky lúčov. Tieto predvoľby sú dobrým základom pre krásne efekty vo vašich rozloženiach a obrázkoch.</p>
<p style="clear:left;">V tejto sade nájdete 12 vlastných tvarov, ktoré môžete použiť vo svojich letákoch, pozadia atď. Tvary sa delia na 18, 21 a 24 prúžkov a rôzne šírky lúčov. Tieto predvoľby sú dobrým základom pre krásne efekty vo vašich rozloženiach a obrázkoch.</p>
</body>
</html>
Pomocou zobrazeného syntaxu je druhý odsek teraz skutočne zobrazený pod obrázkom.
Väčšinou môžete namiesto clear: left alebo clear: right použiť priamo clear: both. Preto sa odporúča vytvoriť v štýloch jednoducho príslušnú triedu, ktorú potom voláte podľa potreby.
.clearing {
clear: both;
}
Túto triedu môžete vždy použiť, keď chcete ukončiť floatovanie elementu.
<p class="clearing">Obsah ...</p>
Na čo je floatovanie dobré
Samozrejme, floatovanie nie je potrebné len pre tok textu v súvislosti s obrázkami. Vo skutočnosti tvorí základný koncept CSS webových stránok. Vďaka floatovaniu je možné jednoducho vytvoriť viestĺpcové rozloženia. Pozrite si nasledujúci príklad:
<!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>Startseite</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Tu je obsah webovej stránky.
</div>
</body>
</html>Tu je vytvorené dvojstĺpcové rozloženie. Čo je špeciálne: stĺpce sú umiestnené vedľa seba.
A práve toto vedľa seba umiestnenie je realizované s Floating-konceptu. Podrobné informácie o vytváraní webových stránok na základe floatovania nájdete v ďalšej časti tejto série.
