css Navigation, Linien setzen

[Rolf B]

Hallo Pit,

ja ok, ich hab mal wieder viele Dinge gleichzeitig erklärt 😀

Es ist tatsächlich ein Unterschied, ob man im CSS einen Selektor nav.foo oder nav .foo schreibt. Die blöde Leerstelle ändert die Bedeutung, sie ist in den CSS-Regeln als eigenes Syntax-Element aufgeführt: der Nachfahren-Selektor. Deswegen trifft der erste Selektor ein nav-Element mit class="foo", der zweite ein Element mit class="foo", das Kind eines nav-Elements ist.

Die Inline-Story habe ich Dir mal hier visualisiert: https://jsfiddle.net/38zur9kn/. span-Elemente sind inline-Elemente und folgen deshalb der inline-Logik: Wenn dazwischen Leerraum ist, bleibt er erhalten. Deswegen sind die spans der ersten Zeile bündig und die der zweiten Zeile nicht. Ist das div ein Flex-Container, sieht die Sache anders aus. Nun gelten die Regeln der Flexbox und die span-Elemente werden flex-Elemente. Der Leerraum wird ignoriert.

Deswegen schrieb ich, dass ein durchgehender Rand um die Navigation nur sinnvoll funktioniert, wenn Du den Rahmen auf das nav Element legst und nicht auf dessen Kind-Elemente.

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.

Rolf