CSS Voorbeelden
Hoe een afbeelding naast tekst plaatsen / floatende afbeeldingen in CSS
Vaak wil je gebruik maken van een afbeelding tussen tekst. De standaard wijze waarop een plaatje (HTML-element <img>) wordt getoond voldoet daarbij niet of nauwelijks. De tekst staat onder, of slechts de eerste regel staat naast, het plaatje. Geknoei met align lost niets op.
Oplossing in CSS
Het plaatsen van een plaatje naast tekst, links of rechts, waarbij het plaatje dooor de tekst omsloten lijkt, is met behulp van CSS zeer makkelijk op te lossen.
Hiervoor gebruiken we in de stylesheet voor het img-element de styleregel: float. Deze kan zowel right (rechts) als left (links) zijn.
HTML - IMG voor afbeelding
De HTML voor het plaatje 'links':
<img src="voorbeeldplaatje.jpg" alt="Voorbeeld CSS plaatje floaten" title="Links naast de tekst" class="left">
De HTML voor het plaatje 'rechts':
<img src="voorbeeldplaatje.jpg" alt="Voorbeeld CSS plaatje floaten" title="Rechts naast de tekst" class="right">
CSS voor floaten van afbeeldingen:
Voeg onderstaande regels aan uw styles / stylesheet toe:img.left { float: left; margin: 0.5em 1em 1em 0; border: 1px solid #999; clear: left; }
img.right { float: right; margin: 0.5em 0 1em 1em; border: 1px solid #999; clear: right; }
Voorbeeld afbeelding gefloat naast tekst mbv. CSS
Een voorbeeld zegt vaak meer dan duizend woorden. In onderstaande tekst hebben we daarom twee plaatjes opgenomen die links- en rechts-gefloat zijn.
Het plaatje links hebben we voorzien van een speciale class voor het tonen van afbeeldingen 'links' naast de tekst. Het plaatje rechts vanzelfsprekend idem, maar dan voor een afbeelding 'rechts' naast de tekst.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero.Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor.
Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;