Pfeile für Listeneinträge in <ul> bei rechtsbündigen <li>

[LSpreee]

Bitte um Hilfe, weil ich keinen Ansatz finde.
Ich möchte in meiner <ul> vor jedes <li> einen kleinen Pfeil aus einer png-Grafik setzen.

Das klappt auch alles super, mit background-image, wenn ich den CSS-Code verwende:

#leftnavi ul li{  
  background-image:url(/pic/li_arrow.png);  
  background-position:left bottom;  
  background-repeat:no-repeat;  
  padding-left:10px;  
}  
#leftnavi ul li:hover{  
  background-position:left top;  
}  

Ich verzichte auf list-style-image, da ich gelesen habe, dass nicht alle Browser das gleich anzeigen.

Nun habe ich aber ausserdem die <li> rechtsbündig, mit

#leftnavi ul{  
  text-align:right;  
}

Statt

Ein Eintrag
            zweitens
  Bitte hier klicken

möchte ich aber ein Ergebnis, wie

> Ein Eintrag
           > zweitens
 > Bitte hier klicken

Wie muss ich ansetzen, um dies umzusetzen. FÜr Hilfe dankbar,
LSpreee

[Matthias Apsel]

Om nah hoo pez nyeetz, LSpreee!

Wie muss ich ansetzen, um dies umzusetzen. FÜr Hilfe dankbar,

keine feste Breite vorgeben, stattdessen ein Padding und das Hintergrundbild linksbündig.

Matthias

[LSpreee]

Leider gelingt es mir nicht.

Bitte einmal auf der Testseite vorbeischauen.

Ich bitte nochmals um Hilfe.

keine feste Breite vorgeben,

ist weg

stattdessen ein Padding

worauf? Auf jedes li individuell abhängig von der Länge des Textes?

und das Hintergrundbild linksbündig.

ist doch schon ?! siehe OP

LG,
LSpreee

[Matthias Apsel]

Om nah hoo pez nyeetz, LSpreee!

das a versorgen.

Matthias

[LSpreee]

das a versorgen.

wow, das wars ein guter Tipp. Ich habe mich verrant es auf die li's zu machen. Hier sieht man den Erfolg :)

Eine Zusatzfrage: Bei dem jetztigen Entwurft wende ich padding auf die Links (<a>) an, um die klickbare Fläche zu vergrößern. Zuvor hatte ich diese mit display:block zum Blockelement gemacht, was mit den Pfeilen nicht funktioniert. Ist es erlaubt auf <a> ein padding zu geben? Und sieht es überall gleich aus?

Ich wundere mich, weil ich nirgends genau festlege, wie hoch meine Links sind. Ohne padding sind sie 16px hoch (obwohl die Schriftart auf 14px steht). Mit Padding 4px sind sie 16px + 2*4px = 24px. Daher eine kleine Lücke zwischen den einzelnen li's im Beispiel (ul{line-height:25px}).

Ich hoffe, das ich dies richtig gemacht habe...

LG,
LSPREEE

[Gunnar Bittersmann]

@@LSpreee:

nuqneH

Zuvor hatte ich diese mit display:block zum Blockelement gemacht, was mit den Pfeilen nicht funktioniert.

Doch, man kann auch Blockelemente so smal machen, wie es ihr Inhalt erfordert (shrink to fit) – durch absolute Positionierung (hier nicht zu empfehlen) oder 'float' (hier "right" nebst 'clear: right').

Qapla'

[LSpreee]

Doch, man kann auch Blockelemente so smal machen, wie es ihr Inhalt erfordert (shrink to fit) – durch absolute Positionierung (hier nicht zu empfehlen) oder 'float' (hier "right" nebst 'clear: right').

Vielen Dank, jetzt habe ich es damit hinbekommen, was mir gut gefällt.

Allerdings bringt das wieder ein Problem, was ich nicht verstehe. Ich bitte nocheinmal um Hilfe. Ich weiß nicht, wie ich es beschreiben soll: zunächst ist mir aufgefallen, dass das ul nicht mehr auf margin-Angaben reagiert. Dann habe ich im Firebug gesehen, dass das ul keine Höhe mehr hat, als wenn der Inhalt von ul und li fehlt.
Wenn ich auf das li noch ein

