Zusatzfotos auf der Produktseite

[Sascha296]

Hallo liebe Gemeinde,

ich habe ein Problem mit den Zusatzfotos auf der Produktdetailseite.

Diese werden Standartmäßig untereinander angezeigt. ich möchte diese jedoch nebeneinander anzeigen lassen.

Eine Veränderung des Codes und der Stylesheet.css brachte keine Veränderung.

Das Codesekment der product.html sieht wie folgt aus:

<div class="more-images">

<ul>

<p class="more-images-item"><span><a href="{img img=$products_image type=m_org path_only=true}" class="cloud-zoom-gallery" rel="useZoom: 'zoom', smallImage: '{img img=$products_image type=m_info path_only=false}'"><img src="{img img=$products_image type=m_smallproduct alt="{$products_name path_only=false}" alt="{$products_name|escape:"html"}" /></a></span></p>

{foreach name=aussen item=img_data from=$more_images}

<li class="more-images-item"><span><a href='{img img=$img_data.file type=m_org path_only=true}' class='cloud-zoom-gallery' rel="useZoom: 'zoom', smallImage: '{img img=$img_data.file type=m_info path_only=true}'"><img src="{img img=$img_data.file type=m_smallproduct path_only=true}" alt="{if $img_data.data.media_name == ''}{$products_name|escape:"html"}{else}{$img_data.data.media_name|escape:"html"}{/if}" /></a></span></li>

{/foreach}

</ul>

</div><!-- .more-images -->

und die dazugehörige Stylesheet.css:

#product-images .more-images {

overflow: hidden;

}

#product-images .more-images .more-images-item {

border: 1px solid #cdcdcd;

text-align: center;

display: table-row;

float: left;

margin: 0 10px 10px 0;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#product-images .more-images .more-images-item:nth-child(3n) {

margin: 0 0 10px 0;

}

#product-images .more-images .more-images-item span {

display: table-row;

width: 25px;

height: 25px;

vertical-align: middle;

}

Hat jemand von euch evtl. eine Idee wie dies bewerkstelligt werden kann?

Alle gemachten Änderungen hatten bislang keinen Effekt.

Grüße

Sascha