Zweiteilige Boxen

Roubianer

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

MrMurphy

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

Roubianer

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

djheke

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

HTML

<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
* {
 margin:0;
 padding:0;
}


.flex {
 display: flex;
 justify-content:center;
}




.spalte_33  { flex-basis:33.334%;  margin:10px; background:#eee; border:1px solid #000;}


.spalte_33 h2 {
 background:#aad;
 padding:10px;
}


.spalte_33 p {
  padding:10px;
}
</style>
</head>
 
<body>




 


<div class="flex">
  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat</p>
 </article> 


   <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 
</div>


<div class="flex">
  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 
</div>
</body>
</html>

Alles anzeigen

Roubianer

Hallo,

einfach nur wegen der Optik. Es werden alle Boxen nebeneinander und untereinander angezeigt. Bei unterschiedlich hohen Überschriftenboxen würde es ziemlich komisch aussehen.

Roubianer

Was ist in meinem Fall jetzt ratsamer? article- oder section-Elemente?

Bandit

Eine schöne Beschreibung zu dem Thema http://www.sichtweise.co/blog/artikel/h…le-oder-section

MrMurphy

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.

Code

<article class="uebersicht">
         <h2>Babisnauer Pappel</h2>
         <p>Die Babisnauer Pappel ist eine Schwarz-Pappel (Populus nigra) bei Babisnau, einem Ortsteil der Gemeinde Kreischa in Sachsen.</p>
         <h2>Drei Zinnen</h2>
         <p>Die Drei Zinnen (italienisch Tre Cime di Lavaredo) sind ein markanter Gebirgsstock in den Sextner Dolomiten an der Grenze zwischen den italienischen Provinzen Belluno im Süden und Südtirol im Norden.</p>
         <h2>Ur- und frühgeschichtliche Sammlung der Universität Jena</h2>
         <p>Die Ur- und Frühgeschichtliche Sammlung der Universität Jena bildet eine der ältesten und größten ihrer Art im Besitz einer deutschen Universität. Sie dient in erster Linie als Lehr- und Studiensammlung für Studenten und Fachleute.</p>
         <h2>North York Moors</h2>
         <p>Die North York Moors sind eine Hochebene in North Yorkshire im Nordosten Englands.</p>
         <h2>Tiefwerder Wiesen</h2>
         <p>Die Tiefwerder-Wiesen sind ein Rest der ehemaligen Auenlandschaft in der Havel-/Spreetalniederung auf dem Berliner Tiefwerder und im Niederungsbereich der Flusshalbinsel Pichelswerder im Ortsteil Wilhelmstadt des Bezirks Spandau.</p>
         <h2>Kittelsthaler Tropfsteinhöhle</h2>
         <p>Die Kittelsthaler Tropfsteinhöhle ist eine Höhle im Thüringer Wald.</p>
      </article>

Alles anzeigen

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

Beispieldatei

Gruss

MrMurphy

Tags