Want to spruce up your unordered list but not sure how to begin? First, let's consider the structure of the unordered list:
<ul>
<li>bullet point one</li>
<li>bullet point two</li>
<li>bullet point three</li>
</ul>
By creating a css reference to the unordered list we can replace the standard bullet with our own manufactured symbol. Here's some css code to consider,
/* define the font used, font dimensions, color, disable the bullets by setting list-style to none */
/* position the bullet points 7 pixels apart and leave a 20 pixel margin after the list; adjust for your own application */
.forum-list {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
text-align: left;
color: #ff0000;
list-style: none;
margin: 7px 0 20px 0;
padding: 0 0 0 0;
}
/* for each listed item add a GIF background call forum-bullet */
/* do not repeat the background image */
/* position the bullet 17 pixels in from the left; adjust for your own application */
.forum-list li {
background: url(../images/common/forum-bullet.gif) no-repeat left 0px;
margin: 2px 0 0 0;
padding: 0 0 0 17px;
}
With this css structure you can now revise your HTML syntax as follows,
<ul class="forum-list">
<li>bullet point one</li>
<li>bullet point two</li>
<li>bullet point three</li>
</ul>
Try is out!