List with images...

If you want to have a great web design on your web site, you may use costum listing instead of the default one. The best approach to use some CSS.

The CSS

Copy and Paste this code between your </HEAD> and </HEAD> tags

#costum_ul li {
margin-left: 0;
padding-left: 0px; /* distance between marker and text */
margin-bottom: 5px; /* vertical spacing between list items */
}
</style>

The HTML

And how to make it work? Just copy and paste this code somewhere between your <BODY> and </BODY> tags:

<ul id="costum_ul">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

This is what you get

first
second
third

Some explanation:

In your ul you have added the
list-style: url(http://attilla.co.uk/web-tips/pics/costum_li.png);
Obviously you'll need to replace with your picture's path.

The margin and padding properties could confuse some people. For now, just use this one, but do not worry, i will speak about that in my following tutorial :)

This web design tutorial brought you by Attila Hajdu, expert web designer, multimedia specialist in Portsmouth.

back to css tips