Nina: Abstand zw. Listengrafik u. Text einer Liste bestimmen

Hallo an alle,

ich habe folgendes Problem und im Archiv leider auch nichts konkretes gefunden.

Ich habe eine unsorted list (<ul>) wo ich anstatt den Bulets eine eigene Grafik einbinden möchte.

Nun würde ich gerne den Standardabstand zwischen der Grafik und dem Text verkleinern.

Wie geht das?

Danke im Voraus.
Gruss

Nina

  1. Hi,

    per margin und padding im <ul>-tag, also beispielsweise:
    <ul style="padding:0px;margin:0px">
    So sollte der Inhalt der Listenpunkte direkt hinter der Listengrafik stehen.

    mfg
    Philipp

    1. Hallo Philipp

      per margin und padding im <ul>-tag, also beispielsweise:

      Habe ich bereits probiert. Funktioniert leider nicht.

      1. Hallo Nina,

        versuch mal

        <ul style="margin-left:50px;padding-left:0px;border:1px solid red;list-style-image:url(punkt.gif)">
         <li style="margin-left:0px;padding-left:0px;border:1px dotted green">margin-left:0px;padding-left:0px</li>
         <li style="margin-left:20px;padding-left:0px;border:1px dotted green">margin-left:20px;padding-left:0px</li>
         <li style="margin-left:0px;padding-left:20px;border:1px dotted green">margin-left:0px;padding-left:20px</li>
         <li style="margin-left:10px;padding-left:10px;border:1px dotted green">margin-left:10px;padding-left:10px</li>
        </ul>

        und Spiel ein bisschen mit den Werten. So bekommst Du ein Gefühl dafür, was wie wirkt.

        Gruß, Jürgen

        1. Hallo Jürgen,

          danke für das Beispiel. Leider schaffe ich es trotzdem nicht, dass der Abstand zwischen dem Punkt und dem Text auf 3px kommt.

          Den Abstand vergrößern ist kein Problem, aber ihn zu verkleinern dafür schon.

          Gruss
          Nina

          1. Hallo,

            Den Abstand vergrößern ist kein Problem, aber ihn zu verkleinern dafür schon.

            Die Listen-Formatierung mit CSS ist nicht ganz trivial,
            weil die Browser eigene Vorstellungen davon haben.
            http://www.subotnik.net/style/list-box-test.html
            http://devedge.netscape.com/viewsource/2002/list-indent/

            Gerade das Bild von list-style-image kann man nicht beliebig
            positionieren u.s.w.
            Deshalb behelfen sich manche Bastler damit, das Bild als
            Hintergrundbild fuer <li> einzubauen, mit einem entsprechenden
            Padding, und list-style-type auf "none" zu setzen.
            Das ist zwar etwas umstritten, aber koennte Dir helfen...

            Gruesse,

            Thomas

            --
            Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
            Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
            Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/