Gallery: Eigene CSS-Klasse für zweites Bild?

  • Hallo Leute,

    ich verwende die WordPress eigene Gallery und die reicht für dieses Projekt auch völlig aus. Es gibt nur ein Problem das Webdesignern bekannt sein dürfte. Wenn ich für die Bilder in einer Gallery einen Abstand nach rechts definiere gilt der für alle Bilder der Gallery und es kommt zu einem nicht gewollten Umbruch. In diesem Fall ist die Gallery immer Zweispaltig. Jedes Bild misst 230px der content ist exakt 500px breit. Zwischen den beiden Bildern soll ein Abstand von 40px sein. Also 230 40 230 = 500. Wenn ich aber sage

    Code
    .gallery a img {margin-right:40px}

    richtet sich das natürlich auch an die Bilder in der zweiten Spalte und es kommt aufgrund der Gesamtbreite des Contents von 500px zu einem Umbruch und die ganze Gallery ist nur noch Einspaltig. Die Lösung wäre dass die äußeren Bilder der Gallery eine eigene CSS-Klasse kommen (z.B. ".last") und man dann entsprechend den Margin für Bilder mit dieser Klasse auf "0" setzt.

    Kennt dafür Jemand eine Lösung?

    Danke

    • 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

  • Du könntest Dich der Pseudoklasse :nth-of-type bedienen. Wenn Du z.B. im Div.gallery die Bilder jeweils in dl gesetzt hast, könnte es so aussehen:

    Code
    .gallery dl:nth-of-type(odd){margin-right:20px;}
    .gallery dl:nth-of-type(even){margin-left:20px;}


    Da das aber CSS3 ist, verstehen es nicht alle Browser.

    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]

  • Ziemlich gute Idee, die auch funktioniert. Hier wäre wünschenswert dass die WordPress-Gallery einen Zähler einsetzt und je nach gewählter Spaltenanzahl bei der jeweils letzten für das dl-Element einen CSS-Klasse wie "last_image" etc einsetzt.

Jetzt mitmachen!

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