Bilder schließen nicht bündig ab

[LeoStore]

Hallo zusammen,

ich habe ein Problem mit der Bilddarstellung.

Sobald die Produktbeschreibung zweizeilig ist, fangen meine Bilder an zu hüpfen und schließen nicht auf einer Linie ab.
Wie im angehängten Beispiel zu sehen. Wie bekomme ich es hin, dass die Bilder immer auf der selben Höhe sind?

Ich hoffe, jemand kann mir helfen.
Danke im Voraus!

Viele Grüße
LeoStore

http://test-leo.de/

 

[XYZ]

AW: Bilder schließen nicht bündig ab

Seht man doch bereits, woran es liegt, zu lange Artikelnamen drücken einige Bilder nach unten. Also entweder in der entspr. CSS einrichten, dass die Bilder anhand des Bodens (Bottom) ausgerichtet werden, dem Shop komplett eine größere Breite geben oder die Artikelnamen nach X Zeichen abschneiden lassen.

 

[LeoStore]

AW: Bilder schließen nicht bündig ab

Hallo,

kannst du mir auch sagen, welche css-Datei ich dazu bearbeiten muss?
Ich benutzte das Tiny-Template.

Die Shopbreite lässt sich leider nur sehr schwer ändern.
Vielen Dank für die Antwort!

 

[Miloh]

AW: Bilder schließen nicht bündig ab

.styled_view li.gallery h3 {
height: 30px;
}

in deine theme.css

Das sollte die einzeilige an die zweizeilige Bezeichnung anpassen. Wenn nicht, einfach die Höhe mit anderen Werten anpassen.

 

[LeoStore]

AW: Bilder schließen nicht bündig ab

Hat funktioniert.
Tausend Dank an dich!

 

[XYZ]

AW: Bilder schließen nicht bündig ab

Kann ich leider nicht aus dem Kopf sagen, nur, dass ich z.b. bei mir in der suche_liste.tpl die Artikelnamen unters Bild verschoben habe, so werden die Bilder immer obenbündig pro Reihe dargestellt:

Von so:

<script type="text/javascript" src="{$PFAD_ART_ABNAHMEINTERVALL}artikel_abnahmeintervall.js"></script>
<ul class="styled_view">
{$Suchergebnisse->Fehler}
{foreach name=artikel from=$Suchergebnisse->Artikel->elemente item=Artikel}
<li class="{$style}">
   <div class="article_wrapper">
[COLOR=#ff0000]      <h3>
         <a href="{$Artikel->cURL}">{$Artikel->cName}</a>
      </h3>[/COLOR]
      
      {if isset($Artikel->fDurchschnittsBewertung) && $Artikel->fDurchschnittsBewertung > 0}
         <span class="stars p{$Artikel->fDurchschnittsBewertung|replace:'.':'_'}"></span>
      {/if}
       
      <!-- image -->
      <div class="article_image">
         <div class="image_overlay_wrapper" id="image_drag_article{$Artikel->kArtikel}">
            <div class="image_overlay" id="overlay{$Artikel->kArtikel}"></div>
            <a href="{$Artikel->cURL}" {if $Einstellungen.template.articleoverview.article_image_preview == 'Y'}class="image_preview"{/if} ref="{$Artikel->Bilder[0]->cPfadNormal}">
               {counter assign=imgcounter print=0}
               <img src="{$Artikel->cVorschaubild}" alt="{$Artikel->Bilder[0]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}" class="image" />
            </a>
            {if isset($Artikel->oSuchspecialBild)}
               <script type="text/javascript">
                  set_overlay('#image{$Artikel->kArtikel}_{$imgcounter}', '{$Artikel->oSuchspecialBild->nPosition}', '{$Artikel->oSuchspecialBild->nMargin}', '{$Artikel->oSuchspecialBild->cPfadKlein}');
               </script>
            {/if}
         </div>
      </div>

nach so:

<script type="text/javascript" src="{$PFAD_ART_ABNAHMEINTERVALL}artikel_abnahmeintervall.js"></script>
<ul class="styled_view">
{$Suchergebnisse->Fehler}
{foreach name=artikel from=$Suchergebnisse->Artikel->elemente item=Artikel}
<li class="{$style}">
   <div class="article_wrapper">    
      {if isset($Artikel->fDurchschnittsBewertung) && $Artikel->fDurchschnittsBewertung > 0}
         <span class="stars p{$Artikel->fDurchschnittsBewertung|replace:'.':'_'}"></span>
      {/if}
       
      <!-- image -->
      <div class="article_image">
         <div class="image_overlay_wrapper" id="image_drag_article{$Artikel->kArtikel}">
            <div class="image_overlay" id="overlay{$Artikel->kArtikel}"></div>
            <a href="{$Artikel->cURL}" {if $Einstellungen.template.articleoverview.article_image_preview == 'Y'}class="image_preview"{/if} ref="{$Artikel->Bilder[0]->cPfadNormal}">
               {counter assign=imgcounter print=0}
               <img src="{$Artikel->cVorschaubild}" alt="{$Artikel->Bilder[0]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}" class="image" />
            </a>
            {if isset($Artikel->oSuchspecialBild)}
               <script type="text/javascript">
                  set_overlay('#image{$Artikel->kArtikel}_{$imgcounter}', '{$Artikel->oSuchspecialBild->nPosition}', '{$Artikel->oSuchspecialBild->nMargin}', '{$Artikel->oSuchspecialBild->cPfadKlein}');
               </script>
            {/if}
[COLOR=#ff0000]      <h3>
         <a href="{$Artikel->cURL}">{$Artikel->cName}</a>
      </h3>[/COLOR]
         </div>
      </div>

Umsetzung auf eigene Gefahr und für die Änderung bitte die "suche_liste.tpl" vom Server herunterladen, in "suche_liste_custom.tpl" umbenennen und ins gleiche Verzeichniss wieder hochladen, an dieser Datei dann alle Änderungen vornehmen, so sind die Änderungen auch updatesicher. Im Shopadmin muss beim Template "Custom-Dateien verwenden" eingestellt sein. Gleiches gilt für alle anderen .tpl Dateien, an den Änderungen vorgenommen werden.

Und übrigens, evtl. kennen wir uns, Ihr wart vor einigen Jahren mal bei mir im alten Laden in Berlin... 😉

 

[julesue]

AW: Bilder schließen nicht bündig ab

Hätte da auch mal ne Frage, wo änder ich im css welche Einstellung, damit mein Bild oben und unten nicht so viel Platz zum Rand hat? Nägel