Met behulp van CSS display: grid had ik twee foto's naast elkaar geplaatst, met netjes de bijschriften daaronder. In het totaal dus 2x2 items (divs).
Wanneer ik nu in een bijschrift een link plaatste dan veroorzaakte deze een nieuwe regel met daarop alleen de link; dus:
Een bijschrift met EEN LINK erin gaf drie regels.
Als volgt:
Een bijschrift met
EEN LINK
daarin gaf drie regels.
Ik kon op internet niet zo gauw een oplossing vinden, wel een kleine hint, en dat resulteerde uiteindelijk in een bruikbare oplossing.
Het probleem lijkt veroorzaakt te worden door de aanwezigheid van een 'inline' element; in dit geval de link.
Plaatst men echter de gehele tekst in een inline element dan heeft men het probleem niet.
In onderstaand voorbeeld breekt bijschrift 2 in drieën, maar bijschrift 1 blijft netjes één regel.
Nu is de H3 tag niet zo handig voor dit doel, dus genruikte ik <ins>.
Dit geeft een onderstreepte tekst.
Door in het style-sheet
op te nemen verdwijnt de onderstreping en krijgen we een normale doorlopende tekst.
Mijn vraag is dus (eigenlijk) opgelost, al verdient de oplossing misschien niet de schoonheidsprijs,
maar omdat ook anderen tegen dit probleem aan kunnen lopen heb ik het hier dan toch maar geplaatst.
Opmerkingen en andere oplossingen blijven natuurlijk welkom.
Wanneer ik nu in een bijschrift een link plaatste dan veroorzaakte deze een nieuwe regel met daarop alleen de link; dus:
Een bijschrift met EEN LINK erin gaf drie regels.
Als volgt:
Een bijschrift met
EEN LINK
daarin gaf drie regels.
Ik kon op internet niet zo gauw een oplossing vinden, wel een kleine hint, en dat resulteerde uiteindelijk in een bruikbare oplossing.
Het probleem lijkt veroorzaakt te worden door de aanwezigheid van een 'inline' element; in dit geval de link.
Plaatst men echter de gehele tekst in een inline element dan heeft men het probleem niet.
In onderstaand voorbeeld breekt bijschrift 2 in drieën, maar bijschrift 1 blijft netjes één regel.
Code:
<div class="grid2-2">
<div>
<img alt="alt"
src="buizen.jpg">
</div>
<div>
<img alt="alt"
src="buizen2 .jpg">
</div>
<div class="bijschr">
<h3>Bijschrift1 <a href="#top">Link</a> in deze regel.</h3>
</div>
<div class="bijschr">
Bijschrift2 <a href="#top">Link</a> in deze regel.
</div>
</div>
Nu is de H3 tag niet zo handig voor dit doel, dus genruikte ik <ins>.
Dit geeft een onderstreepte tekst.
Door in het style-sheet
Code:
ins { text-decoration: none; }
Mijn vraag is dus (eigenlijk) opgelost, al verdient de oplossing misschien niet de schoonheidsprijs,
maar omdat ook anderen tegen dit probleem aan kunnen lopen heb ik het hier dan toch maar geplaatst.
Opmerkingen en andere oplossingen blijven natuurlijk welkom.