div.body #leftnavi ul li{  
  width:100%;  
  height:25px;  
} 

gebe, geht es wieder. Geht daran ein Weg vorbei?

Auf alle Fälle vielen Dank für alle Hilfe soweit.

LG,
LSpreee

[Gunnar Bittersmann]

@@LSpreee:

nuqneH

Dann habe ich im Firebug gesehen, dass das ul keine Höhe mehr hat, als wenn der Inhalt von ul und li fehlt.

Floats beeinflussen nicht die Höhe des Container-Elements. Es sei denn, sie sind eingeschlossen.

Qapla'

[Baba]

VIELEN DANK, für die Hilfestellung!!!

[Matthias Apsel]

Om nah hoo pez nyeetz, LSpreee!

Die Listenelemente werden sichtbar, wenn sie einen Hintergrund bekommen. Für ein gutes Design, wäre es hilfreich, wenn die Hintergrundgrafik einen transparenten Hintergrund hätte.

Matthias

[LSpreee]

Die Listenelemente werden sichtbar, wenn sie einen Hintergrund bekommen. Für ein gutes Design, wäre es hilfreich, wenn die Hintergrundgrafik einen transparenten Hintergrund hätte.

Hallo Matthias,
auf welche Frage ist dies eine Antwort? Komme gerade durcheinander.

Also die graue Hintergrundfarbe ist nur für die Problemseite eingefügt. Ich blendete sie nur ein, damit man den klickbaren Bereich visualisiert bekommt. Hätte ich vielleicht dazuschreiben sollen...

War es das, was du meintest? Wie sieht es mit der Frage zu dem Padding auf a aus?

LG,
Lspreee

[Matthias Apsel]

Om nah hoo pez nyeetz, LSpreee!

Die Listenelemente werden sichtbar, wenn sie einen Hintergrund bekommen. Für ein gutes Design, wäre es hilfreich, wenn die Hintergrundgrafik einen transparenten Hintergrund hätte.

Hallo Matthias,
auf welche Frage ist dies eine Antwort? Komme gerade durcheinander.

von deiner Seite: "Eine Zusatzfrage: wie kann man es erreichen, dass die Links wieder größere Boxen bekommen?"

Wenn du möchtest, dass alle Links gleich breit _aussehen_ und sie trotzdem vor dem Text den Pfeil haben, musst du den li-Elementen, die als Blockelemente ja alle so breit, wie die Liste sind eine Hintergrundfarbe geben, die a-Elemente können transparent bleiben.

Den Klickbereich vergrößern kann man durch die Angabe von display: block für die a-Elemente. Dann bist du mit deinen Pfeilen aber wieder am AUsgangspunkt.

War es das, was du meintest? Wie sieht es mit der Frage zu dem Padding auf a aus?

Warum soll es nicht erlaubt sein, den a-Elementen ein padding zu geben? Und die Frage nach dem Aussehen musst du schon selbst testen.

Matthias

[LSpreee]

von deiner Seite: "Eine Zusatzfrage: wie kann man es erreichen, dass die Links wieder größere Boxen bekommen?"

Wenn du möchtest, dass alle Links gleich breit _aussehen_ und sie trotzdem vor dem Text den Pfeil haben, musst du den li-Elementen, die als Blockelemente ja alle so breit, wie die Liste sind eine Hintergrundfarbe geben, die a-Elemente können transparent bleiben.

Es ging tatsächlich um gleich _hoch_ aussehen. Außerdem ist vergrößert sich dadurch, denke ich, nicht der klickbare Bereich. Vielen Dank dennoch, für die Ausführung.

Den Klickbereich vergrößern kann man durch die Angabe von display: block für die a-Elemente. Dann bist du mit deinen Pfeilen aber wieder am AUsgangspunkt.

Das fand ich bereits heraus :)

War es das, was du meintest? Wie sieht es mit der Frage zu dem Padding auf a aus?

Warum soll es nicht erlaubt sein, den a-Elementen ein padding zu geben? Und die Frage nach dem Aussehen musst du schon selbst testen.

Also ist es über padding die einzige Möglichkeit eine größere Höhe der a zu erreichen. Vielen Dank für alle Hilfestellung.

Cheers