Tekstomloop in HTML

Weinig  tekst uitlijnen bij foto’s en afbeeldingen.

Wanneer  je een artikel schrijft en je voegt  een afbeelding of foto in, wordt je al snel geconfronteerd met het feit dat de tekst en plaatjes niet goed omlopen,  zeker als er minder tekst is als de afmeting van de afbeelding.   Bijvoorbeeld je hebt een foto, die in portretstand staat, met een omschrijving.  Bij de eerste foto gaat goed maar dan bij de volgende ontstaat er een probleem , zowel in de teksteditor als op de webpagina.

In de de tekstverwerker, standaard is dit in WordPress tinymce, wordt een afbeelding  met voldoende tekst goed weergegeven. De tekst begint boven aan de afbeelding en loopt goed om,  maar als tekst minder lang is als de afbeelding, loopt je tegen een probleem op. Het volgende plaatje en/of tekst komen niet goed uit. Je kan het proberen met enter’s maar dit is een hopeloos heen en weer geschakel tussen je editor en de webpagina.

Voorbeeld 1. Het plaatje en tekst goed omlopen.

bloemRoze Bloem.Dit is een tekst die om het plaatje heen loopt en geen problemen geeft omdat er voldoende tekst is.

De oorzaak van dit verschijnsel komt omdat de uitlijning (alignment)  op float:left of float:right van de afbeelding staat.  In leken taal, het plaatje en tekst “drijft” naar de rechterkant, het tweede plaatje “drijft” even eens naar de rechterkant tot aan het eerstvolgende  element (Bloem 1). Zie voorbeeld 2.

Voorbeeld 2e plaatjes wordt niet goed weergegeven.

 bloemBloem 1
bloemBloem 2

 

Om dit op te lossen is het noodzakelijk om extra html code toe te voegen in de tekst. Je moet omschakelen van de Visual tabblad naar Text in de tinymce editor

Achter het eerste plaatje moet je de volgende code invoegen.   <br style=”clear: both;” />. 

Dit stukje code reset het “drijf” gedrag van het  eerste element. Dit geeft als resultaat dat het tweede plaatje  weer aan de uiterste rechtkant wordt geplaatst.

Voorbeeld 3. het 2e plaatjes wordt juist weergegeven.

 bloemBloem 1
 ( <br style=”clear: both;” /> )
bloemBloem 2

In CSS code betekent  clear:both dat het “drijf” gedrag zowel links als rechts worden gereset. Het is ook mogelijk om alleen met clear:left  of clear:right respectievelijk het drijfgedrag links of rechts op te heffen.

 

tinymc_clear_pluginAls het bovenstaande toch iets in ingewikkeld is dat kan je volgende plugin voor TinyMCE downloaden. Deze wordpress TinyMCE Clear voegt 3 iconen toe aan de werkbalk van de editor. Deze voegt de code “onder water” toe aan je tekst. Let wel op waar je staat met je cursor, omdat de code wordt toegevoegd op die plek. Ik kijk zelf altijd in de HTML code of dat alles correct staat.  Voor de TinyMCE voor Joomla hebt ik geen plugin gevonden, maar misschien hebben je deze wel gevonden. Laat mij dit dat weten. 

 

bron: http://codex.wordpress.org/Wrapping_Text_Around_Images

 

Laat een reactie achter ...

*


+ three = 10