Twenty Twelve - Bildbeschriftung ohne Abstand

  • Wenn ich ein Foto mit einer Beschriftung "Beispieltext Text Text Text Text Text Text Text" in einen Post einfüge, dann sieht das zunächst so aus:

    [caption id="attachment_1234" align="alignleft" width="300"]<a href="http://beispiel.de/wp-content/uploads/2014/09/Foto.jpg"><img src="http://beispiel.de/wp-content/upl…oto-300x195.jpg" alt="Beispieltext Text Text Text Text Text Text Text." width="300" height="195" class="size-medium wp-image-1234" /></a>Beispieltext Text Text Text Text Text Text Text.[/caption]

    Auf der tatsächlichen Website sieht das Ergebnis im Quelltext so aus:

    <div id="attachment_1234" class="wp-caption alignleft" style="width: 310px">
    <a href="http://beispiel.de/wp-content/uploads/2014/09/Foto.jpg">
    <img src="http://beispiel.de/wp-content/upl…oto-300x195.jpg" alt="Beispieltext Text Text Text Text Text Text Text." width="300" height="195" class="size-medium wp-image-1234"/>
    </a>
    <p class="wp-caption-text">Beispieltext Text Text Text Text Text Text Text.</p>
    </div>

    Hier wird ein 310 px breites Element beschrieben, das nach links ausgerichtet ist und vom Artikeltext umflossen wird. Da das Foto lediglich 300 px breit ist, gibt es rechts vom Foto einen Abstand zum Artikeltext, der 10 px beträgt.
    DAS PROBLEM:
    Die Bildbeschriftung (Bildunterzeile) "Beispieltext Text Text Text Text Text Text Text." nutzt die gesamten 310 px des Elementes aus, so dass zwischen Bildbeschriftung und Artikeltext 0 px Abstand bestehen.
    Wie kann ich erreichen, dass zwischen Bildbeschriftung und Artikeltext 10 px Abstand entstehen?

    Danke für eure Hilfe

    hsc

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Versuch es mal mit

    Code
    p.wp-caption-text {
    padding-right: 10px;
    }


    in Deiner CSS

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • was ist, wenn du dem Text ein padding gibst? (style.css)

  • Ja klar. Das ist es. Ich habe [COLOR=#ff0000]padding-right: 10px;[/COLOR] hingeschrieben - dann ist die Bildunterschrift weiterhin linksbündig.
    Vielen Dank

  • Dann schreib es so:

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Herzlichen Dank! Jetzt bin ich auf der Spur.

    Trotzdem gibt es noch Probleme: http://ehrenamt.kerstin-griese.de/2000/09/25/beispiel/

    Das linksbündige Bild ohne Beschriftung hat ordentliche Abstände nach allen Seiten. (margin: 0.86rem 1.71rem 0.86rem 0px;) Das linksbündige Bild mit Beschriftung befindete hingegen viel zu nah am Artikeltext. Was tun?

    Bei dem rechtsbündigen Bild ist wegen float:right; der Abstand zwischen Bild und Bildbeschriftung weggefallen. Was tun?

  • So scheint es gut auszusehen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!