css Navigation, Linien setzen

[Rolf B]

Hallo Pit,

in der Fiddle-Version 4 hast Du aber was in den falschen Hals bekommen.

#navlinks:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

#navlinks:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}

die Pseudoklassen :first-child und :last-child identifizieren Elemente, die in der children-Liste ihres Elternelementes an erster bzw. letzter Stelle stehen. Du wendest sie auf das form-Element #navlinks an, das einziges Kind des nav Element ist. D.h. beide Regeln treffen auf das form zu. Das kannst Du einfacher haben - und so hattest Du es ja auch ursprünglich:

#navlinks {
   border-radius: 6px;
}

Was Du vermutlich WOLLTEST, war, am linken Link die linke Seite abzurunden und am rechten Link die rechte Seite. Dazu hättest Du eine Leerstelle zwischen #navlinks und :first-child bzw. :last-child machen müssen, eine Leerstelle ist der "ist Kind von" Selektor.

Aber das nützt Dir nichts. Wenn Du den Rand auf die Links verlegst, kommst Du mit der inline Logik in Konflikt, die Leerstellen nicht entfernt. Links und Buttons sind inline-Elemente (deswegen landen sie nebeneinander), und darum haben sie auch ohne Margin einen Abstand. Ein Rand auf den Links wäre deshalb nicht durchgehend.

Es ist daher sinnvoll (und auch logischer), den Rand und die Rand-Abrundung auf den Link-Container zu legen. Das hattest Du in deiner ersten Version völlig richtig.

Und wie du den Trennstrich zwischen die Buttons machst, hatte ich Dir doch erklärt. Du hättest nur den Buttons den border-radius wegnehmen müssen, damit der Trennstrich gerade ist.

Ich bastele aber nochmal etwas, um dir zu zeigen wie man mit flexbox gut um die Kurve kommt.

Rolf