• Opgelost dejong1968

    (@dejong1968)


    Ik wil de achtergrond van een afbeelding opmaken, inclusief het bijschrift

    Dit is wat ik wil:

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_figcaption_css

    Je ziet dat de border van de figure-tag zowel de afbeelding als het bijschrift omvat, zodat ik beiden in 1 keer kan opmaken met een achtergrondkleur.

    Dit is echter wat er gebeurt op onze site (2e afbeelding in het artikel):

    https://www.kemet.nl/meubels-in-het-rijksmuseum-van-oudheden/

    Het bijschrift is geen onderdeel van de afbeelding. Te zien aan de border die NIET het bijschrift omvat. De witte achtergrond wordt hier alleen toegepast op het bijschrift.

    Mijn extra CSS in mijn WP-thema is echter precies zo overgenomen van de W3schools-pagina:

    /*bijschrift opmaak*/
    
    .bijschrift figure {
    	
    	
    	border: 1px solid black;
      padding: 4px;
      margin: auto;
    }
    .bijschrift figcaption {
    	background-color: white;
      color: black;
      padding: 2px;
      text-align: center;
    }

    In het stylesheet van het Thema (Atahualpa) zie ik geen CSS staan die deze afwijking zou kunnen veroorzaken. Voor nu lijkt het erop dat WP anders omgaat met figure en figcapture dan gebruikelijk? Ik ben benieuwd naar jullie reacties, oplossingen of workarounds. Alvast dank.

    Overigens, dat op andere pagina’s eea er wel goed uitziet, komt door het thema dat nog in klassieke stijl wordt gebruikt en waarbij de opmaak standaard zo ingeregeld is (zonder eigen CSS). Als ik echter een pagina converteer naar blokken, verdwijnt de achtergrond van de afbeelding en caption (zie de eerste afbeelding). Ik probeer dat met CSS op te lossen, maar loop dan tegen bovenstaand probleem aan.

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Hoi,

    Jouw CSS werkt niet goed door het volgende.
    Het onderschrift vd afbeelding (de figcaption) heeft specifieke CSS waardoor een lang onderschrift afbreekt naar een nieuwe regel:

    caption-side: bottom;
    display: table-caption;

    Haal je dat weg dan zal de afbeelding opzij gedrukt worden, afhankelijk van de lengte van je onderschrift. Dit zorgt er echter ook voor dat jouw styling niet goed toegepast wordt. Ik heb daar tot op heden geen oplossing voor gevonden, behalve dan bovenstaande CSS verwijderen.

    Los hiervan, je thema Atahualpa is (zwaar) verouderd. Ik lees op het thema forum wel dat een gebruiker updates levert, maar niet via wp punt org. Ik adviseer om op termijn een nieuw thema te zoeken.

    Guido

    Thread starter dejong1968

    (@dejong1968)

    Beste Guido,

    Dank voor je hulp. Ik kan je code niet terugvinden in de diverse css-bestanden (style.css, editor-style.css) bij het thema en het staat ook niet in mijn extra CSS. De HTML-code bij de afbeelding:

    <figure class="wp-block-image alignright wp-image-10366 size-full bijschrift"><img src="https://www.kemet.nl/wp-content/uploads/2018/07/Beddepoot-met-in-de-vorm-van-Bes-Rijksmuseum-van-Oudheden-Leiden.jpg" alt="" class="wp-image-10366"/><figcaption class="wp-element-caption">Beddepoot in de vorm van Bes, Rijksmuseum van Oudheden, Leiden.</figcaption></figure>

    …verwijst naar een klasse wp-element-caption maar die is ook niet terug te vinden. Kun je aangeven waar je die CSS-code vandaan hebt? Dank en groet,

    Thread starter dejong1968

    (@dejong1968)

    Excuus, ik heb wat beter gekeken en heb in de wp-includes/css/…. het style.min.css bestand met de code gevonden. Ik ga daar wat mee proberen door die code in mijn extra css te overrulen. Dank tot zover. Inzake het verouderde thema: dank voor je advies. Het was me ook al opgevallen en ik heb de laatste tijd al wat rondgekeken naar alternatieven. Zolang het draait zonder (security)-issues, laten we het nog even zo.

    Thread starter dejong1968

    (@dejong1968)

    Dank Guido, je hebt me op het juiste spoor gezet. Ik heb de volgende extra CCS gemaakt die de standaard-css overruled en tot het gewenste resultaat leidt.

    .bijschrift figure {	
    	border: 1px solid #CCCCCC;
            padding: 4px;
            margin: auto;
    	background-color: #E7DAB8;
    	border-radius: 5px;
    }
    /*en hier gaat het om: de klassen uit style.min.css in mijn extra CSS gezet en aangepast:*/
    .wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption {
        display: block;
        background-color: #E7DAB8;
        color: #000000;
        font-size: 0.8em;
        padding: 2px 4px 0px;
        margin: 0;
        text-align: center;	
    }

    Als het bijschrift te breed zou worden voor de afbeelding, geef ik gewoon een regelomhaal in het bericht zelf. Dat werkt voor ons prima.

    Hoi,

    Mooi dat het opgelost is. Ziet er prima uit zo.

    Wat je thema betreft, ik heb iemand geholpen die een jaar geleden is overgestapt van Atahualpa naar GeneratePress. Bij dit thema kun je een zijbalk aan linker- en rechterkant weergeven, zoals jullie nu ook hebben. En je site wordt dan ook mooi weergegeven in kleiner (mobiel) scherm.

    Guido

    Thread starter dejong1968

    (@dejong1968)

    Dank, dat houden we zeker in gedachten. Ik ben laatst ook overgestapt van Atahualpa naar Twenty-fifteen voor http://www.koningslijst.nl en daar zijn we ook best tevreden over, ook op kleine schermen. Een eventuele overstap zou dus moeten gaan lukken, en anders zijn er gelukkig dit soort fora nog.

    • Deze reactie is gewijzigd 7 maanden, 3 weken geleden door dejong1968.
6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘css achtergrondkleur afbeelding en bijschrift fig en caption’ is gesloten voor nieuwe reacties.