Hallo, ich habe folgenden HTML-Code:

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!

Hi,

versuch es mal mit diesem Stylesheet:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

#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; }

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?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#sublist { margin:0; padding:0; [B]list-style:none;[/B] } #sublist li { [B]/*list-style-image: url(img/subpfeil.gif);*/[/B] 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; [B]background:url(img/subpfeil.gif) no-repeat left center;[/B] }

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