Version 2 mit Flex

[Gunnar Bittersmann]

@@LiveAndSmile

jetzt ein neuer Versuch mit Flex: http://codepen.io/anon/pen/mONJem besser?

<div class="wrapper">

Das div ist überflüssig; es sind bereits genügend Containerelemente da.

<header class="site-header">

Wozu die Klasse? Aus der Stellung im DOM geht bereits hervor, dass das der Site-Header ist.

<a href=""><img src="http://lorempixel.com/250/90/food/5" alt="Logo"></a>

Hier könnte der Alternativtext auch angeben, wohin der Link führt.

<main class="site-main">

Wozu die Klasse? Da es nur ein main-Element gibt (laut W3C-Spec nur geben kann), ist klar, dass dies der Hauptinhalt ist.

<article class="preface">

Ohne Inhalt lässt sich nicht sagen, ob das article-Element hier richtig ist.

<figure class="blog-picture">

Nicht jedes Bild gehört in ein figure-Element. Und wozu die Klasse?

<aside class="site-aside">

Ohne Inhalt lässt sich nicht sagen, ob das aside-Element hier richtig ist. Wozu die Klasse?

---

Bei schmalem Viewport verschwindet die Navigation nach rechts aus dem Viewport raus. Du solltest dafür sorgen, dass sie im Viewport (unter dem Logo?) bleibt.

LLAP 🖖