I need to place a bottom border under outside positioned bullet. I can't use inside positioning because the text wraps under the bullet. Please let me know if its possible to do what i ask.
Thank You.
A:
I find that I have much better luck using a small image for the bullet. You can control exactly where it goes to the pixel.
ul li
{
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
Dustin Laine
2010-10-27 20:25:59
can u give me an example of how to use an image for a bullet
Toliy
2010-10-27 20:40:12
Check my update.
Dustin Laine
2010-10-27 21:32:10
Thanks Dustin, your solution fixed the problem.
Toliy
2010-10-27 21:55:59
No problem, glad it helped. You should mark the question as answered.
Dustin Laine
2010-10-27 22:33:43
A:
Do you need a border under each li or under the last li in the list?
Edit: Sorry i'm new to stackoverflow and didn't realize i asked a question in an answer box.
Solution:
Hopefully you are familiar with the fundamentals of a style sheets. If not go here:
.listName li {
border-bottom: 1px solid #000000;
}
Stephen
2010-10-27 20:26:11
A:
I would remove the bullet and use a background image for your bullet. ensure you hide the original bullet and apply padding. example below will work just need to play with the background position.
<html>
<head>
<title></title>
<style type="text/css" media="screen">
li{
border-bottom:solid #c9c9c9 1px;
background:url(/bullet.gif) no-repeat 0 0;
list-style:none;
margin:0;
padding-left:20px;
}
</style>
</head>
<body>
<ul>
<li>example</li>
<li>example</li>
<li>example</li>
<li>example</li>
<li>example</li>
</ul>
</body>
</html>
etoxin
2010-10-28 02:46:42