Leer hoe u met CSS tekst rond een zwevende afbeelding kunt laten lopen.
Gebruik een CSS-regel zoals deze om uw tekst rond de afbeelding aan de rechterkant te laten lopen, vergelijkbaar met de manier waarop het is in de foto die dit artikel introduceert:
De float: left-regel zorgt ervoor dat de afbeelding naar de linkermarge wordt verplaatst. De padding-right-regel zorgt ervoor dat de tekst niet tegen de rechterkant van de afbeelding stoot. Als er een rand aan deze afbeelding zou worden toegevoegd, zou er opvulling tussen de afbeelding en de rand komen. Zie sectie 2 om te werken met een afbeelding met een rand.
Voeg vervolgens marges toe aan de linker- en rechterkant van de afbeelding om deze te centreren. De juiste waarde voor de linker- en rechtermarges om iets te centreren is automatisch.
Om een dikke, frame-achtige rand te maken met behulp van de groefrandstijl, kan een regel als deze worden gebruikt:
Andere randstijlen zijn effen, gestippeld, gestreept, dubbel, ribbel, inzet en begin. Breedte kan worden uitgedrukt in pixels, ems of percentages.
Randen kunnen selectief worden toegepast op de boven-, rechter-, onder- en linkerzijde van de afbeelding. U kunt deze kennis gebruiken om een effect als een slagschaduw te creëren.
Door een effen rand in 2 grijstinten aan de rechter- en onderrand te gebruiken, krijgt u een slagschaduweffect.
img { float: links; border-right-stijl: solide; grens-rechts-breedte: 8px; border-right-kleur: #CCCCCC; border-bottom-stijl: solide; grens-onder-breedte: 8px; border-bottom-kleur: #999999; marge-rechts: 1em; marge-onder: 1em; }
Tip
Als je afbeeldingen hebt in meer dan één divisie (div) van een pagina, gebruik dan afstammelingen om ze individueel op te maken. Mogelijke selectors: #content img, #sidebar img, #feature img.
