Darstellung der Artikel im Frontend

Thema wurde von H&T, 29. Februar 2016 erstellt.

  1. H&T

    H&T Erfahrener Benutzer

    Registriert seit:
    22. Mai 2012
    Beiträge:
    59
    Danke erhalten:
    0
    Danke vergeben:
    42
    #1 H&T, 29. Februar 2016
    Hallo,

    ich bin gerade dabei in unserem Shop die Darstellung der Artikel zu verändern. Läuft auch soweit ganz gut, aber nun sind meine Boxen in der gekachelten Ansicht alle leicht verstezt. (siehe Bild) Könnte mir vielleicht jemand sagen was ich falsch gemacht habe?:confused: Im CSS Editor habe ich folgendes eingegeben:

    background-color: #fff;
    background-image: url(backgrounds/article-item-bg.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
    border-color: #5e5956;
    border-position: center;
    border-radius: 12px 12px 12px 12px;
    border-style: solid;
    border-width: 0.5px;
    display: inline-block;
    float: center;
    height: 300px;
    width: 200px;

    Auch habe ich das Problem, wenn ich margin Werte einfüge, dass diese nicht drin bleiben.

    Sind die Boxen evtl. so versetzte wegen der unterschiedlich großen Bilder? wenn ja, gibt es eine Möglichkeit die Bilder in den Boxen zurecht zu schneiden, so dass sie alle gleich groß sind? Das würde mir viel Zeit ersparen wenn ich sie nicht alle nochmal bearbeiten und neu hoch laden müsste, da es ca. 2000 Bilder sind.

    In den Bild-Optionen habe ich schon die Größen geändert bei Thumbnails und ein Imageprocessing durchgeführt, aber es hat sich nichts geändert.


    Ich habe auch nach den Änderungen immer den Cache sowohl im Shop als auch im Browser geleert.


    Bin auf diesem Gebiet leider nicht sehr erfahren, deswegen würde ich mich über "einfach" erklärte Antworten sehr freuen. :eek:
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    #2 barbara, 29. Februar 2016
    Hallo,

    das die boxen unterschiedlich sind kann mehrere Ursachen haben.
    Bilder sind oft das Problem. Wenn Du mal genau hinsiehst, sind die Bilder gleich hoch, aber nicht gleich breit.
    Der Shop vergibt ein "max-height" um eine Maximale Höhe zu haben, Du brauchst aber auch ein "max-width" um bei einigen Bildern die Breite zu begrenzen.
    Code:
    .article-list.cols .article-list-item-image {
    height: Deine px;
    width: Deine px;
    Dann hast Du unterschiedlich lange Titel, mal 2 Zeilen, mal 4 Zeilen - auch dass kann eine Ursache sein.
     
  3. michael76

    michael76

    #3 michael76, 29. Februar 2016
    Damit das sauber ausschaut würde Ich dir wie auch Barbara raten alle Bilder auf die gleiche Größe zu bringen. Die Textlänge ist eben so zu beachten. Hier muss in der Kachelansicht alles exakt gleich sein sonst wird das nichts.

    Gruß Micha