Problem mit div oder nav

[Rolf B]

Hallo Panda,

ich habe deinen Sourcecode in ein jsfiddle kopiert und etwas modifiziert. Darin habe ich einiges zusammengefasst, so dass auf Wiederholungen im Style verzichtet werden kann.

Dem Hinweis mit dem div um nav wollte ich noch hinzufügen, dass genau dieses Konstrukt dein Zentrierungsproblem bedeuten dürfte. Beide Elemente haben die Klasse nav_bar, beide haben einen margin-left/margin-right von 200px, beide sind Flex-Container. Die Wirkungen überlagern sich, und eigentlich habe ich gar keine Lust, das genauer zu analysieren. Ohne das div sieht es meiner Meinung nach deutlich besser aus, und das Zentrieren der Menüpunkte gelingt - da Du Flexbox verwendest, mit justify-content:center an Stelle von text-align:center.

Die CSS-Regel für den Nav-Bereich kannst Du direkt mit dem nav Element als Selektor schreiben, dafür brauchst Du keine eigene Klasse.

Der Hover-Effekt für die Links führt zum Pumpen des Nav, weil Du die font-size des a Elements ändert. Dessen width ist in em angegeben und ändert sich deshalb. Ich habe im Fiddle deshalb rem als Einheit gewählt, (Root-em), das wird vom font-size Wechsel nicht beeinflusst. Alternativ kannst Du den Text im Link auch in ein weiteres span packen und die font-size des span ändern, dann bleibt das a Element auch unbeeinflusst (nav a:hover span { ... } ).

Tjaa, und dann? 960px Layout ist eigentlich nicht mehr state-of-the-art. Du kannst natürlich die 960px als Maximalbreite setzen, wenn du das willst, aber schau Dir die Seite mal auf einem Handy an. Da rutscht rechts alles raus. Dafür brauchst Du responsive-layout, und auch dazu steht was im Wiki… Über eine sogenannte Media Query kannst Du dein Menü anders stylen, wenn der Bildschirm zu schmal für die jetztige Darstellung wird.

Rolf