[heiko_rs]

[Impigra]

Generell würden ja zwei Hintergrundbilder ausreichen.. oder?

und im li Element muss nur noch ein anchor mit einem einzigen span enthalten sein ...

Die Hintergrundgrafik wird einmal für den gesamten Hintergrund und den linken Abschluss erstellt.
Eine fiktive Übergröße macht die Wiederholung überflüssig.
So kann das Hintergrundbild ca. 300 px breit sein auch wenn die Navigationselemente nur 120px breit sind.
Die Hintergrundgrafik wird für den anchor mit der css Eigenschaft background-position:left; angelegt, das im anchor enthaltene span bekommt nur den dazu passenden rechten Abschluss mit der Eigenschaft background-position:right;.
das span benötigt dann aber genau wie auch der anchor ein display:block, da die inline Elemente sonst nicht sauber skaliert werden können.

Der Internet Explorer braucht dann wie von Heiko geschrieben natürlich noch die freundliche Aufforderung den richtigen Cursor anzuzeigen...



[Nachtrag]
Da Ganze noch gewürzt mit einem schlanken CSS Sprite um die Requests gering zu halten und schon hat man eine recht ordentliche Lösung...
Hier zahlt es sich dann auch aus dass die anchors und auch die spans als blockelemente formatiert sind...

[KaffeePaule]

Hallo nochmal,
Ich bin die ganzen Ratschläge mal durchgegangen und bin zum Schluß gekommen, daß mein Vorhaben technisch unmöglich ist. Ich habe in meiner Problem-Beschreibung nicht so gut rübergebracht, daß der hover-Zustand auf das ganze zusammengesetzte Reiter-Element ausgeführt werden soll, d.h. beide background-jpgs werden durch den jeweiligen Overstate-Zustand ersetzt.
[/img]



Ist diese Lösung technisch realisierbar?
Ich bin mir fast sicher, daß nicht; denn ich habe tausend Templates durchforstet und nie gab es eine solche Navi als CSS.

Wenn nicht, reicht eine kurze Antwort. Werde das ganze dann auf die einfache machen.
Danke allerseits

[Impigra]

Andere Frage..
warum sollte das nicht umsetzbar sein?

Ich seh da kein Problem...

[KaffeePaule]

Hm. Hatte ich mich fast schon glücklich abgefunden.
Wenn die html-Struktur der Navi die folgende ist:

[sahnemuh]

ich habe das ganze mal "skizziert"

[KaffeePaule]

Supi, vielen lieben Dank.

[heiko_rs]

Noch zur Erlärung: Bei solchen Konstruktionen ist der Grund für ein span innerhalb von a der IE < 7, der nur a hovert. Allerdings kann man ihm per JS beibringen, auch li zu hovern (das siehst Du auf dem Link). Welche Alternative man wählt, ist Geschmackssache.

Eine wichtige Anmerkung muss ich zu Sahnemuhs Code allerdings noch machen: Wenn man die Schriftgröße nicht per Prozentwert "initialisiert", sondern em als erste Einheit verwendet, hat das im IE inkl. 7 fatale Folgen in Gestalt des Font-Resizing-Bugs - das sieht man, wenn man unter "Ansicht" für die Textgröße "sehr groß" wählt und dann förmlich erschlagen wird von der gigantischen Textgröße

Ich gebe daher im Universalselektor immer 100% für die Schriftgröße an. Die Opera-Versionen 5 & 6, die damit Probleme hatten (so dass der Wert 100.01% aufkam), sind natürlich schon längst ausgestorben.