DIV-Container richtig positionieren

[Rolf B]

Hallo Schweriner,

dein CSS ist sehr umständlich, weil Du versuchst, jedes Element zu kontrollieren. Der Browser kann das besser, wenn Du die richtigen Anzeigemodelle wählst. Für Dich interessant ist die Flexbox, float ist für die von Dir gewünschte Darstellung nicht mehr zeitgemäß (das stammte aus der Zeit, wo man Tabellen zu meiden suchte aber Flexbox noch nicht verfügbar war).

Bei position:fixed muss man noch beachten, dass es genau wie position:absolute das fixierte Element aus dem normalen Flow herausnimmt, d.h. die nachfolgenden Elemente werden so positioniert als würde es das fixed-Element gar nicht geben. Du musst den eigentlichen Inhalt also mit einem Margin nach unten schieben. Und zwar mit der Einheit "vw" - wie Viewport Width - weil dein SVG ja ebenfalls mit der Anzeigebreite "atmet". Viewport steht für den Innenraum des Browserfensters; 10vw bedeutet beispielsweise: 10% der Viewport-Breite.

Darüber hinaus hat dein HTML ein paar Anachronismen drin:

• Der Body darf gestyled werden. Es ist nicht nötig, den ganzen Inhalt in ein Extra-DIV zu packen. Weiß der Geier, warum man das vor Jahrzehnten propagiert hatte.
• HTML 5 bringt ein paar Elemente mit, die eine semantische Auszeichnung fördern: header, main, footer, und nav
• Menüpunkte, die nebeneinander stehen sollen, setzt man in eine Liste mit Flexbox-Layout. Man kann dann entweder einen Umbruch vorsehen, wenn die Liste zu schmal wird, oder sorgt mit Media-Abfragen dafür, dass bei zu schmalem Viewport die Menüliste anders gestyled wird (z.B. als Dropdown-Menü).
• Maße legt man nur dann in Pixel fest, wenn es unbedingt nötig ist (z.B. für ein Bild, das nicht skaliert werden soll). Ansonsten verwendet man em oder rem für Dinge, die analog zur Textgröße skalieren sollen, pt für Schriften und vh/vw für Dinge, deren Größe relativ zum Browserfenster sein soll.
• Achso, Schriften: Es gibt ein Leben jenseits von Arial. Da gehört MINDESTENS noch sans-serif hinzu, weil Arial lange nicht auf allen Systemen existiert.

Ich habe hier mal ein bisschen gefiddelt: https://jsfiddle.net/qmu540xf/; in der simplen Version mit Umbruch der Menü-Items bei schmalen Viewports.

Schau Dir das Flex-Tutorial durch, dann verstehst Du, was das Markup tut.

li:nth-of-type(n+2) ist ein Trick, um Abstand ZWISCHEN den List-Items zu produzieren. Dieser Selektor gilt für alle li ab dem zweiten.

Von dem oben genannten Prinzip "alle Menüpunkte in eine Liste" bin ich für den logo-grau Link abgewichen. Dieser Link bleibt links am Rand und muss daher anders formatiert werden, darum habe ich ihn aus der Liste herausgenommen. Es wäre für Bedienbarkeit möglicherweise besser, eine zweistufige Liste zu machen.

Dein Schwerin-Bild wird vermutlich so noch nicht passen, aber ohne Bilder kann ich das schlecht festlegen. Und du müsstest für deine Bilder noch alt-Attribute festlegen, für das logo-grau UNBEDINGT, damit sehbehinderte Anwender vom Screenreader etwas sinnvolles vorgetragen bekommen.

Ob ein fixierter Titel für Sehbehinderte oder Nichtmausnutzer (Screentoucher und Tastaturbenutzer) tatsächlich praktisch ist, kann ich nicht sagen. Mr. Murphy klang eher nicht so.

Edit: Ich habe das parallel zu Marc geschrieben; ich war nur viel langsamer…

Rolf