Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[Rolf B]

Hallo HTML_go,

während die anderen referiert haben, habe ich mal gebastelt.

https://jsfiddle.net/Rolf_b/fc7dnbrw/

• Kein div class="center", das kann man mit dem body selbst machen
• Dinge, die man im CSS als Element selektieren kann, brauchen keine Klasse. Also kein <header class="header"> oder <h1 class="ueberschrift">
• Dinge, die man im CSS über Kombinatoren selektieren kann, brauchen auch keine Klasse, über die man sie gezielt findet. Bspw. braucht dein Header-Bild keine Klasse, du selektierst es über header img { ... }
• dass das div.topnav ein nav Element sein möchte, hatte schon Gunnar geschrieben.
• Die Navigation in eine Liste zu stecken, ist gute Praxis, weil Screenreader das besser vortragen ("Navigation, Liste mit 6 Einträgen, Erster Eintrag: Link Startseite, etc")
• Die Navigation hast Du als Flexbox realisiert. Für die Vertikaldarstellung ist es dann am einfachsten, nur die Richtung umzuschalten (flex-direction: column).
• Gunnars Vorschlag, die aktuelle Seite als Link zu belassen und damit auf den Hauptbereich zu verlinken, habe ich schnell noch eingebaut
• Die aktuelle Seite mit aria-current="page" zu markieren habe ich auch drin. Man selektiert im CSS das Element, das ein aria-current-Element trägt, mit [aria-current]. Solange Du keine unterschiedlichen aria-current Markierungen brauchst, reicht das. Andernfalls schau Dir die Attributselektoren an.
• Du solltest vertikale Abstände nicht mit <br> herstellen. Gib lieber der Überschrift einen zusätzlichen margin-top (oder der Navigation einen zusätzlichen margin-bottom)
• Der Hauptteil der Seite unterhalb der Navigation sollte in ein <main> Element eingehüllt werden
• ein div mit class="ueberschrift" um die Überschrift herum ist nicht sinnvoll. Das h1 Element kann das gut alleine. Was durch dein div passiert, ist, dass die Paddings und die Font-Vergrößerung doppelt wirken. Schmeiß das div weg und gib dem h1 entsprechend größere Werte.
• Achso, Werte. Nimm lieber em, dann passen sich die Abstände an, wenn jemand die Seite zoomed. Ich tune das meistens nie so fein und bleibe bei 0.25em, 0.5em und 1em (Viertel, Halb, Ganz)
• Flexbox und Float in der Navigation beißen sich. Nimm das float raus
• max-width für Header und Nav brauchst Du nicht. Gib dem Body eine max-width von 50em oder 60em. Der Rest passt sich an.
• overflow:hidden für die Navigation braucht es eigentlich auch nicht, zumindest nicht, wenn die floats weg sind. Durch overflow:hidden erschafft man einen "Blockformatierungskontext", aus dem die Floats nicht hinaushängen können wenn Überschriftenteile umbrechen. Flexbox macht das eh schon.
• Wenn die Navigation so aussieht, dass die "Arbeit mit..." zweizeilig wird, dann ist es ganz schick, wenn die einzeiligen Nav-Items vertikal zentriert sind. Vertikales Zentrieren von Text ist immer ein Drama; am einfachsten geht es, das a Element zur Flexbox zu machen und align-items:center zu setzen.
• Die Farben für Nav und h1 sollten deinem Logobild angepasst sein. Das waren sie nicht, dein Logobild verwendet einen ganz schwachen Lilaton im Grau. Du hattest hingegen ein kaltes Grau ohne Tönung und das stört – mich zumindest. Ich habe das Bild deshalb ins Malprogramm geladen und die RGB-Werte der Grautöne vom Rand und der Mitte ausgelesen, und dann in unseren Farbwähler übertragen. Im HSL-Feld sieht man dann den Lilaton (Hue≈280). Um Helligkeits- oder Sättigungsabstufungen für einen bestimmten Farbton zu bekommen, ist das HSL-Farbmodell (Hue, Saturation, Lightness) sehr hilfreich.
• Und weil ich gerade dabei war, habe ich deiner Navigation einen ähnlichen Farbverlauf gemacht wie ihn das Titelbild hat 😀 (linear-gradient).
• Wenn man die Navigation in eine Liste packt, muss man die Liste natürlich als solche verstecken, dazu habe ich Styles für nav ul und nav li ergänzt. Das biss sich dann etwas mit deiner ul Regel für die "Über uns" Seite, deshalb habe ich dieses ul als main ul selektiert.
• Ob der Grünton für die aktuelle Seite eine gute Wahl ist, weiß ich nicht. Aus meiner Sicht beißt sich diese Farbe mit dem "Kontakt" des Header-Bilds; ich würde eine Farbe mit dem gleichen Hue wie der Farbverlauf (280deg) oder etwas, das im Farbkreis gegenüber liegt (z.B. 60deg) nehmen. Man muss dann nur auf den Kontrast zum Text achten, der darf nicht zu klein werden.

Rolf