Navigation Flexbox & Content

[Gunnar Bittersmann]

@@Sophie

vielen Dank, hat funktioniert: http://test-2017.bplaced.net/

„Kontakt“ ragt nach rechts aus dem Viewport raus (bei Viewports schmaler als 1000px + 2em), weil der Header wegen header { padding: 1em; width: 100% } aus dem Viewport rausragt. Du möchtest ein anderes Boxmodell verwenden.

Wenn der Viewport noch schmaler wird, ragen noch mehr Menüpunkte nach rechts raus. Verwende flex-wrap: wrap (bzw. flex-flow: row wrap).

Wozu überhaupt das div.container? Die Stile kannst du auch dem header geben.

Und max-width: 1200px — meh. Vergiss, das es soetwas wie px gibt! Die Breite solte sich nach der Schriftgröße richten, also in em bzw. rem angegeben werden.

Das Bild liegt derzeit hinter dem Header. Ich würde gerne die 100% immer nach dem Header haben. Ist dieses möglich?

Wenn du den Header nicht fixed positionierst, ja: body als Flexbox.

Wenn du ihn fixed positionierst, müsstest du seine Höhe kennen. Die kennst du aber nicht.

Außerdem wollte ich die zwei Buttons mit display: inline-block; nebeneinander platzieren, wird irgendwie nicht.

Du meinst die Links (die wie Buttons aussehen). Die sind Flexitems; dass kann also nichts werden. Warum ist section#home eine Flexbox?

LLAP 🖖