Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11
Like Tree1Likes

Thema: 3 Bilder nebeneinander mit der Wordpress- Galerie als Vorschaubild nicht möglich?

  1. #1
    PostRank: 1
    Registriert seit
    03.01.2017
    Beiträge
    20

    3 Bilder nebeneinander mit der Wordpress- Galerie als Vorschaubild nicht möglich?

    Hallo zusammen,

    in diesem beitrag hier:
    https://mobil.transitfrei.de/die-ers...n-und-rapsoel/
    sind die Bilder 4, 5 und 6 über die WP- eigene Galeriefunktion eingebaut. Ich habe in der Galerie klar "3 Spalten" eingetragen.
    Die Bilder sind nur als Vorschaubild eingerichtet, Platz genug sollte also für drei Bilder nebeneinander sein?!
    Es werden aber nur 2 Bilder nebeneinander, das dritte Bild ist in die nächste Zeile gerutscht. Egal, ob ich eben 3, oder auch 2 oder 5 Spalten in der Galerie angebe.
    Jemand einen Tipp für mich, wie ich die 3 Bilder nebeneinander bekomme?
    Danke.


  2. #2
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.580
    Derzeit sind da "5 Spalten" eingetragen.

    Das Problem liegt an einer Zeile in einem inline CSS-Block, der wahrscheinlich irgendwo in den Theme-Options oder über ein Custom CSS Plugin eingegeben wurde:

    Code:
    .gallery-item {
    font-style: italic;
    width: 48% !important;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 5%;
    line-height: 1%;
    text-align: left !important;
    }
    Die HTML-Ausgabe ist aber am Rande bemerkt nicht die der Standard WordPress Gallery, wahrscheinlich funkt da das Theme bzw. Plugin dazwischen.
    Geändert von b3317133 (09.02.2018 um 22:08 Uhr)

  3. #3
    PostRank: 1
    Registriert seit
    03.01.2017
    Beiträge
    20
    Ja, guter Fund!
    Jetzt wird es tricky!
    Tatsächlich ist das von mir manuell so eingetragen als Ergebnis eines früheren Themas hier.
    Herausforderung dort war, dass ich in der Galerieansicht 2 Bilder nebeneinander haben wollte.
    Das sind die Bilder 2 und 3. Mit dem width Eintrag sind die beiden Bilder nebeneinander. Nehme ich den raus, sind die Bilder 4, 5 und 6 tatsächlich nebeneinander!
    Aber die Bilder 2 und 3 dann wieder standardmäßig untereinander.
    Mist.
    Dabei war ich so happy, dass wir die Bilder 2 und 3 nebeneinander bekommen haben.
    Tja. Muss ich mich jetzt entscheiden?
    Oder gibt es eine Zwischenlösung?

    P.S.: Ja, da stand noch 5 Spalten. War vom Testlauf. Sind jetzt wieder 3 Spalten.

  4. #4
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.580
    Verwende einen genaueren Selector, z.B. bei Deinem Theme für 2-spaltig:
    Code:
    .gallery-columns-2 .gallery-item {
        ...
    }
    oder für 5-spaltig:
    Code:
    .gallery-columns-5 .gallery-item {
        ...
    }
    Die entspr. class-Namen findet man über den Browser-Inspector.

    PS. Es ist nach wie vor 5-spaltig eingestellt.

  5. #5
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.580
    Wenn Du den gesamten manuellen .gallery-item Code weglässt, sollte es eigentlich vom Theme her schon richtig klappen mit der Anordnung, inkl. responsive Darstellung.

    Den Abstand unten nach der Gallery könnte man dann z.B. mit sowas erzeugen:
    Code:
    .gallery {
        margin-bottom: 15px !important;
    }
    Geändert von b3317133 (09.02.2018 um 22:31 Uhr)

  6. #6
    PostRank: 1
    Registriert seit
    03.01.2017
    Beiträge
    20
    HEUREKA!
    ich glaube das ist es!
    Also ich habe meine 2 Bilder nebeneinander mit
    Code:
    .gallery-columns-2 .gallery-item {
    font-style: italic;
    width: 48% !important;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 5%;
    line-height: 1%;
    text-align: left !important;
    }
    und ich habe meine 3 Bilder nebeneinander.
    Allerdings musste ich sowohl das width und auch einige pading- Elemente entfernen, damit die 3er Reihe mit den Bildern nebeneinander angeordnet werden.
    So aber scheint es zu klappen!
    Code:
    .gallery-columns-3 .gallery-item {
    font-style: italic;
    padding-bottom: 5%;
    line-height: 1%;
    text-align: left !important;
    }

  7. #7
    PostRank: 1
    Registriert seit
    03.01.2017
    Beiträge
    20
    Zitat Zitat von b3317133 Beitrag anzeigen
    Wenn Du den gesamten manuellen Code weglässt, sollte es eigentlich alleine richtig klappen mit der Anordnung.
    Hmm. Die Bildunterschrift kursiv, linksbündig zum Bild ausgerichtet und der Abstand der Bildunterschrift war die allererste Aufgabenstellung. So entstand dieser manuelle Codeschnipsel.
    Nehme ich alles raus, bliebe dieses Problem wieder ungelöst.

  8. #8
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.580
    Probiere es mal damit, ohne den restlichen Code.
    Code:
    .gallery-item {
        font-style: italic;
        line-height: 1em;
        text-align: left !important;
    }
    .gallery {
        margin-bottom: 1em !important;
    }
    Und ohne die leeren Absätze im Beitrag oberhalb und/oder unterhalb der einen oder anderen Gallery.
    Geändert von b3317133 (09.02.2018 um 22:55 Uhr)

  9. #9
    PostRank: 1
    Registriert seit
    03.01.2017
    Beiträge
    20
    Das ist es!!...fast.
    In der Desktop- Ansicht super!
    Schiebt man das Browserfenster aber klein, berühren sich beim responsiven Schrumpfen die Bilder wieder.
    Das wollte ich seinerzeit auch eliminieren. grmpf.
    Bekommst du da noch im Code einen Abstand zwischen den Bildern hin?
    Ich würde ja was probieren, aber bin unsicher und mag natürlich auch die Seite nicht kicken, wenn du selbst etwas im Code nachschauen magst.

  10. #10
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.580
    Code:
    .gallery-item {
        font-style: italic;
        line-height: 1em;
        text-align: left !important;
        padding-right: 2%;
        box-sizing: border-box;
    }
    .gallery {
        margin-bottom: 1em !important;
    }
    Und das wars dann mit dem CSS-Kurs, mehr dazu siehe Suchmaschine Deiner Wahl...

Seite 1 von 2 12 LetzteLetzte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •