Ergebnis 1 bis 8 von 8

Thema: Zweiteilige Boxen

  1. #1
    HTML Newbie
    Registriert seit
    09.03.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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.

    beispiel_kacheln.jpg

    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

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Zweiteilige Boxen

    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

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    09.03.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zweiteilige Boxen

    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

  5. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Zweiteilige Boxen

    Warum soll denn die Überschriftenbox immer genauso hoch sein wie die Inhaltsbox?
    Hier mal ein simple Beispiel.
    Code:
    <!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>
    Geändert von djheke (07.12.2017 um 17:46 Uhr)

  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.03.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zweiteilige Boxen

    Hallo,

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

  7. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    09.03.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zweiteilige Boxen

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

  8. #7
    Meister(in)
    Registriert seit
    24.10.2016
    Beiträge
    356
    Danke
    0
    Bekam 31 mal "Danke" in 30 Postings

    Standard AW: Zweiteilige Boxen

    Eine schöne Beschreibung zu dem Thema http://www.sichtweise.co/blog/artike...e-oder-section

  9. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Zweiteilige Boxen

    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?

    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>
    Bei anderen Inhalten (zum Beispiel zusätzlichen Bildern) wären andere Lösungen sinnvoller.

    Beispieldatei

    Gruss

    MrMurphy
    Geändert von MrMurphy (09.12.2017 um 14:35 Uhr)

Ähnliche Themen

  1. Boxen Brush
    Von Billbos im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 16.10.2008, 12:02
  2. Rauschende Boxen!?
    Von Grinf4ce im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 13.10.2007, 16:59
  3. div boxen feststellen
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 19.09.2007, 01:07
  4. div boxen verschieben
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 00:20
  5. div boxen problem
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.09.2007, 23:16

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •