Plavanje je eno ključnih CSS konceptov. Brez razumevanja tega načela ni možno ustvariti spletnih strani na podlagi CSS. Plavanje se lahko zelo lepo prevaja kot "float", kar stvar povzame. Floatanje dejansko pomeni, da se element postavi levo ali desno od drugega elementa. (V nasprotnem primeru bi se element običajno postavil pod drugi element).
<p><img src="bild.jpg" /> V tem setu je 12 lastnih oblik, ki jih lahko uporabite v svojih letakih, ozadjih ipd. Oblike so razdeljene v 18, 21 in 24 trakov ter različne širine žarkov. Ta prednastavitev je dobra osnova za lepe učinke v vaših postavitvah in slikah.</p>
Tukaj je bil definiran odstavek. V tem odstavku se nahaja slika in običajno besedilo.
Pogled na rezultat pokaže, da slika stoji v tekstu.
Zdaj pride v igro lastnost float.
img { float: left;}
Tudi tukaj si poglejmo rezultat.
Tukaj je slika torej floatana. Besedilo tako teče okoli slike.
Lastnosti float lahko dodelimo vrednosti left in right, da element "lebdi" na levi strani (float: left) ali desni strani (float: right). Poskusite takoj uporabiti float: right na sliki.
V tem primeru se zgodi tri stvari:
• Grafika je izvzeta iz običajnega pretoka.
• Prikazuje se v p-elementu povsem zgoraj.
• Prikazana je čim bolj desno.
Pogled na dosedanje rezultate prikazuje, da to še ni zares lepo videti. Dejansko manjkajo razmiki med sliko in tekstom, ki ga obteka. Pri tem prilagodite sintakso na naslednji način:
img {
float: left;
margin-right: 20px;
}
Sliki je bil dodeljen desni rob 20 pikslov. To ustvarja naslednji pogled:
Samostojno eksperimentirajte malce z robovi.
Končanje plavanja
Še enkrat nazaj k primeru slike. Sintakso bom razširil z dodatnim besedilnim odstavkom.
<p><img src="bild.jpg" />V tem setu je 12 lastnih oblik, ki jih lahko uporabite v svojih letakih, ozadjih itd. Oblike so razdeljene v 18, 21 in 24 trakov ter različne širine žarkov. Ta prednastavitev je dobra osnova za lepe učinke v vaših postavitvah in slikah.</p> <p>V tem setu je 12 lastnih oblik, ki jih lahko uporabite v svojih letakih, ozadjih itd. Oblike so razdeljene v 18, 21 in 24 trakov ter različne širine žarkov. Ta prednastavitev je dobra osnova za lepe učinke v vaših postavitvah in slikah.</p>
Rezultat je takšen:
Dejansko ne le prvi odstavek obteka grafika. Enako velja tudi za drugi besedilni odstavek. To je preprosto zato, ker grafika gleda preko prvega odstavka navzdol. Za boljše razumevanje bodite jasno dodelite ozadje odstavku, v katerem je grafika. Le tako bo jasno, kaj sledi. Ko si ogledate rezultat, postane jasno, da grafika dejansko gleda preko odstavka. To v takšni obliki seveda ni vedno po želji. Na tej točki postane zanimiva lastnost clear. S to lastnostjo se plavanje konča. clear prisili naslednji element, da se prične dejansko pod floatanim elementom, namesto da bi bil ob njej. Lastnost clear pozna naslednje vrednosti:
• left – konča float: left
• right – konča float: right
• both – konča tako float: right kot tudi float: left
V spodnjem primeru dodelim drugemu odstavku lastnost clear: left, da končam plavanje.
<!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 tem setu je 12 lastnih oblik, ki jih lahko uporabite v svojih letakih, ozadjih itd. Oblike so razdeljene v 18, 21 in 24 trakov ter različne širine žarkov. Ta prednastavitev je dobra osnova za lepe učinke v vaših postavitvah in slikah.</p>
<p style="clear:left;">V tem setu je 12 lastnih oblik, ki jih lahko uporabite v svojih letakih, ozadjih itd. Oblike so razdeljene v 18, 21 in 24 trakov ter različne širine žarkov. Ta prednastavitev je dobra osnova za lepe učinke v vaših postavitvah in slikah.</p>
</body>
</html>
Z uporabo prikazane sintakse se drugi odstavek dejansko prikaže pod sliko.
V večini primerov namesto clear: left ali clear: right lahko uporabite kar clear: both. Zato je priporočljivo, da enostavno ustvarite ustrezni razred v svojem slogovniku in ga po potrebi uporabite.
.clearing {
clear: both;
}
Ta razred lahko vedno uporabite, kadar želite končati plavanje elementa.
<p class="clearing">Vsebine ...</p>
Za kaj je dobro plavanje
Plavanje ni potrebno le za pretok besedila v povezavi z slikami. Pravzaprav predstavlja osnovni koncept CSS-temeljenih spletnih strani. Zahvaljujoč plavanju je na primer mogoče enostavno ustvariti večstolpčne postavitve. Oglejte si naslednji primer:
<!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>Začetna stran</li>
<li>Kontakt</li>
<li>Impresum</li>
</ul>
</div>
<div id="inhalt">
Tukaj je vsebina spletne strani.
</div>
</body>
</html>V tem primeru se ustvari dvostolpčna postavitev. Posebnost je, da stolpci stojijo drug ob drugem.
In prav to postavljanje drug ob drugega se uresničuje preko koncepta plavanja. Podrobnosti o gradnji spletnih strani na podlagi plavanja boste spoznali v nadaljevanju tega niza.
