Verticales Menü - rechtsbündig mit icon rechts

[CSSHase]

Hallo,

ich versuche gerade eine vertikale Navigation zu basteln, wo der Navigationstext rechtsbündig steht (teilweise zweizeilig !),soweit ja kein Problem. Jetzt soll der Listenpunkt (eigenes Bild) rechts neben der Navigation stehen, und bei hover mitwandern.( Die Navigation und der Listenpunkt soll durch eine senkrechte Linie, vom ersten bis letzten Punkt getrennt sein.)

Hab schon so einiges versucht, das meiste flattert....

Bin so langsam am Ende. Möchte halt kein JavaScript verwenden.


Hat jemannd so etwas schon mal gebaut?

[sejuma]

Entweder mit background-position oder mit position: relative
Sieh mal hier als Beispiele, entsprechende Anpassungen müsstest du dann noch deinen Vorstellungen entsprechend vornehmen:
http://www.ohne-css.gehts-gar.net/0010.php
http://www.ohne-css.gehts-gar.net/0056.php

[CSSHase]

Hallo,

danke für die Antwort. Konnte einen Teil gebrauchen. Habes es jetzt hinbekommen.
War echt tricky..... , da alles rechtsbündig ist.

Ich musste aus dem Listenelement "line-height" rausnehmen, und "padding" nach oben und unten angeben, um im Element Platz für das Hintergrundbild zu schaffen, damit der Text beim Zweizeiler nicht soweit auseinander steht!(Da ich in der Liste bei 2 Punkten einen Umbruch habe (Kontakt / Treffen (Kontakt/<br />Treffen)), und das Navibild 30px hoch ist und der Text mittig vom Hintergrundbild stehen soll. Auf den Linktext musste ich auch noch ein "span-Element"legen, um Abstand zum Hintergrundbild zu schaffen.

Selbst der IE machts ohne line-height..... und Höhenangabe.....wat ein Wunder

Durch margin-Verschiebung der ul und dem transparenten Hintergrund des div-Elements (border-right), konnte auch die Trennlinie (border) zwischen Navigationstext und Navibild gesetzt werden.

Mit echt wenig Code ne nette Navi geschaffen.