Use picture insted of bullet in HTML List (li)
List is a widely used code in today's web designing. Most of us know how a <li> works.
But sometimes we needs to customize li according to our needs to match it with our design. This tutorial will describe how to customize the <li> bullets and use a picture.
Let's write the CSS code for it first.
#custom ul {
list-style-image:url(images/image.gif);
padding-bottom:5px;
text-align:left;
}
#custom ul li {
padding-top:5px;
}
list-style-image:url(images/image.gif);
padding-bottom:5px;
text-align:left;
}
#custom ul li {
padding-top:5px;
}
Now we can write the HTML -
<div id="custom">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>
The buttons can be found at -<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>
Link
Please leave comments and clarification.
Posted by admin in Customization, HTML Elements on Friday, August 28, 2009
