Verschiedene Kacheln +Button untereinander anzeigen

Thema wurde von Tappzeit, 13. April 2021 erstellt.

  1. Tappzeit

    Tappzeit Erfahrener Benutzer

    Registriert seit:
    5. Mai 2020
    Beiträge:
    168
    Danke erhalten:
    6
    Danke vergeben:
    68
    Hallo zusammen,

    ich möchte gerne bei meinem Shop untereinander verschiedene Kacheln anzeigen lassen. So als schnelle Übersicht. Damit der Kunde direkt anklicken kann nach was er sucht.

    Unter anderem sollen nebeneinander (immer 3) folgende Kategorien dargestellt werden:

    Kachel 1 = Einzelkarten
    Kachel 2 = Booster
    Kachel 3 = Zubehör

    Dann wieder eine Reihe mit
    Kachel 4 = Booster Displays
    Kachel 5 = Bundles
    Kachel 6 = Commander Decks

    In den Kacheln soll jeweils ein Bild sein und dadrunter ein Button "Anzeigen" oder so.
    Wie kann ich das am besten lösen?

    Muss ich dafür in den Styleeditor gehen und in der Sektion auf 25% 25% 25% 25% stellen und dann in den Spalten jeweils ein Bild + Button setzen? Wie kann ich den Button zentrieren?
    Ich habe auch das Problem das ich denn erst wieder in der zweiten Sektion 3 Bilder einfügen kann. Sind 6 Kacheln untereinander nicht möglich?

    upload_2021-4-13_8-49-53.png

    Wieso dort überall Error: Request faild with status code 500 steht weiß ich nicht. Das ist seit dem letzten Update. Verschlimmbessert würde ich sagen :D
    Es funktioniert aber trotzdem ^^
     
  2. Tappzeit

    Tappzeit Erfahrener Benutzer

    Registriert seit:
    5. Mai 2020
    Beiträge:
    168
    Danke erhalten:
    6
    Danke vergeben:
    68
    #2 Tappzeit, 13. April 2021
    Zuletzt bearbeitet: 13. April 2021
    Habe es nun mit den 6 Kacheln doch selber hinbekommen. Nur das Zentrieren des Buttons will mir nicht gelingen :(

    Kann man die Kacheln in der größe irgendwie einheitlich gestalten? So das die größe immer gleich?

    Ich bekomme das irgendwie doch nicht so richtig hin. Im StyleEdit4 habe ich ein HTML Widget angelegt. Dort habe ich 4 Kacheln eingefügt:

    Code:
    <div class="kachel-1">
    <div class="col-xs-12 col-sm-6 col-md-3">
    <img alt="Einzelkarten" class="img-responsive" src="/images/Einzelkarten/m21-1-ugin-the-spirit-dragon.JPG" alt="Einzelkarten"><h3 class="title">Einzelkarten</h3>
    <a href="/de/einzelkarten/" class="btn btn-primary">Mehr Anzeigen</a></div></div>
    
    <div class="kachel-2">
    <div class="col-xs-12 col-sm-6 col-md-3">
    <img alt="Einzelkarten" class="img-responsive" src="/images/Einzelkarten/m21-1-ugin-the-spirit-dragon.JPG" alt="Einzelkarten"><h3 class="title">Einzelkarten</h3>
    <a href="/de/einzelkarten/" class="btn btn-primary">Mehr Anzeigen</a></div></div>
    
    <div class="kachel-3">
    <div class="col-xs-12 col-sm-6 col-md-3">
    <img alt="Einzelkarten" class="img-responsive" src="/images/Einzelkarten/m21-1-ugin-the-spirit-dragon.JPG" alt="Einzelkarten"><h3 class="title">Einzelkarten</h3>
    <a href="/de/einzelkarten/" class="btn btn-primary">Mehr Anzeigen</a></div></div>
    
    <div class="kachel-4">
    <div class="col-xs-12 col-sm-6 col-md-3">
    <img alt="Einzelkarten" class="img-responsive" src="/images/Einzelkarten/m21-1-ugin-the-spirit-dragon.JPG" alt="Einzelkarten"><h3 class="title">Einzelkarten</h3>
    <a href="/de/einzelkarten/" class="btn btn-primary">Mehr Anzeigen</a></div></div>
    Leider wird mir der Button nicht zentriert dargestellt.

    Konnte es mit text-center in der Klasse nun auch selber lösen...
     
  3. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Versuche es mal mit
    <div class="row">
    <div class="kachel-1">....</div>
    <div class="kachel-2">....</div>
    ....
    </div>

    Wenn Du da die 6 Kachekln reinschreibst, und die Bilder die gleiche Größe haben, dann sollte das immer gleich groß dargestellt werden

    Wenn Du die Kacheln nicht unterschiedlich stylen willst, kannst Du das
    <div class="kachel-1">
    <div class="col-xs-12 col-sm-6 col-md-3">

    zusammensetzen:
    HTML:
    <div class="row">
    <div class="kachel col-xs-12 col-sm-6 col-md-3">
    <img alt="Einzelkarten" class="img-responsive" src="/images/Einzelkarten/m21-1-ugin-the-spirit-dragon.JPG" alt="Einzelkarten"><h3 class="title">Einzelkarten</h3>
    <a href="/de/einzelkarten/" class="btn btn-primary">Mehr Anzeigen</a></div>
    .....
    </div>
     
  4. Tappzeit

    Tappzeit Erfahrener Benutzer

    Registriert seit:
    5. Mai 2020
    Beiträge:
    168
    Danke erhalten:
    6
    Danke vergeben:
    68
    Also ich möchte eigentlich nur folgendes erreichen. 4 gleich große Kacheln wo die Bilder (unterschiedliche Größe) auf die Kachelgröße angepasst werden. Im Endeffekt würde ein <div class="kachel">...</div> reichen.
    Nur wie gebe ich dem System vor das die Bilder darauf angpasst werden.
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Mit dem <div class="row"> sagst Du dass die einzelnen Kacheln zusammen gehören.
    Wenn du die Kacheln "lose" setzt, kann es passieren, dass sie nicht nebeneinander, sondern untereinander angezeigt werden.

    Teste das doch einfach mal
     
  6. Tappzeit

    Tappzeit Erfahrener Benutzer

    Registriert seit:
    5. Mai 2020
    Beiträge:
    168
    Danke erhalten:
    6
    Danke vergeben:
    68
    #6 Tappzeit, 13. April 2021
    Zuletzt bearbeitet: 13. April 2021
    Das klappt soweit. Ich kann die Bilder und Buttons / Überschrift nun nach belieben anpassen. Nur wie kann ich die Bilder innerhalb der DIVs in der größe begrenzen? Ich habe halt unterschiedliche Bilder mit unterschiedlichen Größen für Einzelkarten / Zubehör etc. Es wäre halt schön diese über CSS an einen Standard zu definieren.
    Man müsste doch irgendwie mitgeben können das alle Bilder in den DIVS eine maximal größe bekommen. Wenn ich z.B.
    width: 100%; height: auto; benutze hilft mir das ja nicht. Oder müsste ich dann es pro Kachel ansprechen?
    Also :

    kachel-1{
    width: 80%; height: auto;
    }

    kachel-2{
    width: 100%; height: auto;
    }
    etc.?


    Oder muss ich die Bilder die ich verwenden möchte auf eine einheitlich größe bringen?

    row1.PNG
     

    Anhänge:

    • row.PNG
      row.PNG
      Dateigröße:
      351,8 KB
      Aufrufe:
      6
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Mach doch mal die Zahl hinter "Kachel" weg. Dann müsstest Du mit
    .kachel .img{
    max-width:...;
    height: auto;
    }
    den Style für alle Kacheln setzen können.
    Aber
    das wird so nicht viel nützen.
    Angenommen Du hast ein Bild 300px breit und 150px hoch und ein Bild 300px breit und 300bs hoch und noch eins mit 200px breit und 400px hoch.
    Du setzt jetzt die Breite auf maximal 200px, dann ist die Höhe mal 100px, mal 200px und mal 400px und somit sind auch die Kacheln mal 100px kleiner oder 200px höher.
    Du müsstest also die Höhe begrenzen und nciht die Breite und das für die Einzelnen Bidlschirmgrößen - da die Kachelgröße sich mit dem Bildschirm ändern

    Besser wäre, wenn die Bilder gleich groß sind, oder auf einem gleich großen Hintergrund gesetzt werden.
    Es macht auch keinen Sinn Bilder mit 1000px x 1000px zu nehmen, wenn nur 300 - 400pixen angezeigt werden.
    Das ist verschenkte Ladezeit.
     
  8. Tappzeit

    Tappzeit Erfahrener Benutzer

    Registriert seit:
    5. Mai 2020
    Beiträge:
    168
    Danke erhalten:
    6
    Danke vergeben:
    68
    Ja habe ich mir schon fast gedacht. Werde nun die Bilder in einen Rahmen einbetten und die gleiche größe einstellen.
    Danke dir trotzdem!