Abstand zw. Listengrafik u. Text einer Liste bestimmen
Nina
- css
0 Philipp Grashoff0 Nina
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
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
Hallo Philipp
per margin und padding im <ul>-tag, also beispielsweise:
Habe ich bereits probiert. Funktioniert leider nicht.
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
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
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