Tabelle responsiv oder andere Lösung

[Rolf B]

Hallo Lorraine,

ich kenne Redaxo nicht. Ist es tatsächlich so, dass man die Inhalte als HTML Fragment erstellen muss, gibt es dafür keinen "anwendertauglichen" Editor?

Weitere Frage: Kannst Du stylesheet-Dateien (CSS) erstellen? Oder zumindest einen Satz an CSS Regeln, die Redaxo der Seite hinzufügt? Das würde einiges erleichtern, das würde diese style="..." Monster in die CSS Regeln verdrängen, wo man sie besser lesbar aufschreiben kann.

Dann würde man auch einiges der redundanten Angaben entfernen, und du würdest eher bemerken, dass dein HTML falsch ist (z.B. das </strong>, dem der öffnende Partner fehlt).

Grundsätzlich funktioniert Flexbox so, dass es den Flex-Container gibt (als Ersatz für <table> und die Flex-Elemente (als Ersatz für die <td>). Ein Gegenstück zu <tbody> oder <tr> gibt es bei Flexbox nicht.

Was Flex-Container ist und wie sich Container und Flexelemente verhalten sollen, legst Du im style-Attribut (oder besser in CSS Regeln) fest.

Innerhalb des Flexbox-Containers werden die Elemente nebeneinander (flex-flow:row) oder untereinander (flex-flow:column) angeordnet. Infos im Wiki

Du kannst auch spezifizieren, dass die Elemente bei schmalen Viewports nicht nebeneinander gequetscht werden sollen, sondern in eine neue Zeile umbrechen sollen (flex-flow: row wrap)

An den Flex-Elementen gibst Du mit der Flex-Eigenschaft an, wie sich die Elemente an die Breite anpassen können. Die Flex-Eigenschaft kombiniert die Eingeschaften flex-grow, flex-shrink und flex-basis.

Grundlage ist die flex-basis: Wenn du zwei Elemente hast, eins mit Basis 10em, eins mit Basis 20em, und der Flex-Container breit genug ist, dann werden sie nebeneinander dargestellt, mit dieser Breite. Und rechts^[1] ist ggf. Luft, wenn der Container noch breiter ist. Jetzt kommt flex-grow zum Tragen: der freie Platz wird im Verhältnis der flex-grow Werte an den Elementen auf die Breiten der Elemente verteilt.

Der Container kann aber auch zu schmal sein. Wenn flex-flow:wrap gesetzt ist, werden die Flexelemente, die nicht passen, in eine neue Zeile verschoben. Ohne flex-flow:wrap kommt der Wert von flex-shrink zum Zug: Das, was an Breite fehlt, wird im Verhältnis der flex-shrink Werte von der Breite der Flex-Elemente abgezogen.

In deinem Fall brauchst Du also, an Stelle der table, dieses Grundgerüst:

<div style="display:flex; flex-flow: row wrap;">
  <div style="flex: 2 0 2em;">
    <a ... href="..."><img src="..."></a>
  </div>
  <div style="flex: 5 0 5em;">
    <p>Projekt: ...</p>
    <p>Projektleitung: ...</p>
    <p>Projektzeitraum: ...</p>
  </div>
</div>

Wie gesagt: Besser als inline-styles sind CSS Regeln. Und deine style-Attribute sind Monster, die oft auch einfach nur die Default-Werte auflisten (was nicht falsch ist, wenn sie irgendwo in einem Elternelement verstellt wurden, aber sowas sollte man nur bei Bedarf tun).

Die Zahlen im Flex-Attribut ergeben sich aus deinen Prozentwerten, das sind 2/7 und 5/7. Die Flex-Basis Werte solltest Du noch an deine Realitäten anpassen, beim ersten div sollte das die Breite des img sein (mit Zuschlag für Rahmen und Paddings etc). Beim Text gib soviel an, dass alles nebeneinander passt.

Rolf

---

1. wenn die justify-content Eigenschaft des Containers auf flex-start steht und flex-flow nicht row-reverse ist und und und - es gibt einige Schalter, die die Positionierung der Flex-Elemente beeinflussen ↩︎