✔ "list-style-image" und "list-style-position"

[Harzteufel]

Hallo, ich habe folgenden HTML-Code:

<div id="left">
<ul id="sublist">
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
</ul>
</div>

mit dazugehörigem CSS-Code:

#left {
float: left;
min-height: 500px;
width: 200px;
color:#000;
border-right: 1px solid #B8C8DB;
border: 1px solid #000;
padding: 10px;
}
#sublist li {
list-style-image: url(img/subpfeil.gif);
list-style-position: outside;
margin-left: 20px;
}
#sublist li a {
display: block;
text-decoration: none;
font-size: 1em;
padding: 5px 0;
border-bottom: 1px solid #B8C8DB;
width: 200px;
color: #325A8C;
}
#sublist li a:hover {
text-decoration: none;
color: #A50E0E;
border-bottom: 1px solid #A50E0E;
}




Schaut Euch mal bitte den Anhang an. Hat jemand ne Idee, wie ich dies umsetze? Vielen Dank!

 

[Maik]

Hi,

versuch es mal mit diesem Stylesheet:

#sublist {
margin:0;
padding:0;
}
#sublist li {
list-style-image: url(img/subpfeil.gif);
list-style-position: outside;
}
#sublist li a {
display: block;
text-decoration: none;
font-size: 1em;
padding: 5px 0 5px 20px;
border-bottom: 1px solid #B8C8DB;
width: 180px;
color: #325A8C;
}
#sublist li a:hover {
text-decoration: none;
color: #A50E0E;
border-bottom: 1px solid #A50E0E;
}

 

[Harzteufel]

Danke, aber leider fügt er zwischen dem Listenzeichen, also dem Pfeil, und dem Text nur ne größere Lücke ein... "border-bottom" wird gesetzt, aber die Pfeile werden einfach nach links rausgeschoben. Haste noch ne andere Idee?

 

[Maik]

#sublist {
margin:0;
padding:0;
list-style:none;
}
#sublist li {
/*list-style-image: url(img/subpfeil.gif);*/
list-style-position: outside;
}
#sublist li a {
display: block;
text-decoration: none;
font-size: 1em;
padding: 5px 0 5px 20px;
border-bottom: 1px solid #B8C8DB;
width: 180px;
color: #325A8C;
background:url(img/subpfeil.gif) no-repeat left center;
}

 

[Harzteufel]

Klasse, so funktioniert es! Besten Dank für die schnelle Hilfe