Abstand zwischen Bilder einer Galerie

**00Snider** · 19.12.2012, 21:03

Hallo Zusammen,

ich bin ein Neuling was Contao betrifft. Habe das Buch "Websites erstellen mit Conto" beinahe vollständig durchgearbeitet und bin jetzt dabei mein eigentliches Projekt umzusetzen.

Meine Site ist also noch sehr jungfräulich und ich möchte zunächst ein paar Inhalte erstellen bevor ich diese dann per CSS schön formatiere.

Beim einfügen einer Galerie habe ich aber das Problem, dass die Bilder alle einen sehr großen Abstand zueinander haben, den ich mir nicht erklären kann. Habe die Galerie im CSS noch nicht formatiert und ich bekomme die Abstände nicht über die Einstellungen im Galerie-Element in den Griff.

Ich habe mal einen Screenshot angehängt. Bildbreite ist 100 und proportional; Bildabstand ist nicht eingestellt. Rechts habe ich im Layout eine Spalte mit 180 px definiert.

Und hier noch der Code für den entsprechenden Teil.

HTML-Code:

<h1>Frühstück bei Manne</h1>

<p class="info">10-01-16</p>

<div class="ce_text block">
 
</div>

</div>

<div class="event layout_full block bygone">

<h1>Grillen bei Benni</h1>

<p class="info">04-05-28</p>

<div class="ce_gallery block">

<ul>
  <li class="col_0 col_first">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto01.jpg" data-lightbox="lb8" title="foto01"><img src="assets/images/4/foto01-a32e1a94.jpg" width="100" height="133" alt="foto01"></a>
  </figure>
  </li>
  <li class="col_1">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto02.jpg" data-lightbox="lb8" title="foto02"><img src="assets/images/f/foto02-b5d3c39f.jpg" width="100" height="75" alt="foto02"></a>
  </figure>
  </li>
  <li class="col_2">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto03.jpg" data-lightbox="lb8" title="foto03"><img src="assets/images/9/foto03-f0ecfef9.jpg" width="100" height="75" alt="foto03"></a>
  </figure>
  </li>
  <li class="col_3 col_last">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto04.jpg" data-lightbox="lb8" title="foto04"><img src="assets/images/6/foto04-36223f06.jpg" width="100" height="75" alt="foto04"></a>
  </figure>
  </li>
  <li class="col_0 col_first">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto05.jpg" data-lightbox="lb8" title="foto05"><img src="assets/images/d/foto05-e38f8c0d.jpg" width="100" height="75" alt="foto05"></a>
  </figure>
  </li>
  <li class="col_1">
  <figure class="image_container">
    <a href="files/fuenf_maenner/Bilder/foto06.jpg" data-lightbox="lb8" title="foto06"><img src="assets/images/2/foto06-f3e1ea12.jpg" width="100" height="75" alt="foto06"></a>
  </figure>
  </li>
</ul>

</div>

Falls noch weitere Infos benötigt werden, teile ich die selbstverständlich mit.

Wäre super, wenn mir jemand helfen könnte, wie ich die Abstände zwischen den Bildern weg bekomme.

Viele Dank!

**Dirch** · 19.12.2012, 21:13

Heho,

das liegt am "figure". Da machen die Browser standardmäßig unendlich viel Rand drumherum. Wenn du das CSS-Reset-Style-Sheet einfügst geht das weg oder wenn du es nicht einbindest setze figure { margin: 0; padding: 0; }

Grüße...
...Dirk

**00Snider** · 19.12.2012, 21:36

Hey Dirk,

vielen Dank! Hat funktioniert! Hab das Reset-Stylesheet von der Contao-Homepage importiert. Jetzt noch eine Frage: Dort sind ja einige Sachen definiert bzw. zurückgesetzt. Wenn ich jetzt z.B. Überschriften selbst formatieren will, muss ich die "Zurücksetzung" im Reset-Stylesheet rausnehmen?

Danke

**Dirch** · 19.12.2012, 21:45

Ah du benutzt noch kein Contao 3? Da ist das Redet-CSS mit dabei und muß im Layout nur angehakt werden.

Nein du nimmst aus dem Style-Sheet nichts raus. Das Reset-CSS setzt einfach global die Elemente alle auf gleiche Werte, so daß es keine Rolle spielt welchen Browser man vor sich hat. Jeder braut da sein eigenes Süppchen und durch diesen Reset wird das ausgeglichen.

Du formatierst ganz normal deine Elemente.

Beispiel warum man so einen Reset benutzt:

Browser A setzt Font-Größe auf 16px, Browser B von 14px. Also würde es ohne Formatierung deinerseits unterschiedlich aussehen. Also formatierst du es oder benutzt ein Reset-Style-Sheet, daß es global auf z.B. 16px setzt. Das gilt dann bei allen Browsern und du brauchst dann manchmal nichts extra zu formatieren.