list-style-image positionieren

[tinu]

Hi allerseits!

Ich hab eine Frage zu den Bullets einer CSS formatierten Liste. Die normalen Bullets sind ja immer ca. in der Mitte des Wortes (vertikal) ausgerichtet. Nun habe ich per list-style-image ein Bild eingefügt. Dieses beginnt am oberen Textrand/Wortrand. Ich habe hier mal ein Beispiel dazu verlinkt (die Farben sind nur um zu zeigen wo welche Bereiche beginnen und aufhören ;) )<mypage.bluewin.ch/tattergreis/test>

Ist es möglich diese bildchen irgendwie vertikal einzumitten? Das sieht nämlich ziemlich sch... aus je grösser der Zeilenabstand ist.

Besten Dank im Voraus!
Tinu

[Dieter Raber]

Hallo tinu,

Nun habe ich per list-style-image ein Bild eingefügt.

Nach meinen Erfahrungen wird man mit list-style-image nicht so richtig froh. Ich halte es fuer eine bessere Idee, list-style auf none zu setzen und das Bild via background-image/position zu platzieren.

Gruß,

Dieter

[tinu]

Hi!

Danke für den Tipp! Wär ne gute Idee, aber wenn ich z.b. bei a:hoover ne hintergrundfarbe definiere, würde diese die hintergrundgrafik verdecken.

Danke trotzdem.

Liebe Grüsse
Tinu

[Dieter Raber]

Hallo tinu,

Danke für den Tipp! Wär ne gute Idee, aber wenn ich z.b. bei a:hoover ne hintergrundfarbe definiere, würde diese die hintergrundgrafik verdecken.

Setz doch dein Bild auf a, anstatt auf li und wechsle oder verschiebe es beim Hovern, oder nimm was Transparentes, das die Farbe durchlaesst.

Gruß,

Dieter

[tinu]

Gleich noch ne andere Frage:

Wie kann man denn eigentlich den Einzug (vom linken Rand zum bullet und den Einzug für die Unterpunkte) verkleinern ohne bei text-indent ne minuszahl angeben zu müssen? (ps: ich hasse browser-"standart"-einstellungen die man nicht mit einem befehl überschreiben kann)

gruss
tinu

[MudGuard]

Hi,

aber wenn ich z.b. bei a:hoover ne hintergrundfarbe definiere, würde diese die hintergrundgrafik verdecken.

Nö, mir ist kein Browser bekannt, der darauf reagiert, wenn ein Link staubgesaugt wird.
Abgesehen davon: wenn das Bild im li als Hintergrundbild ist, kann das a-Element per padding-left im li ausreichend weit nach rechts geschoben werden, daß ein hover-Effekt (hover, nicht hoover!) des Links das Bild nicht beeinträchtigt.

Wenn Du die Schrift mal größer stellst, erkennst Du, daß Deine Theorie (Bild an Oberkante Schrift) zumindest im Firefox nicht stimmt, der setzt das Bild auf die Basislinie (der ersten Zeile) der Schrift. Auch Opera macht es so (wobei der die Bilder ja mitskaliert, so daß man den Effekt noch schlechter sieht).
IE hab ich jetzt nicht getestet, der hat localhost-Arrest, und ich hab jetzt keine Lust, erst ne Testseite zu bauen ...

Für die Einrückungen: hier sind mindestens 6 Werte im Spiel: jeweils die linken margin, border, padding von ul und li. Setze diese alle auf von Dir gewünschte Werte.

cu,
Andreas