Grid layout: links veroorzaken nieuwe regels

Status
Niet open voor verdere reacties.
P

pieter53

Gebruiker
Lid geworden
1 jan 2007
Berichten
297
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.
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; }
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.
 
Bedankt voor het delen van je oplossing.

2 vraagjes.
- Wil je de html en css code van je oplossing delen?
- Is het niet gelukt zonder de h3 of ins, maar dan met
Code: 
.grid2-2 div * { display: inline-block; }

Of misschien met
Code: 
.grid2-2 div { display: flex; flex-wrap: wrap; }
.grid2-2 div * { flex: 0 0 50%; }
 
Het complete test file:
Code: 
<html>
<head>

<style>

ins {
	text-decoration: none;
}

.grid2-2 {
  display: grid;
  margin: auto;
  width: 98%;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  text-align: center;
}

.grid2-2 div {
	box-sizing: border-box;
	display: grid;
	padding: 0px 0px;
	align-items: center;
	justify-content: center;
}
.bijschr {
	box-sizing: border-box;
	display: grid;
	padding: 0px 0px;
	width: 90%;
	text-align: center;
	margin: 0.3em 0em 0.3em 1.2em;
	
}

</style>
</head>
<body>

<div class="grid2-2">
	<div>
		<img alt="alt" 
		src="buizen.jpg">
	</div>
	<div>
		<img alt="alt" 
		src="buizen2 .jpg">
	</div>
	
	<div class="bijschr">
		<ins>Bijschrift1 <a href="#top">Link</a> in deze regel.</ins>
	</div>
	<div class="bijschr">
		Bijschrift2 <a href="#top">Link</a> in deze regel.
	</div>
</div>

</body>
</html>

Een oplossing met "display: inline-block;" is niet geprobeerd. Zou misschien kunnen. Maar elders op internet werd deze mogelijkheid niet genoemd.
Een oplossing met flex is niet getest, omdat ik eerder problemen had om met de flexbox het gewenste resultaat te bereiken. (Tekst boven aan in de div laten beginnen, lukte me niet.)

De kwestie is: ik wil twee afbeeldingen van verschillend formaat, zowel horizontaal als vertikaal gecentreerd, naast elkaar kunnen plaatsen.
Daar onder komen dan de bijbehorende bijschriften. Deze tekstblokken moeten op gelijke hoogte beginnen en gecentreerd onder de afbeeldingen staan.

Ik had een eerder een andere oplossing, maar dan moest ik te kleine foto's op een 'onzichtbare' achtergrond plakken of de tekstblokken m.b.v. marges op hun plaats schuiven.
 
Laatst bewerkt:
IK zit nu met een ander probleem....

Na alles lokaal getest te hebben, heb ik de benodigde bestanden op de server geplaatst.


Het stukje pagina waarin GRID toegepast wordt ziet er nu zo uit.
Code: 
<a name="buizen"></a>
<a name="hagenaar_elisabeth_leeuwarden"></a>
<a name="aak_zwarte_water"></a>
<br>

<div class="grid2-2">
    <div>
       <img style="max-width: 355px; max-height: 495px;" alt="buizen" src="afbeeldingen3/afb-301/495buizen.jpg">
    </div>
    <div>
      <img style="max-width: 355px; max-height: 495px;" alt="aa74" src="afbeeldingen3/afb-301/495aa74_hagenaar_elisabeth_leeuwarden_21-09-2010-1050682.jpg">
    </div>

    <div class="bijschr"><ins>Ook deze flink <a href="zoek.php?woord=buizen">buizende</a> aak op het Zwarte Meer, is de Hagenaar de Vriendschap.<br>
         Foto: Pieter Klein, eind jaren 90.<br> (<a href="afbeeldingen3/afb-301/buizen.jpg">groter formaat</a>)</ins>
    </div>
    <div class="bijschr"><ins>De Hagenaar Elisabeth. Tegenwoordig doet zij dienst als woonschip.<br>
        Foto: Pieter Klein, Leeuwarden 21-9-2010.<br> (<a href="afbeeldingen3/afb-301/aa74_hagenaar_elisabeth_leeuwarden_21-09-2010-1050682.jpg">groter formaat</a>)</ins>
    </div> 
</div>

Op de WEBSITE wordt de pagina echter na: <a name="aak_zwarte_water"></a><br> afgekapt.
zelfs de closing tags </body></html> worden niet meer verwerkt.
Lokaal (xampp) is er niets aan de hand.
Foutje van de server?
(Getest met FF, Crome en Edge)
 
Ook alweer opgelost.
Een blunder van mijn kant van jewelste.
Ik was vergeten het bestand waarin de functie die dat stuk code moet produceren te vernieuwen.

De ouderdom komt met gebreken, haastige spoed enz. enz.
 
Ik gok eerder een foutje in je CMS, Geen idee welke je gebruikt, maar de webserver-software zal dit zeker niet zelf doen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan