Hallo Rolf,
diesmal den Dank gleich vorab, damit ichs nachher nicht vergesse. Find' ich wirklich einzigartig klasse, wieviel Mühe Du Dir gibst!
Ich hoffe, Du bist nicht allzu enttäuscht, wenn ichs immer noch nicht ganz gerafft habe - ich bin aber schon näher dran und bemühe mich weiter.
Das mit dem Nachfahrenselector verstehe ich inzwischen. An Block- und Inlineelementen arbeite ich gerade noch.
Und border-radius an den Buttons führt dazu, dass die Trennlinien abgerundet sind, willst Du das? Wenn nicht, musst du diese Eigenschaft bei
.navButton
wegnehmen.
Ich wolte gerade gegenteiliges berichten, so schlecht sieht man (oder zumindest ich ohne Lesebrille) das 😉, aber Du hast (wie sooft recht), wenn ich über strg+ das Bild vergrößere, erkenne auch ich, dass es immer noch abgerundete Linien sind.
Das nav Element geht dann aber immer noch (unsichtbar) über die ganze Breite; wenn das dein Layout nicht stört, ist es ok, andernfalls muss man nochmal überlegen.
Mein erster Versuch, dieses Problem zu lösen.
Die Inline-Story habe ich Dir mal hier visualisiert..
Habe ich studiert, danke dafür.
Und zum Abschluss noch das Fiddle, das einen Header mit deiner Navigation drin zeigt, einmal mit Flexbox und einmal mit Grid gemacht. Die Grid-Lösung hängt den Internet-Explorer und ältere Edge-Browser ab, da musst Du noch ein paar -ms- Prefixeinträge nachlegen.
Diesen Fiddle hätte ich mir gerne angesehen. Kann es sein, dass Du die Verlinkung vergessen hast?
Gruß, Pit