[Fluffy_x3]

Hallo,

ich bin gerade dabei ein Screendesign als Template umzusetzen, allerdings hackts gerade bei der Unternavigation.

Die Unternavigation befindet sich im Contentbereich in der linken Spalte und soll so aussehen:



Mein Problem ist jetzt, dass ich das mit den Pfeilen links und rechts beim aktiven Navigationspunkt nicht hinbekomme. Momentan hab ich hier einen border-left und border-right, dieses sind aber eben nicht dreieckig.

Ich hab schon versucht über Google eine Lösung zu finden, konnte aber leider auf die schnelle nichts hilfreiches finden. Habt ihr eine Idee was ich da machen kann?

Vielen Dank im Vorraus
Iris

[Morgo]

Wenn der Hintergrund immer Grau bleibt und nicht variabel ist:

Möglichkeit 1: Elemente zB mit :before und :after absolut positionieren. Am besten als CSS-Triangles (Generator) oder eben als Bilder
Möglichkeit 2: jeweils ein Hintergrundbild in zwei verschachtelten Containern.

Wenn die Hintergrundfarbe variabel ist, dann hilft nur das Grüne als Hintergrundbilder anzulegen und die Pfeile transparent auszusparen.

[top]

Auf border würde ich an der Stelle verzichten um mit Hintergrundbildern arbeiten zu können.

Zeig doch mal den HTML- und CSS-Ausschnitt von der Navi. So ist das nur wahlloses Raten was am besten zu deinem bisherigen Code passt.

(Oder besser gleich ein Link zu einer Testseite.)

[Fluffy_x3]

[SimonDerDude]

Was spricht gegen ein Hintergrundbild (png) mit ausgeschnittenen Ecken für das Listenelement?
ODER wenn der Klickbereich das Listenelement füllt kann auch der 'active' Zustand direkt an den Link verwiesen werden.

Es ging auch noch so.
Aber wir kennen ja die Zielgruppe und zu beachtenden Browserversionen nicht.

[ferrero]

http://jsfiddle.net/MYGCV/1/