Darstellung der Artikel im Frontend

Thema wurde von Ela, 29. Februar 2016 erstellt.

  1. Ela

    Ela Erfahrener Benutzer

    Registriert seit:
    22. Mai 2012
    Beiträge:
    57
    Danke erhalten:
    0
    Danke vergeben:
    41
    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:
    33.596
    Danke erhalten:
    10.426
    Danke vergeben:
    1.498
    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. 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