Galerie: unerwünschter Zeilenumbruch nach jedem Bild
Hallo,
ich habe folgendes Problem mit der Galerie und konnte trotz langer Suche keine Lösung finden.
Es wurde eine Galerie mit 3 Bildern angelegt, Breite 150px, 3 Bilder in einer Reihe.
Resultat:
Alle Bilder erscheinen zwar in 150px, jedoch untereinander bei sichtbarem Aufzählungszeichen.
Das Aufzählungszeichen habe ich nun für "ce_gallery ul" unterdrückt, dennoch erscheinen die Bilder untereinander.
An der Seitenbreite kann es nicht liegen, wie unterdrücke ich nun den Zeilenumbruch?
Contao V. 3.2.7.
Der Quellcode sieht OK aus:
PHP-Code:
<div class="ce_gallery block">
<h2>2013</h2>
<ul>
<li class="row_0 row_first even col_0 col_first">
<figure class="image_container">
<a href="files/zertifikate/2013-05-20.jpg" data-lightbox="lb3321" title="2013-05-20"><img src="assets/images/b/2013-05-20-aea961ab.jpg" width="150" height="233" alt="2013-05-20"></a>
</figure>
</li>
<li class="row_0 row_first even col_1">
<figure class="image_container">
<a href="files/zertifikate/2013-11-11.jpg" data-lightbox="lb3321" title="2013-11-11"><img src="assets/images/a/2013-11-11-398ec27a.jpg" width="150" height="208" alt="2013-11-11"></a>
</figure>
</li>
<li class="row_0 row_first even col_2 col_last">
<figure class="image_container">
<a href="files/zertifikate/2013-11-13.jpg" data-lightbox="lb3321" title="2013-11-13"><img src="assets/images/8/2013-11-13-8c106738.jpg" width="150" height="233" alt="2013-11-13"></a>
</figure>
</li>
<li class="row_1 row_last odd col_0 col_first">
<figure class="image_container">
<a href="files/zertifikate/2013-11-15.jpg" data-lightbox="lb3321" title="2013-11-15"><img src="assets/images/e/2013-11-15-e2f5900e.jpg" width="150" height="208" alt="2013-11-15"></a>
</figure>
</li>
</ul>
</div>
Auch ansonsten ist für gallery nichts im CSS definiert.
Danke vorab für Eure Hilfe! :)
LG
CSS-Trickkiste anschmeißen
Also, da du ein Listenelement im Template ausgibst, werden die einzelnen Bilder natürlich als Listenelemente untereinander dargestellt. Was du brauchst wären CSS-Einstellungen um das generelle margin und padding der Hauptliste "ul" zu unterdrücken. Anschließend müsstest du die Listenelemente "li" noch floaten. Das kannst du entweder über "float:left" machen, oder aber über "display:inline-block". Somit erzwingst du die Darstellung in der Horizontalebene, wenn entsprechende weitere Kriterien wie korrektes margin, standardisierte Elementhöhen etc. eingehalten sind.
Hoffe das hilft dir ein wenig.
Beste Grüße
