Ujuv on üks otsustava tähtsusega CSS-kontseptsioonidest. Ilma selle põhimõtte mõistmiseta ei saa veebilehti CSSi abil luua. Ujuda saab siin muide väga kenasti tõlkida ujumisega, mis tabab olukorra tuuma. Lõppkokkuvõttes tähendab ujumine lihtsalt seda, et üks element asetseb teise elemendi kõrval vasakul või paremal. (Tavaliselt asuks element teise elemendi all).
<p><img src="bild.jpg" /> Selles komplektis on 12 enda kujundit, mida saate kasutada lendlehtedes, taustades jne. Kujundid jagunevad 18, 21 ja 24 triibu ja erineva kiirusega kiirteks. Need eelmääratletud väärtused on head alus ilusate efektide jaoks teie paigutustes ja piltides.</p>
Siin on defineeritud üks lõik. Selle lõigu sees on pilt ja tavaline tekst.
Vaade tulemusele näitab, et pilt on tekstivoo sees.
Nüüd tuleb mängu float omadus.
img { float: left;}
Seda saab uuesti vaadata tulemust.
Oleme pildiga ujutanud. Tekst voolab pildi ümber.
Väärtustele left ja right saab omistada float omaduse, et element jätta vasakule (float: left) või paremale (float: right) "lebama". Proovige rakendada pildile kohe float: right.
img {
float: left;
margin-right: 20px;
}
Pildile on omistatud parem äärmarginaal 20 pikslit. See annab järgmise ilme:
Seni saadud tulemuste ülevaade näitab, et see pole veel tõesti kenasti välja näinud. Tegelikult puuduvad pildi ja pildi ümbruseva teksti vahelised vahemaad. Kohandage süntaksit järgmiselt:
img {
float: left;
margin-right: 20px;
}
Pildile on omistatud parem äärmarginaal 20 pikslit. See annab järgmise ilme:
Ujumise lõpetamine
Annan pilti kirjeldavale näitele veel ühe tekstilõigu.
<p><img src="bild.jpg" />Selles komplektis on 12 enda kujundit, mida saate kasutada lendlehtedes, taustades jne. Kujundid jagunevad 18, 21 ja 24 triibu ja erineva kiirusega kiirteks. Need eelmääratletud väärtused on head alus ilusate efektide jaoks teie paigutustes ja piltides.</p> <p>Selles komplektis on 12 enda kujundit, mida saate kasutada lendlehtedes, taustades jne. Kujundid jagunevad 18, 21 ja 24 triibu ja erineva kiirusega kiirteks. Need eelmääratletud väärtused on head alus ilusate efektide jaoks teie paigutustes ja piltides.</p>
Tulemus on järgmine:
Tegelikult ujutab mitte ainult esimene lõik graafikat. Sama kehtib ka teise tekstilõigu kohta. See tuleneb lihtsalt asjaolust, et graafika ulatub esimesest lõigust allapoole. Graafika sisaldava lõigu mõistmiseks andke lihtsalt taustvärv.
Järgmise näite puhul määran teisele lõigule omaduse clear: left, et ujumine lõpetada.
<!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" />Selles komplektis on 12 enda kujundit, mida saate kasutada lendlehtedes, taustades jne. Kujundid jagunevad 18, 21
ja 24 triibu ja erineva kiirusega kiirteks. Need eelmääratletud väärtused on head alus ilusate efektide jaoks teie paigutustes ja piltides.</p>
<p style="clear:left;">Selles komplektis on 12 enda kujundit, mida saate kasutada lendlehtedes, taustades jne. Kujundid jagunevad 18, 21
ja 24 triibu ja erineva kiirusega kiirteks. Need eelmääratletud väärtused on head alus ilusate efektide jaoks teie paigutustes ja piltides.</p>
</body>
</html>
Näidatud süntaksi abil kuvatakse teine lõik tegelikult pildi all.
Enamikul juhtudel võib clear: left või clear: right asemel kasutada clear: both. Seetõttu on soovitatav luua oma stiilileht lihtsalt vastav klass ja seda vajadusel kutsuda.
.clearing {
clear: both;
}
Seda klassi saab alati kasutada siis, kui elemendi ujutamine tuleb lõpetada.
<p class="clearing">Sisu ...</p>
Milleks ujutamine hea on
Loomulikult ei ole ujutamist vaja ainult tekstivoo kontekstis piltidega seoses. Tegelikult moodustab see CSS-põhiste veebisaitide põhikontseptsiooni. Tänu ujutamisele saab näiteks mitmerealisi paigutusi hõlpsalt teostada. Vaadake järgnevat näidet:
<!DOCTYPE html>
<html lang="et">
<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>Kodu</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Siin on veebilehe sisu.
</div>
</body>
</html>Siin luuakse kahe veeru paigutus. Eripäraks on see, et veerud seisavad kõrvuti.
Ja just see kõrvuti seismine saavutatakse ujutamise kontseptsiooni abil. Üksikasjalikum teave veebilehtede ehitamise kohta ujutamise baasil järgneb selle seeria edasisel käigul.
