Flexboxen

[Der Martin]

Hallo,

Das Markup im Header besteht im Grunde aus gerade mal 3 Zeilen. Dieses habe ich mal verdoppelt, wobei die eine Hälfte auskommentiert ist. Durch verschieben der Kommentarzeichen ergibt sich ein ganz anderes Erscheinungsbild.

zunächst mal: Interessante Strategie. Wie kommt man auf so eine Idee?

Das unterschiedliche Erscheinungbild könnte daher kommen, dass im Quelltext Leerzeichen zwischen den Elementen stehen, die je nach Lage der Kommentare mal Teil des wirksamen Codes sind, mal nicht. Aber um das mit Sicherheit sagen zu können, müsste man die verschiedenen Varianten des Quellcodes exakt sehen.

Die zweite Besonderheit ist: ich habe dem Header eine klare Höhe zugewiesen, und zwar bewusst eine zu kleine. Das macht deutlich: zumindest der Text der 2. Zeile (roase.ch) ist nicht wirklich Teil des Blockes, der ihn umgibt/umgeben sollte.

Doch, der Inhalt eines Blockelements kann auch über dessen Grenzen hinauslaufen, wenn das Element zu klein für den Inhalt definiert wird.

Das aber heisst auch, das alle drei Zeilen einer Margins-Definition unterliegen, die anderswo im Strukturbaum definiert ist. Wobei die ja durch meine Zuweisungen überschrieben werden sollte...

Konjunktive sind toll, helfen aber meist nicht weiter. Tipp: Welche CSS-Regeln für ein bestimmtes Element wirklich gelten, und woher sie stammen, sieht man gut mit den Entwicklerwerkzeugen der diversen Browser. Auch die Firefox-Extension Firebug ist dafür gut geeignet.

So long,
 Martin