In this tutorial I am going to show you how to customize near enough everything about your lists. This is not as hard as it may sound, the hardest thing is deciding when to stop customizing!
- Object 1
- Object 2
- Object 3
- Object 4
- Object 5
Here you see we have a list, this hasn't been altered in anyway. Now using CSS lets go to work on it!
In the head of your page add this code;
<style type="text/css">
ul {
list-style-type: none;
font-family: Verdana, Arial;
font-size: 12px;
line-height: 15px;
}
</style>
|
And the HTML is:
<ul>
<li>Object 1</li>
<li>Object 2</li>
<li>Object 3</li>
<li>Object 4</li>
<li>Object 5</li>
</ul>
|
You will end up with something that looks like this:
Click here to see the result
I think this is looking better now. Now, what about if you want a custom image for your list bullet? This isn't hard at all:
Click here to see the result
You see how much nicer the list looks now? The image is a 8x8 gif, I have found that images this size work the best. Ok, now how did I do this?
<style type="text/css">
ul {
list-style-type: none;
font-family: Verdana, Arial;
font-size: 12px;
line-height: 15px;
}
li {
background-image: url(customlistimage.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
</style>
|
Here is the CSS, the HTML can remain the same unless of course you use more than one list and want to keep this one different, in that case you will want to use classes, if you want more information on these go to: Weborum - Classes Tutorial.
Ok, you may now be thinking what else is there you can do, how about adding a custom image to each list li? This is a good technique if you are linking to certain file types
Click here to see the result
Now you can see for every list there is a different image, this is just using classes and is easy to do.
<style type="text/css">
ul {
list-style-type: none;
font-family: Verdana, Arial;
font-size: 12px;
line-height: 22px;
}
li {
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 21px;
}
li.1 {
background-image: url(1.gif);
}
li.2 {
background-image: url(2.gif);
}
li.3 {
background-image: url(3.gif);
}
li.4 {
background-image: url(4.gif);
}
li.5 {
background-image: url(5.gif);
}
</style>
|
This is the CSS, now all you need to do is add the classes to your tags;
<ul>
<li class="1">Object 1</li>
<li class="2">Object 2</li>
<li class="3">Object 3</li>
<li class="4">Object 4</li>
<li class="5">Object 5</li>
</ul>
|
There you have it, different images for each list element. Now you may be thinking, what else is there I could possibly do? Well to be honest there is no end to what you can achieve, all you need to do is play around.