Floaten is een van de cruciale CSS-concepten. Zonder begrip van dit principe kunnen webpagina's niet worden gemaakt op basis van CSS. Floaten kan hier overigens mooi worden vertaald als "vloeien", wat de kern van de zaak treffend weergeeft. Uiteindelijk betekent floaten namelijk niets anders dan dat een element links of rechts naast een ander element wordt geplaatst. (Normaal gesproken zou het element onder een ander element staan).
Een eerste voorbeeld zal dit aspect verduidelijken.
<p><img src="beeld.jpg" /> In deze set bevinden zich 12 Eigen Vormen, die je kunt gebruiken in je flyers, achtergronden, enz. De vormen zijn onderverdeeld in 18, 21 en 24 strepen en verschillende straalbreedtes. Deze presets vormen een goede basis voor mooie effecten in je lay-outs en afbeeldingen.</p>
Hier is een alinea gedefinieerd. Binnen deze alinea bevinden zich een afbeelding en gewone tekst.
Een blik op het resultaat laat zien dat de afbeelding in de tekststroom staat.
Nu komt het float-eigenschap in het spel.
img { float: left;}
Ook hiervoor werpen we een blik op het resultaat.
Hier is de afbeelding dus gefloat. De tekst stroomt hierdoor rond de afbeelding.
Aan de eigenschap float kan de waarden left en right worden toegewezen, om het element naar links (float: left) of rechts (float: right) te "laten zweven."
Je kunt ook meteen float: right toepassen op de afbeelding.
In dit geval gebeuren er drie dingen:
• De grafiek wordt uit de normale stroom verwijderd.
• Het wordt bovenaan weergegeven in het p-element.
• Het wordt zo ver mogelijk rechts weergegeven.
Een kijkje naar de tot nu toe behaalde resultaten maakt duidelijk dat het er nog niet echt mooi uitziet. Eigenlijk ontbreken de afstanden tussen afbeelding en omliggende tekst. Pas de syntaxis als volgt aan:
img {
float: left;
margin-right: 20px;
}
De afbeelding heeft een rechtermarge van 20 pixels gekregen. Dat levert het volgende beeld op:
Experimenteer hier gewoon een beetje met de randafstanden.
Het floaten beëindigen
Nogmaals terug naar het voorbeeld met de afbeelding. Ik voeg de syntaxis toe met een extra tekstalinea.
<p><img src="beeld.jpg" />In deze set bevinden zich 12 Eigen Vormen, die je kunt gebruiken in je flyers, achtergronden, enz. De vormen zijn onderverdeeld in 18, 21 en 24 strepen en verschillende straalbreedtes. Deze presets vormen een goede basis voor mooie effecten in je lay-outs en afbeeldingen.</p> <p>In deze set bevinden zich 12 Eigen Vormen, die je kunt gebruiken in je flyers, achtergronden, enz. De vormen zijn onderverdeeld in 18, 21 en 24 strepen en verschillende straalbreedtes. Deze presets vormen een goede basis voor mooie effecten in je lay-outs en afbeeldingen.</p>
Het resultaat ziet er als volgt uit:
Niet alleen de eerste alinea omsluit de grafiek. Hetzelfde geldt ook voor de tweede tekstalinea. Dit komt eenvoudigweg omdat de grafiek uitsteekt boven de eerste alinea. Om dit beter te begrijpen, geef ik de alinea waarin de grafiek staat gewoon een achtergrondkleur.
Als je naar het resultaat kijkt, wordt duidelijk dat de grafiek daadwerkelijk uitsteekt boven de alinea. Dit is natuurlijk niet altijd gewenst. Op dit punt wordt de clear-eigenschap interessant. Hiermee kan het floaten worden beëindigd. clear dwingt een volgend element om daadwerkelijk onder een gefloat element te beginnen, en niet ernaast. De clear-eigenschap kent de volgende waarden:
• left - beëindigt float: left
• right - beëindigt float: right
• both - beëindigt zowel float: right als float: left
In het volgende voorbeeld wijs ik aan de tweede alinea clear: left toe om het floaten te beëindigen.
<!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="beeld.jpg" />In deze set bevinden zich 12 Eigen Vormen, die je kunt gebruiken in je flyers, achtergronden, enz. De vormen zijn onderverdeeld in 18, 21 en 24 strepen en verschillende straalbreedtes. Deze presets vormen een goede basis voor mooie effecten in je lay-outs en afbeeldingen.</p>
<p style="clear:left;">In deze set bevinden zich 12 Eigen Vormen, die je kunt gebruiken in je flyers, achtergronden, enz. De vormen zijn onderverdeeld in 18, 21 en 24 strepen en verschillende straalbreedtes. Deze presets vormen een goede basis voor mooie effecten in je lay-outs en afbeeldingen.</p>
</body>
</html>
Door de getoonde syntaxis wordt de tweede alinea nu daadwerkelijk onder de afbeelding weergegeven.
In de meeste gevallen kunt u in plaats van clear: left of clear: right gewoon clear: both gebruiken. Daarom is het raadzaam om eenvoudigweg een bijbehorende klasse aan te maken in uw stylesheet, die u dan indien nodig kunt aanroepen.
.clearing {
clear: both;
}
U kunt deze klasse altijd gebruiken wanneer u het floaten van een element wilt beëindigen.
<p class="clearing">Inhoud ...</p>
Wat is het nut van floaten
Natuurlijk wordt floaten niet alleen gebruikt voor de tekststroom in verband met afbeeldingen. In feite vormt het het basisconcept van op CSS gebaseerde websites. Dankzij het floaten kunnen bijvoorbeeld eenvoudig meerdelige lay-outs worden gemaakt. Bekijk het volgende voorbeeld:
<!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>Startpagina</li>
<li>Contact</li>
<li>Colofon</li>
</ul>
</div>
<div id="inhalt">
Hier staat de inhoud van de website.
</div>
</body>
</html>Hier wordt een tweeslachtig lay-out opgezet. Het bijzondere hieraan: de kolommen staan naast elkaar.
En juist deze naast elkaar staan wordt gerealiseerd via het float-concept. Uitgebreide informatie over het opzetten van websites op basis van floaten volgt verderop in deze serie.
