Brauche Hilfe bei den Wiki-Cards: Höhe des Inhalts festlegen

[Felix Riesterer]

Lieber Rolf,

auf Deine konkrete Frage weiß ich keine Antwort, weil ich mit den Layoutkonzepten noch nicht vertraut bin, die Du da ansprichst. Aber mir fällt etwas anderes auf:

<div class="card">
  <div class="card-titel">
    <div class="logo"><img ...></div>
    TITELTEXT
  <div>
  <div class="card-inhalt">
  ...
  </div>
</div>

Div-Suppe ist wieder im Kommen! Aber mal ernsthaft: Braucht es neben der Klasse card weitere Unterklassen? Ist nicht das erste Kind-Div zwingend dasjenige mit dem Titel? Dann kann man sich die Klasse card-titel ganz sparen und verwendet einen passenden Selektor mit nth-child(n). Oder siehst Du da gravierende Nachteile? Auch card-inhalt lässt sich einsparen, wenn klar ist, dass das zweite Kind-Div von .card zwingend dasjenige mit dem Inhalt ist.

Wenn ich unsere letzte Discord-Runde richtig in Erinnerung habe, wolltest Du zweierlei Konzepte umsetzen, wobei eines ein gefloatetes img-Element verwendet, ein anderes aber ein Hintergrundbild. In diesem Fall kann man ja noch eine zweite Klasse an das .card-Div anbringen, die dafür sorgt, dass wiederum andere Selektoren greifen, ohne dass man die Div-Divs mit eigenen Klassen belegen muss.

Noch lieber wäre mir ein semantisches Markup. Was spricht gegen diese Struktur?

<div class="card">
  <h6><!-- Titel -->
    <img src="" alt="Logo mit gekippten Quadraten">
    TITELTEXT
  </h6>
  <p><!-- Inhalt -->
    ...
  </p>
</div>

Dann schreiben sich auch die Selektoren besser, wenn man kein .card > div:nth-child(1) schreiben muss, sondern stattdessen .card h6 nehmen kann. Liest sich in meinen Augen auch besser.

Liebe Grüße

Felix Riesterer