Lage des Bildes bei list-style-image:url

[Jürgen Berkemeier]

Hallo,

ich habe mit
<ul style="list-style-image:url(/Physik/img/sign_link.gif)">
das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand. (Siehe auch http://www.uni-muenster.de/Physik/UL_mit_Bild.html. Wie kann ich die Lage des Bildes zum Listentext beeinflussen?

Gruß,     Jürgen

[apstrakt]

Hallo,

ich habe mit
<ul style="list-style-image:url(/Physik/img/sign_link.gif)">
das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand.

Das Bild wird im MOZ doch sogar noch abgeschnitten.

Wie kann ich die Lage des Bildes zum Listentext beeinflussen?

Gar nicht. :(
Darüber habe ich mich auch schon x-mal geärgert. Du kannst wahrscheinlich nur mit Tricks versuchen, das Problem zu umgehen: an der Zeilenhöhe schrauebn, ggf. den Listeninhalt in einem DIV containern und diesen mit geeigneten margins versehen, u.U. mußt Du die Grafik (von der Höhe her) auch nochmal anpasssen...

Tschau,
apstrakt

[wahsaga]

hi,

ich habe mit
<ul style="list-style-image:url(/Physik/img/sign_link.gif)">
das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand. (Siehe auch http://www.uni-muenster.de/Physik/UL_mit_Bild.html. Wie kann ich die Lage des Bildes zum Listentext beeinflussen?

die browser reagieren hier leider sehr unterschiedlich.

am einfachsten umgehst du das problem, in dem du list-style-image:none benutzt, und dann die listenpunkte als hintergrundbild in die <li> einbindest (wiederholung des hintergrundbildes abschalten, positionieren, paddings definieren).

gruss,
wahsaga

[Heiko Jägle]

Huhu!

hi,
am einfachsten umgehst du das problem, in dem du list-style-image:none benutzt, und dann die listenpunkte als hintergrundbild in die <li> einbindest (wiederholung des hintergrundbildes abschalten, positionieren, paddings definieren).

Diese Lösung hat den Nachteil, dass beim Drucken die Listenpunkte nicht mehr zu sehen sind. Oftmals werden beim Drucken alle Hintergründe weggelassen.
Aber wer's nicht braucht, kann es so machen.

gruss,
wahsaga

Grüsse zurück
Heiko

[CarstenP]

Hallo,

Diese Lösung hat den Nachteil, dass beim Drucken die Listenpunkte nicht mehr zu sehen sind. Oftmals werden beim Drucken alle Hintergründe weggelassen.

Dafür kann man ja ein extra print-Stylesheet einbinden, in dem z.B. die normalen Listenpunkte wieder eingeblendet werde.

Viele Grüße
Carsten

[Jürgen Berkemeier]

Hallo,

das ist hier kein Problem, da die Liste (Navigation) beim Drucken ausgeblendet wird.

Gruß,     Jürgen

[Jürgen Berkemeier]

Hallo,

hab ich probiert, sieht aber auch nicht besser aus.
http://www.uni-muenster.de/Physik/UL_mit_Bild.html
Die Bilder hängen jetzt in beiden Browsern ganz oben, die Listen rücken noch weiter nach rechts, und der MOZ ignoriert negative angaben bei margin-left.

Gruß,     Jürgen

[wahsaga]

hi,

hab ich probiert, sieht aber auch nicht besser aus.
http://www.uni-muenster.de/Physik/UL_mit_Bild.html
Die Bilder hängen jetzt in beiden Browsern ganz oben

erweitere den css-code mal um eine angabe zur positionierung des hintergrundbildes, left center.

gruss,
wahsaga

[Jürgen Berkemeier]

Hallo,

das wird ja immer besser. Vielen Dank schon mal.
Jetzt besteht aber immer noch das Problem, dass die Liste im MOZ/NN immer noch sehr weit nach rechts geschoben ist.

gruss,
wahsaga

Gruß,     Jürgen

[CarstenP]

Hallo Jürgen,

und der MOZ ignoriert negative angaben bei margin-left.

Zum Thema marign und padding bei ul/ol und li: Da hat so ziemlich jeder Browser seine eigenen Vor(ein)stellungen

http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/

Viele Grüße
Carsten

[Jürgen Berkemeier]

Hallo,

danke an alle. Leider konnte ich nur lernen, das mit CSS noch nicht alles geht und ein Verzicht auf Tabellenlayouts nicht so einfach möglich ist, es sei denn, man nimmt Layoutänderungen in Kauf.
Die in meinen Postings angegebene Testseite werde ich löschen, daher hier noch einmal fürs Archiv der Inhalt:

<ul style="list-style-image:url(Bild1.gif)">
 <li>Punkt 1<br>Punkt 1b</li>
 <li>Punkt 2</li>
</ul>
<ul style="list-style-image:url(Bild2.gif)">
 <li>Punkt 1<br>Punkt 1b</li>
 <li>Punkt 2</li>
</ul>
<ul style="list-style-type:none;margin-left:0px">
 <li style="background-image:url(Bild1.gif);
            background-repeat:no-repeat;
            padding-left:15px">
            Punkt 1<br>Punkt 1b</li>
 <li style="background-image:url(Bild2.gif);
            background-repeat:no-repeat;
            padding-left:15px">
            Punkt 2</li>
</ul>
<ul style="list-style-type:none;margin-left:0px">
 <li style="background-image:url(Bild1.gif);
            background-position:0px 5px;
            background-repeat:no-repeat;
            padding-left:15px">
            Punkt 1<br>Punkt 1b</li>
 <li style="background-image:url(Bild2.gif);
            background-position:0px 5px;
            background-repeat:no-repeat;
            padding-left:15px">
            Punkt 2</li>
</ul>

Gruß,     Jürgen

[Thomas Luethi]

Hallo,

Die in meinen Postings angegebene Testseite werde ich löschen, daher hier noch einmal fürs Archiv der Inhalt:

Whow - vorbildlich! Sehr vorausschauend von Dir!

<li style="background-image:url(Bild2.gif);
            background-position:0px 5px;
            background-repeat:no-repeat;
            padding-left:15px">
            Punkt 2</li>

Vielleicht hast Du es aus "didaktischen" Gruenden so
ausfuehrlich geschrieben, vielleicht kennst Du auch
die Kurzschreibweise ("shorthand") noch nicht.
Es geht auch viel kuerzer:

background:url(Bild1.gif) no-repeat 0 5px;
padding-left:15px;

http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background
http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background

Gruesse,

Thomas