Jürgen Berkemeier: Lage des Bildes bei list-style-image:url

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

--
<img src="http://www.uni-muenster.de/Physik/AP/Purwins/leute/Berkemeier/Plasmakugel.gif" border="0" alt="">
  1. 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

    --
    http://www.cafe-abstrakt.de
  2. 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

    1. 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

      1. 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

        1. Hallo,

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

          Gruß, Jürgen

          --
          <img src="http://www.uni-muenster.de/Physik/AP/Purwins/leute/Berkemeier/Plasmakugel.gif" border="0" alt="">
    2. 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

      --
      <img src="http://www.uni-muenster.de/Physik/AP/Purwins/leute/Berkemeier/Plasmakugel.gif" border="0" alt="">
      1. 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

        1. 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

          --
          <img src="http://www.uni-muenster.de/Physik/AP/Purwins/leute/Berkemeier/Plasmakugel.gif" border="0" alt="">
      2. 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

  3. 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

    --
    <img src="http://www.uni-muenster.de/Physik/AP/Purwins/leute/Berkemeier/Plasmakugel.gif" border="0" alt="">
    1. 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