NextGen Galerie mit Text Darstellungsfehler-Thumbs in einer Reihe

elotse

Ich verwende als Galerie NextGen Gallery 0.9
Bei der Galeriedarstellung zusammen mit Beschreibungstexten werden die Thumbnails bei unterschiedlicher Beschreibungslänge nicht in einer Zeile dargestellt! Beispiel siehe hier..
Da ich den Fehler in der CSS suche habe ich die verschiedenen Klassen mit farbigem Rahmen versehen.
Der zugehörige CSS Code:

PHP

/* ----------- Gallery style -------------*/
 
 
.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}
.ngg-gallery-thumbnail-box {
float: left;
border: 1px solid #FF0033;
}
.ngg-gallery-thumbnail {
float: left;
margin-right: 5px;
border: 1px solid #FFFF00;
}
.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block; 
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
border: 1px solid #FFCC00;
}
.ngg-gallery-thumbnail img:hover {
background-color: #A9A9A9;
} 
.ngg-gallery-thumbnail span {
/* Images description */
font-size:90%;
padding-left:5px;
display:block;
border: 1px solid #00CC00;
}
.ngg-clear {
clear: both;
}

Alles anzeigen

Ich denke CSS Freaks sehen den Fehler schnell!
Zusätzlich sind die Minibilder auch noch ungleich wie der Text -->verschoben nach rechts!

Ohne diese Lösung macht diese Art der Galeriedarstellung keinen Sinn. Es könnten nur Bilder ohne Text verwendet werden!
Anmerkung: bei Alex Rabe bin ich mit dem CSS Problem nicht weiter gekommen.

Werbepost

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

Monika

die einzelnen Boxen die das Bild und den Text umfließen brauchen eine fixe Höhe,

also wenn da nichts rund um Bild und Text ist -geht das nicht browserübergreifend

(da sind ja eh divs für mehr als eine DIv Suppe ;))

da der Text ja nicht immer gleich ist löse ich dies so , dass ich den Textbereich ein
overflow:hidden mitgebe, dann wird zwar zuviel Text unsichtbar, aber das Design bricht nicht und meist schreibt man ja eh keine Romane unters Bild,

oder man nimmt in kauf, dass manche Bilder eben mehr whitespace unten haben als andere

wie in einer echten Gallerie wo die Bilder zwar oben eine Linie bilden aber nicht unten

eine Lösung von mir kannst Du Dir hier ansehen,

auch *abkupfern* erlaubt ;)

ist zwar keine Gallerie aber es geht Dir ja nur um das CSS

lg

sabbatrad

Hallo,

ich habe deine Antwort gelesen und mir auch deine Seite angesehen. Ich habe das gleiche Problem, ich möchte die Galerien in einer Zeile darstellen.

Ich habe aber nicht verstanden wie das geht. Kannst du mir nen Tip geben?

Sabbatrad

Monika

Hi

Du musst alles was von der Überschrift bis unten geht in ein div geben und dies floaten

sieh Dir mal den Quelltext an, ich weiß nicht wie man bei der Gallerie auch die Überschrift in ein div bekommt

und dieses extra div das leere, das die floats auflöst löschen

lg

elotse

Bei meinem ersten Code hatte ich einen Fehler, das DIV für die gesamte Galerie hat gefehlt (blauer Rahmen).:oops:
Ich habe nun einiges versucht, komme aber nicht weiter!!!

Hier der richtige Code:

PHP

/* ----------- Gallery style -------------*/
.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width: 100%;
clear: both; 
display: block !important;
border: 1px solid #0000FF;
}
.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}
.ngg-gallery-thumbnail-box {
float: left;
border: 1px solid #FF0033;
}
.ngg-gallery-thumbnail {
float: left;
margin-right: 5px;
border: 1px solid #FFFF00;
}
.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block; 
margin: 4px 0px 4px 5px;
padding: 4px;
position:relative;
}
.ngg-gallery-thumbnail img:hover {
background-color: #A9A9A9;
} 
.ngg-gallery-thumbnail span {
/* Images description */
font-size: 90%;
padding-left: 5px;
padding-top: 5px;
display: block;
border: 1px solid #00CC00;
}
.ngg-clear {
clear: both;
}

Alles anzeigen

Das Problem liegt an der variablen Höhe von ngg-gallery-thumbnail-box. Da ich hier schon float: left verwende ist mir nicht klar wie weiter.

Ich denke auf das Thema werden kurz oder lang alle Anwender von NextGen Gallery kommen sobald sie Beschreibungstexte einsetzen!
Hier nochmals der Link zu der Testseite

Monika

Du gibst ihr einfach die höchste Höhe,

Bilder in eienr Reihe bedeutet ja nur, dass die obere Zeile in einer Höhe sein sollte

der Text fängt dann auch wieder in einer Reihe an...schlimmstenfalls sind die hochgestellten Bilder wesentlich schmaler als die breiten

lg

elotse

Ja, ich glaube dies ist eine brauchbare Lösung. Ich habe den Div für das Textfeld mit einer min-height versehen.:)

PHP

.ngg-gallery-thumbnail span {
/* Images description */
font-size: 90%;
padding-left: 5px;
min-height: 58px;
display: block;
border: 0px solid #00CC00;

Vielen Dank

Willkommen! Melden Sie sich an oder registrieren Sie sich.

NextGen Galerie mit Text Darstellungsfehler-Thumbs in einer Reihe

Jetzt mitmachen!