Ausprägungen eines Moduls. IE8

[dave]

Hi,

So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).

Nur bei V3!?
Und was ist bspw. mit V2?

V2 benötigt kein calc. Der Teil in Klammern ist nur Bonus.

Welcher Teil in welchen Klammern?
[…]

Sind die Pixel-Werte nicht abhängig von der Größe des jeweiligen Image!?

Ich habe mich da sehr missverständlich ausgedrückt.
Mit Teil in Klammern meinte ich das

(und die Maße des Bildes müssen bekannt sein)

Es würde mir genügen, wenn das ganze mit bekannten Maßen funktioniert.
Bonus: Die Bildmaße müssen nicht bekannt sein.

Gibt es einen zwingenden Grund für die "Divitis"?

Die Elemente mit der Klasse "module" sind eigentlich article-, section- oder aside-Elemente.
Da dass mit dem CSS-Problem an sich nichts zu tun hatte habe ich im Fiddle div-Elemente genommen. Weniger zu schreiben :D

Ich meinte eher:

Wenn du das so kürzt sieht mein Markup voll unnötig aus :-(
Leider gibt 's auch hier wieder ein paar Dinge, die ich nicht erwähnt hatte.

Neben der Überschrift kann auch noch z.B. das Veröffentlichungsdatum stehen, oder noch eine zweite Überschrift darüber oder darunter.
Deshalb das "header.module-header"-Element um das h1-Element drumrum.

Zu dem Bild kann auch noch ein Copyright-Hinweis, Bildunterschrift oder weiß der Teufel was dazu kommen. Also kurz: Ein figcaption-Element.
Deshalb das "figure.module-keyvisual"-Element umd das img-Element drumrum.

Das "div.module-body"-Element ist wie gesagt nur für mich, da ich sonst manchmal Probleme beim stylen hab.

OK, also Flexbox kommt nicht in Frage und die CSS-Varianten sollen alleine auch mind. IE >= 8 konform sein, richtig?

Ja.

Wobei die Größe des Images unbekannt ist?

Wenn es nur mit festen Größen geht, dann reicht mir das vollkommen.

Prinzipiell dürft ihr auch gerne das komplette HTML umbauen wie ihr lustig seid, solange am Ende die 4 Varianten möglich sind.

Danke schon mal, dass ihr euch mit mir und meinem Problem beschäftigt.

~dave