Bilder in Galerie horizontal zentrieren

**derRenner** · 23.11.2012, 15:04

Hallo,
ich raff's einfach nicht ... jetzt hab ich schon unzählige Hinweise im I-Net durchforstet,
ausprobiert, gelesen, gelernt .... aber ich komm nicht drauf

Also, ich habe mit dem Elementtyp Galerie eine Galerie erstellt. 4 Bilder in 6 Reihen.
Bildbreite mit 150 und einem padding-border von 5px. Plus einem Abstand zwischen
den Bildern von links und rechts je 10px ... also bleibt in Summe nun rechts genügend
Platz frei. Deshalb möchte ich die Galerie zentrieren. Aber genau da scheitere ich.
Ach ja, die Layoutbreite habe ich auf 960px.

hier der HTML-Code

Code:

<div class="mod_article block" id="wkalender">

<h1 class="ce_headline">meineÜberschrift</h1>

<div class="ce_gallery block">

<ul>
  <li class="col_0 col_first">
  <figure class="image_container" style="padding:10px;">
    <a href="files/meineDomain/images/2012/wkalender/wcal_01.png" data-lightbox="lb110" title="wcal 01"><img src="assets/images/a/wcal_01-c38a889a.png" width="150" height="88" alt="wcal 01"></a>
  </figure>
  </li>

und hier das zuletzt ausprobierte CSS

Code:

.ce_gallery { min-height:10px; width:960px;}
.ce_gallery ul { margin:0 auto; text-align:center;}
.ce_gallery li { display:inline-block; margin:0 auto; }
#main .ce_gallery .image_container img { display:block; padding:5px; border:1px solid #8f8f8f; }
#main .ce_gallery img:hover { background:url(images_css/bg_milkglass.png) repeat; }

Ich habe schon 100te Codeschnipsel nach Anweisungen ausprobiert ... komm aber nicht dahinter.
Wahrscheinlich setze ich die Befehle an der falschen Stelle ein - vielleicht kann mir da jemand
einwenig unter die Arme greifen

DANKE schon mal

**qba** · 23.11.2012, 15:16

Hallo derRenner,

wenn ich richtig gerechnet habe, dann ist jedes Bildelement insgesamt 182px breit. ICH würde nun der .ce_gallery folgende Anweisung mitgeben:

Code:

.ce_gallery {
     width: 844px;
     margin-left:116px;
}

Dann müsste die auch zentriert sein. Zumindest optisch. Das .ce_gallery ul { margin:0 auto; text-align:center;} kannste dann streichen

**derRenner** · 23.11.2012, 15:25

Hello qba

DANKE!! auf ein margin-left hätte ich eigentlich selbst auch kommen können ;-)
Manchesmal sieht man wirklich vor lauter Bäumen den Wald nicht mehr ...

**qba** · 23.11.2012, 15:25

Wem sagst Du das?

**Zwergenmeister** · 25.01.2013, 13:24

Hallo,

stehe grade vor dem selben Problem mach eine neue Seite in der ich auch mal verschiedene Galerien einsetzen mochte mal mit 2,3,4,6 .. Fotos in einer Reihe.

Finde nur die Lösung nicht so Praktisch und einfach zu statisch müsste dann für jede Art von Galerie eine Klasse mit margin-left erstellen / und verliere die ganz Flexibilität von Contao.

Wenn ich der ce_gallery ein grid8 gebe habe ich doch eine Feste Größe kann ich nicht einfach dem Inhalt UL ein Center geben ? ()

.ce_gallery ul {text-align:center;}

Was ist der beste weg das nicht statisch mit festen px zu machen ?

VG
Zwergenmeister

**Zwergenmeister** · 25.01.2013, 13:38

Danke schon die Lösung gefunden anderer Thread.

habe dem Inhaltselement Galerie im Backend die klasse .fcenter mit.

.fcenter {
text-align: center;
}

.fcenter ul {
display: inline-block;
margin: 0;
}

**halmsen** · 25.01.2013, 23:11

Zitat von Zwergenmeister

Danke schon die Lösung gefunden anderer Thread.

habe dem Inhaltselement Galerie im Backend die klasse .fcenter mit.

.fcenter {
text-align: center;
}

.fcenter ul {
display: inline-block;
margin: 0;
}

Dieses Zentrierung-CSS kommt mir sehr gelegen für die Zentrierung meiner Galerien in Contao-Installationen. DANKE.

**mtbler999** · 04.09.2015, 21:16

Ich hab das gleiche Problem wie der Zwergenmeister.
Nur leider klappt es bei mir mit dem .fcenter nicht.
da ändert sich bei mir nichts.
Hat noch jemand eine andere Lösung?

Danke
mfg
Manfred

**Spooky** · 04.09.2015, 21:54

Link zur Seite?

**mtbler999** · 04.09.2015, 21:59

http://www.jeans-o-thek.de/grid-test.html

**Spooky** · 04.09.2015, 22:07

Zitat von mtbler999

http://www.jeans-o-thek.de/grid-test.html

Hier gibt es nichts zu zentrieren, weil das <img> Element schon den kompletten verfügbaren Platz von <figure> und <li> ausfüllt. Und zwar deshalb, weil du einfach

PHP-Code:


.ce_gallery > ul li {

    float: left;

}

gemacht hast, ohne Größenangabe. Daher wird die Größe des <li> von der Größe des Inhalts bestimmt, also von der Größe des <img>.

**mtbler999** · 04.09.2015, 22:26

wenn ich die Bilder kleiner mach, hab ich immer noch das Problem.
Ich hab eig. auch niergendwo ein float left gemacht.

**Spooky** · 04.09.2015, 23:10

Zitat von mtbler999

wenn ich die Bilder kleiner mach, hab ich immer noch das Problem.

Weil das auch nichts ändert, siehe meine Erklärung.

Zitat von mtbler999

Ich hab eig. auch niergendwo ein float left gemacht.

Das von mir gepostete CSS auf deiner Seite kommt vom Contao CSS Framework.

**mtbler999** · 07.09.2015, 04:41

darf ich dieses CSS Framework dann bearbeiten?
Wenn ja wo finde ich es?
Oder gibt es noch eine andere Möglichkeit wie ich die Bilder zentrieren kann?

**Spooky** · 07.09.2015, 07:03

Bearbeiten solltest du es nicht, wenn dann mit eigenen Definitionen überschreiben. Ich würde aber an deiner Stelle die Bildgröße so einstellen, dass die Bilder exakt in eine Zeile passen.

**mtbler999** · 07.09.2015, 07:24

Es werden immer mehr bildergalerien mit unterschiedlicher Anzahl Bildern pro Zeile, deshalb hätte ich es gerne über css gelöst um nicht immer die Bildgrösse anpassen zu müssen. Eigene Definition hab ich schon einiges probiert, hat leider noch nicht geklappt. Hast du eine Lösung für mich wie das css aussehen muß?

**Spooky** · 07.09.2015, 08:52

Du könntest den <li> je nach row Klasse des <ul> (welche bei dir fehlt, lässt sich aber einfach nachrüsten) eine prozentuelle Breite geben und dann die Bilder innerhalb des <li> zentrieren lassen (entweder per margin:auto; oder text-align:center;).

**mtbler999** · 07.09.2015, 21:17

Leider weiß ich nicht wie ich eine row klasse nachrüste. Magst du mir das auch noch sagen? Danke schon mal.

**Spooky** · 07.09.2015, 21:36

Das kannst du dir vom aktuellen gallery_default Template kopieren. Erzeuge dein eigenes gallery_default Template und ersetze

PHP-Code:


<ul>

mit

PHP-Code:


<ul class="cols_<?php echo $this->perRow ?>">

**Djamila** · 12.10.2015, 17:06

Hallo,

ich habe genau bei contao 3.5.2 das gleiche Problem und den Beitrag hier genau durchgelesen und versucht umzusetzen, aber es klappt einfach nicht.

Link zur Seite: www.of-dance.com und dort unten auf der Seite

Mein Template sieht wie folgt aus:

HTML-Code:

<ul class="cols_<?php echo $this->perRow ?>">
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="img-responsive <?php echo $class; ?> <?php echo $col->class; ?>">
          <figure class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img class="img-responsive" src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"></a>
            <?php else: ?>
              <img class="img-responsive" src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>">
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption" style="width:<?php echo $col->arrSize[0]; ?>px"><?php echo $col->caption; ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

Kann mir jemand helfen?

Herzliche Grüsse
Djamila

**derRenner** · 12.10.2015, 17:16

Hallo,

nimm dem .container die 100% Breite und gib ihm stattdessen z.B. 80% ...

Code:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;

**Djamila** · 12.10.2015, 17:29

Vielen Dank für den Hinweis, aber ich weiß leider nicht, WO ich das einfüge? In den Code vom Template? An welche Stelle?

Sorry, ich arbeite mich gerade erst in contao ein und verstehe vieles noch nicht.

Herzliche Grüsse
Djamila

**Andreas** · 12.10.2015, 22:47

Sorry, aber die Antwort von derRenner finde ich jetzt wirklich nicht gut, weil du damit ja dein ganzes Full-Width-Layout zerschießt.

Am einfachsten und flexibelsten, ohne Templateanpassung, ist das hier (oben schon erwähnt):

HTML-Code:

.ce_gallery ul {
  text-align: center;
}
.ce_gallery li {
  display: inline-block;
  float: none; /* bzw. das gesetzte float:left; entfernen */
}

Es gibt so viele Arten, wie du dein CSS ins FE bringst und es ist auch schon so viel darüber geschrieben worden. Einfach mal suchen. Oder, es sieht ja so aus, als hättest du da ein Template erworben, den Anbieter fragen. Meistens haben die eine custom.css dabei, in welche du deine Änderungen einträgst.

**Djamila** · 13.10.2015, 05:57

Hallo Andreas,

vielen Dank, genau das habe ich gesucht! Ja, ich habe ein gekauftes Design, da ist es manchmal sehr mühsam, herauszufinden wo welche CSS Angaben gemacht wurden.
So konnte ich gezielt danach suchen und es ändern - perfekt!

Herzliche Grüsse
Djamila

**Andreas** · 13.10.2015, 22:42

Schön, dass du es gefunden hast, aber ich würde dir empfehlen, die CSS-Dateien von dem Template nicht zu verändern, damit du auch mal updaten kannst. Suche mal nach einer custom.ccs, die du zum Überschreiben des Template-CSS benutzen kannst. Kannst natürlich auch selber eine anlegen.