Flexboxen

[delbor]

Hi Martin

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

Keine Ahnung - muss man eine etwas kuriose Socke sein, um auf sowas zu kommen?

Nee, Spass beiseite: Auch wenn ich unter Delphi arbeite, kommentiere ich oft Quelltext aus. Auch um verschiedene Varianten auszutesten. Und da ich wie viele Programmierer "faul" bin, habe ich absolut keine Lust, ein und dasselbe zweimal einzutippen.

Übrigens sind Programmierer nicht wirklich faul - bei Programmmen, die zehn- oder hunderttausende von Quelltextzeilen umfassen, ist ein solches Attribut nur mit einem dicken, fetten und breit grinsenden Smiley zu quittieren ;-)))

Das unterschiedliche Erscheinungbild könnte daher kommen, dass im Quelltext Leerzeichen zwischen den Elementen stehen

Auf Codepen mögen sich Leerzeichen wegen des zur Verfügung stehenden Platzes eingeschlichen haben. Ohne das jetzt nochmal nachgesehen zu haben, stehen im HTML-Code zwischen den Header-Tags keine nicht notwendigen Leerzeichen. Die im Style-Tag stehenden, hier falschen HTML-Kommentare habe ich alle entfernt

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.

Wie ich schon andeswo geschrieben habe: ich hab offenbar ein Talent, mich missverständleich auszudrücken. Die 2. Besonderheit ist: Textbox 2 hat eine Höhenangabe erhalten. Und da zeigt sich auch das, was du schreibst: die Box wird sehr schmal und rutscht scheinbar nach oben; in der Tat nach oben rutscht jedoch nur der untere Rand. Das mit dem Header habe ich allerdings auch gemacht, allerdings nur bei mir. Und da wurde der Header an der Topposition gerade mal so gross, dass er seine runden Ecken noch zeichnen konnte. Dabei verschwanden die Inhalte des Headers im "Nirwana" und zeigten sich erst wieder, als ich die Höhenangabe entfernte. Auf Codepen ist diese nicht vorhanden.

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.

Vielen Dank! An die hätt' ich wahrscheinlich viel zu spät gedacht!

Gruss Delbor