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

Beitrag lesen

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