Gestaltung mit Flexbox

[Gunnar Bittersmann]

@@Henry

jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...

Ja. Und?

Also jemand möchte ein Auto mit 4 Türen und du zeigst auf einen 2 Türer und sagst, "ist doch das Gleiche"?

Nein. Ich sage: „Der Zweitürer fährt genauso gut. Wenn du den Viertürer haben willst, musst du nochmal 9876,50 Öken^[1] drauflegen. Deine Entscheidung.“

Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.

1. Mit was für Aufwand?

Praktisch NULL

Dann hat Grid wohl negativen Aufwand?

2. Mit was für krudem Mark-up?

simple, conform und in jedem Browser nutzbar.

Beispiel hier

Dein Mark-up ist nicht richtig: Erst soll im Quelltext der Header kommen, dann die Navigation. Das macht sich sowohl bei schmalem Viewport als auch bei Screenreadern bemerkbar.

Außerdem benötigst du ein präsentationsbezogenens Element <div id="rbase">.

BTW, <div id="container"> benötigst du nicht, das ist „bedauerlich bis ärgerlich“.

So, und nun lass mal den Designer um die Ecke kommen und sagen: „Hömmal, wir machen den Header doch über die volle Breite.“ Dann fängst du an, das Mark-up umzubauen. Mark-up umbauen wegen einer Änderung der Darstellung‽‽ Und das nennst du „praktisch NULL Aufwand“‽

Bei meiner Umsetzung ändere ich mal schnell im Stylesheet die Zeile "navigation page-header" in "page-header page-header" – ohne das HTML nochmal anfassen zu müssen. Das nenne ich „praktisch NULL Aufwand“.

(Die Deklaration sieht dann vollständig so aus:

		grid-template-areas:
			"page-header page-header"
			"navigation  main-content"
			"navigation  page-footer"

LLAP 🖖

---

1. „Da waren sie wieder, meine drei Probleme.“ ↩︎