Zweiteilige Boxen

  • Hallo zusammen,


    ich möchte Boxen (oder Kacheln) erstellen die aus zwei Teilen bestehen sollen. Oben der Teil für die Überschrift in einer Farbe, und unten der Teil für die Bezeichnung in einer anderen Farbe. Beide Teile sollen gleich groß sein, und stets miteinander verbunden bleiben (z.B. bei Browserverkleinerung oder auf mobilen Geräten). Es sollen je nach Produktseite unterschiedlich viele Boxen sein. Diese sollen soweit wie möglich nebeneinander angezeigt werden.


    Anbei ein Bild das 6 Boxen zeigt wie sie später ungefähr aussehen sollen.



    Wie soll ich am besten vorgehen. Soll ich für jede Box ein Div verwenden, soll ich eine Tabelle verwenden? Ich wäre für eine erste Vorgehensweise sehr dankbar. Ich verlange jetzt keinen kompletten Quellcode sondern nur eine optimale Vorgehensweise die ich dann nach und nach erarbeite.


    LG,
    Roubianer

  • Hallo


    Eine Tabelle wäre sachlich falsch.


    div-Elemente sollen nur noch verwendet werden wenn es keine geeigneteren Container gibt. Ich sehe hier eher section-Elemente.


    Das Aussehen dann per CSS, am sinnvollsten mit Flexbox oder CSS-Grid. Wobei die Höhe vom Inhalt abhängen sollte. Wenn eine bestimmte Höhe gewünscht wird solltest du darauf achten den Containern entprechend gleichmäßigen Inhalt zu geben.


    Gruss


    MrMurphy

  • Hallo MrMurphy,


    vielen Dank für den ersten Ansatz. Das Höhen- und Breitenverhältnis des in dem Fall weißen und blauen Teil soll immer gleich groß bleiben. Meinst du mit gleichmäßigen Inhalt den Text der darin enthalten ist? Falls ja wird das in meinem Fall nicht klappen da die Boxen immer unterschiedlich viel Text enthalten werden. Ist damit dein Lösungsansatz immer noch der gleiche?


    Gruß,
    Roubianer

  • Warum soll denn die Überschriftenbox immer genauso hoch sein wie die Inhaltsbox?
    Hier mal ein simple Beispiel.

  • Hallo


    Der Quelltext einer Webseite hängt von deren Inhalt ab.


    Von deinem Inhalt wissen wir leider noch überhaupt nichts. Besteht die Überschrift aus einem oder mehreren Worten? Die Beschreibung aus einem oder mehreren Sätzen? Sollen Grafiken eingeführt werden? Stehen die Inhalte in einem Zusammenhang?


    Zitat

    Bei unterschiedlich hohen Überschriftenboxen würde es ziemlich komisch aussehen.


    Das ist eine typische, aber unbegründete, Anfängerangst. Am besten auch noch alles zentriert ohne Ende.


    Die wollen immer alles gleichförmig halten und wundern sich dann, warum ihre Seiten amateurhaft und langweilig wirken.


    Deshalb gibt es für solche Wünsche auch im HTML / CSS keine direkte Lösung.


    Frage: Hast du schon mal geschockt und entsetzt eine Webseite ohne sie zu lesen verlassen, weil Überschriften und Beschreibung nicht gleichmäßig waren? Oder nimmst du im Gegenteil solche Ungleichmäßigkeiten wie die meisten von uns überhaupt nicht wahr? Weil sie überhaupt keine Rolle spielen?


    Ich habe mal eine Lösung erstellt, mit der ich mich anfreunden kann.


    Die Überschriften und Beschreibungen einer Zeile sind jeweils gleich hoch. Die Überschriften sind jeweils ein h2-Element, die Beschreibungen (da nur aus einem Satz bestehend) sind jeweils ein p-Element. Da alle h-Elemente jeweils einen neuen Abschnitt einleiten sind weitere Container überflüssig und sollten nach den HTML5-Regeln auch nicht verwendet werden. Es gibt nur ein umfassendes article-Element.



    Bei anderen Inhalten (zum Beispiel zusätzlichen Bildern) wären andere Lösungen sinnvoller.


    Beispieldatei


    Gruss


    MrMurphy