DIV Tabelle Spaltenanzahl reduzieren

[Rolf B]

Hallo KC,

RTFM (read that famous main.js)

Zeile 96ff: Da steht slidesToShow, je nach Viewportbreite 1, 2 oder 3.

Du musst übrigens deine längeren Worte mit Trennhilfen versehen (­), damit es das Layout nicht zerreißt. Derzeit ist es so, dass lange Worte die Spalteninhalte verbreitern und in die nächste Slick-Spalte überragen lassen.

Das kannst Du auf einem Desktop durch Verringern der Anzahl der slidesToShow in den Griff bekommen, auf einem schmalen Viewport (Smartphone) dagegen nicht.

Und nun kommt die Self-Pest - ich kann mich einfach nicht zurückhalten 😉. Nimm Teile davon mit oder schmeiß es weg - deine Entscheidung. Bis auf die Sache mit dem alt-Text und dem a Element, das ist eindeutig falsch.

Wer hat Dir diese klassenverpestete div-Suppe eingegeben? Es ist gruselig!

<div class="col-md-4">
  <div class="single-product-items">
    <div class="product-item-image">
      <a href="#"><img src="assets/images/product/p-1.jpg" alt="Product"></a>
    </div>
    <div class="product-item-content text-center mt-30">
      <p><font color="#841811"><u><strong>Waldseebau Gaggenau</strong></u></font></p>
      <div class="divTable">
        <div class="divTableBody">
          <div class="divTableRow">
            <div class="divTableCell1">Bauherr:</div>
            <div class="divTableCell2">Stadt Gaggenau</div>
          </div>
          <div class="divTableRow">
            <div class="divTableCell1">Bauzeit:</div>
            <div class="divTableCell2">Februar 2021 – Mai 2022</div>
          </div>
          <div class="divTableRow">
            <div class="divTableCell1">Leistungen:</div>
            <div class="divTableCell2">KG 440 etc etc etc.</div>
          </div>
          <div class="divTableRow">
            <div class="divTableCell">Auftragswert:</div>
            <div class="divTableCell">ca. 400.000,00€</div>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- single product items -->
</div>

Es geht sicherlich besser, übersichtlicher und vor allem: HTML5-iger. Ich habe deinen vollständigen Quellcode nicht und kann es darum nicht ausprobieren - aber ich würde folgendes vorschlagen wollen:

• <div class="col-md-4">: Das möchte ein article Element sein. Ob es sinnvoll ist, col-md-4 zu setzen, bezweifle ich. Mir scheint, dass Bootstrap sich hier mit Slick einen Ringkampf um die Kontrolle liefert (float vs flex). Das sieht man auch am div.product-items-active: Da hast Du die Bootstrap-Klasse row gesetzt, die ein display:flex mitbringt, und gleichzeitig sitzt slick drauf und gibt display:block. Gar nicht gut. Das einzige, was Du von Bootstrap noch bekommst, ist das Padding, und das könntest Du mit einer CSS Regel für article.slick-slide selbst setzen.
• div.single-product-items: Ist meines Erachtens komplett überflüssig.
• div.product-item-image: Könnte ein figure Element sein. figure bringt ein paar Margins bzw. Paddings mit, aber die kann man ihm mit CSS abgewöhnen.
• a href="#" tabindex="0": Warum? Warum ein Link ohne Target, warum ein tabindex (der ist im a Element ohnehin drin)? Weiteres Problem ist hier, dass slick eine Tastaturbedienung bieten möchte und deshalb den Slick-Elementen einen tabindex=0 gibt, mit der Folge, dass Du geschachtelte interaktive Elemente hast. Quite bad.
• img alt="Product": Nein. Der Alt-Text soll bei nicht-visueller Wahrnehmung der Seite eine Idee geben, was da gezeigt wird. Es sei denn, das Bild ist rein dekorativer Art, dann schreibt man alt="".
• <div class="product-item-content text-center mt-30">: Gut, du verwendest Bootstrap und bist deswegen in dessen Idiomen unterwegs. Es ist aber grundsätzlich ein falsches Verständnis von Klassen, spezielle "Layoutklassen" zu erzeugen. Klassen beschreiben fachliche Kategorien, nicht technische. text-center ist eine Bootstrap-Klasse für die CSS-Eigenschaft text-align:center. Dabei willst Die den Content gar nicht zentrieren, sondern nur die Überschrift - weswegen "Waldseebad Gaggenau" gar kein p sein möchte, sondern ein h3. "Unsere Referenzen" wäre das h2. Farbe, richtige Schrift und Unterstreichung bringst Du dann mit CSS hinzu, und bitte nicht mit dem missbilligten font Element. Unterstreichen mittels u ist ebenfalls verpönt - das ist HTML der 90er Jahre. Und das strong-Element ist auch nicht dazu da, um etwas fett zu machen, sondern um inhaltliche Wichtigkeit hervorzuheben. Das ist hier nicht der Fall. Die Klasse mt-30, um einen margin-top von 30px zu erzeugen, ist ebenfalls eine Layoutklasse und gehört weg. Gib explizit dem figure-Element einen margin-bottom oder der h3 einen margin-top.
• divTable, divTableBody, divTableRow, divTableCell - Du Schelm. Wenn Du Table-Layout erzeugen willst, dann lüg Dir nicht in die Tasche und schreib auch eine Table hin. Du hast im CSS ja sogar display:table drinstehen. Aber dieses Ding möchte viel lieber eine Description List sein - in etwa so:

<article class="single-product-item">
  <figure>
     <img src="..." alt="...">
  </figure>
  <h3>Baumaßnahme XYZ</h3>
  <dl>
    <div>
      <dt>Bauherr:</dt>
      <dd>Dingsbums AG, Dingenskirchen</dd>
    </div>
    <div>
      <dt>Bauzeit:</dt>
      <dd>drölf Jahre</dd>
    </div>
    <div>
      <dt>Leistungen:</dt>
      <dd>Jede Menge, und wir sind stolz drauf</dd>
    </div>
    <div>
      <dt>Auftragswert:</dt>
      <dd>Unbezahlbar</dd>
    </div>
  </dl>
</article>

Genau so viel HTML - und der Rest per CSS, das wäre korrekt. div im dl? Ja, ist erlaubt und ist auch nötig, wenn mal dt und dd nebeneinander bekommen will.

Keine Klassen für die einzelnen Elemente? Nö, wozu. Mit CSS kann man zielgerichtet navigieren, die Überschrift bspw. mit .single-product-item h3 oder die Description List mit

@media (min-width: 30em) {
  .single-product-item dl > div {
     display: flex;
  }
  .single-product-item dt {
     flex: 0 0 auto;
  }
  .single-product-item dd {
     flex: 1 0 auto;
  }
}

(Edit: Selektoren nach Martins Hinweis um ein dl gekürzt)

müsste - aus der Hüfte geschossen - den Zweck erfüllen. Ganz wichtig: Nebeneinander nur, wenn der Viewport breit genug ist. Die 30em sind symbolisch zu verstehen und müssen an dein Konstrukt angepasst werden. Hier würde sich eher @container-CSS anbieten, aber leider ist das noch nicht in den Browsern drin. Die @media-Abfrage sorgt jedenfalls dafür dass das div nur zur Flexbox wird, wenn der Bildschirm breit genug ist. Das dürfte die Lesbarkeit auf Smartphones deutlich verbessern.

Rolf