Bilder in Galerie horizontal zentrieren
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
Gleiches Problem, wer kann helfen?
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
