Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 7 van 7

Onderwerp: Grid layout: links veroorzaken nieuwe regels

  1. #1
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Ede
    Afstand tot server
    ±34 km
    Vraag is opgelost

    Grid layout: links veroorzaken nieuwe regels

    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.
    Pieter Klein, Ede.

  2. #2
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    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%; }
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  3. #3
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Ede
    Afstand tot server
    ±34 km
    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 aangepast door pieter53 : 30 december 2019 om 18:06
    Pieter Klein, Ede.

  4. #4
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Ede
    Afstand tot server
    ±34 km
    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)
    Pieter Klein, Ede.

  5. #5
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Ede
    Afstand tot server
    ±34 km
    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.
    Pieter Klein, Ede.

  6. #6
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    Ik gok eerder een foutje in je CMS, Geen idee welke je gebruikt, maar de webserver-software zal dit zeker niet zelf doen.

  7. #7
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Ede
    Afstand tot server
    ±34 km
    Toch bedankt!
    Pieter Klein, Ede.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren