Navigation mit runden Ecken

[tantebootsy]

Hi,

ich habe hier diese Navi mit außen abgerundeten Ecken, bekomme es aber nicht hin, dass der Mittelteil exakt so groß ist wie die äußeren Teile.
Auch besteht das Problem, dass wenn man die Schrift skaliert, sich die verschiedenen Teile unterschiedlich stark skalieren.
Weiß da jemand von euch Rat?

Bin jetzt schon ewig am rumprobieren und ziemlich frustriert ...

Gruß,
Micha

 

[Maik]

Vielleicht solltest du die Dimensionsangaben der einzelnen Elemente auf den "gemeinsamen Nenner" Pixel bringen, und für den mittleren Teil die Höhe der oberen und unteren Ecke (2*9px) hinzuaddieren.

 

[tantebootsy]

Nein, Pixelangaben kann ich nicht verwenden, da die Navi skalierbar sein muss ...

 

[Maik]

Dann wird's problematisch, denn derzeit fehlen dem mittleren Teil die 18 Pixel der oberen und unteren Ecke.

Ansonsten müsstest du über und unter dem mittleren Teil einen "Streifen" von 9 Pixel dranhängen, um die Differenz auszugleichen.

 

[tantebootsy]

Ja, Mist, nicht?

Ich habe hier noch eine zweite Möglichkeit einer Navi mit runden Ecken probiert. Die ist skalierbar und die Elemente passen. Jedoch basiert sie auf einer anderen Technik, die komplette Hintergrundbilder verwendet. Der User kann sich also nicht die Hintergrundfarben individuell einstellen, somit also leider auch keine 100%ige Barrierefreiheit ...
Außerdem stimmen die Abstände zwischen den verschiedenen Teilen nicht und ich hab kein Plan, warum.

 

[Maik]

Werde heute Nachmittag nochmal einen Blick auf die beiden Modelle werfen.

 

[tantebootsy]

Hey, das wäre klasse!
Werde auch noch rumtüfteln aber so langsam geht mir die Puste aus ...

Edit: Hm, wenn ich bei der zweiten Möglichkeit Pixelangaben anstatt em für die Abstände zwischen den Elementen mache stimmen nun auch die Abstände: Update 2. Möglichkeit
Sogar der Abstand nach dem Element ganz links stimmt, obwohl ich dafür gar keinen angegeben habe.

 

[Maik]

[...] Jedoch basiert sie auf einer anderen Technik, die komplette Hintergrundbilder verwendet. Der User kann sich also nicht die Hintergrundfarben individuell einstellen, somit also leider auch keine 100%ige Barrierefreiheit ... [...]

Vielleicht hilft dir in diesem Fall Stu Nicholls' CSS-Modell curved corners weiter, das keine Grafiken zum Ausrunden der Ecken benötigt.

 

[tantebootsy]

Der alte Stu - immer was im Petto.

Leider sagt er selbst in der Info

Purists will say that this will be confusing for text readers.

Werde es aber im Laufe der Woche mal ausprobieren ...

Danke für den Tipp
Micha

 

[Maik]

Als Alternative zu dem könntest du es ja auch mit einer Javascript-Lösung probieren -> Nifty Cube Corners.