Thumbnails zijn niet uitgelijnd

Heb je een aantal thumbnails (kleine afbeeldingen) op een pagina of bericht geplaatst, maar ze staan niet netjes onder elkaar aan de rechter of linker kant van jouw tekst? Misschien vormen ze een soort diagonaal. Hoe komt dat en hoe kan je het corrigeren?

Zwevende afbeeldingen

Welkom op de wereld van CSS (Cascading Style Sheets) en floated images. Een korte uitleg: voordat CSS style sheets werden gebruikt, waren alle tekst en afbeeldingen in een tabel geplaatst. De tabel gaf de pagina vormgeving aan en liet een afbeelding op zijn plaats bleven. Tegenwoordig worden zogeten CSS style sheets gebruikt om het design (kleuren, lettertype, grootte) en de inhoud van een website pagina te scheiden.

Met andere woorden, de style sheets maakt je website mooi. Met CSS is het veel makkelijker om kleuren te veranderen, of de tekst groter of kleiner maken. Wil je je site een nieuw gezicht geven? Op de oude manier zouden veranderingen op ELKE pagina gedaan moeten worden. Met CSS hoef je maar één bestand te veranderen. Joepie!

Een deel van CSS is zogeheten “floated images” [zwevende afbeeldingen]. Bij het toevoegen van een foto (of andere afbeelding) kies je de positie van de float bijv. rechts, links of midden. Een float vertelt de website browser om de tekst (rechts of links) om de foto te vouwen. De ruimte van de float wordt bepaald door de hoogte en breedte van de foto met extra pixels (“padding”).

Thumbnails (kleine afbeeldingen) worden niet goed vertoond

Hier komt het probleem … als de tekst korter dan de foto is, dan wordt de volgende thumbnail ook meegesleept in de float. Hierdoor vormt het een diagonale of zigzag lijn i.p.v. een rechte lijn. Gelukkig is het redelijk makkelijk om te herstellen. Je kan óf de volgende foto ietsjes lager plaatsen, óf de tekst naast de foto uitbreiden.

Wat betekent de positie ”Geen”?

Bij het toevoegen van een afbeelding, kan je ook “geen” bij positie kiezen. Dit betekent dat er op deze afbeelding geen float wordt geplaatst. Dus de volgende teksten (en foto’s) blijven netjes onder de foto.  Met andere woorden, als er geen float is, worden geen foto’s door teksten omhulst. Dit gebruikt men meestal bij grotere foto’s.

Design class “cleared”

In de thema’s die wij maken, zit er een stijl klas die alle floats verwijderen d.w.z. class=”cleared”

Deze kan bijvoorbeld op een horizontaal lijn toegevoegd worden, tussen de rijen teksten en foto’s. In html view, ga naar het eind van de tekst en foto’s van de eerste rij en typ de volgende in: <hr class=”cleared” />

Of je kan een stukje tekst tussen de rijen plaatsen en de “float” daarmee laten verwijderen.  In html view, typ een stukje tekst tussen de rijen en dan aan de begin van deze alinea, typ de volgende in: <p class=”cleared”>Begin van de alinea … en dan aan het eind van de alinea, typ de sluitende html code in: </p> Trouwens heeft een horizontaal lijn geen sluitende code.