Hi All,

I've just been learning CSS on the fly and now I'm trying to do something that I thought would be quite straightforward..

All I want to do, is display an icon next to a line of certain text in a list..

Example:

o List Item 1
o List Item 2
o List Item 3 [i]
o List Item 4


Each List item is bulletted, but List Item 3 requires an icon next to it (denoted by the [i]).

So far in my CSS sheet, I have the following:

div.contentBox li {
color: #000000;
font-size: 80%;
text-align: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style: url(li_list.gif) square;
}


This is the HTML code i'm using for that:

<div class="contentBox">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>



What I have kludged so far to demonstrate what I want to do, is the following:

<li>List Item 3 <img src="my_image.gif" alt="My Image"></img></li>


This works great, except if I even come to change the "my_image.gif" to something else, I obviously have to go and change all my HTML.

So, big question, how do I create a new class or div or whatever, so I can wrap that "List Item 3" and show an Icon next to it in CSS ?

i.e. <li>List Item 3 <CSS.image> </li>

I hope you understand what i'm trying to do.. :)

cheers,
Grayp

div.contentBox ul {
list-style: url(li_list.gif) inside;
}

add this and take out the list-style in the li tag.

Check out the tutorials here:

http://css.maxdesign.com.au/listutorial/index.htm

It will show you how to use IMG for your bullet. They have tutorial on just about any list type you need too.

Semantically speaking, it does not make sense to display your icon as a CSS background image. If the icon denotes something having to do with the item in that line, it should be displayed as an image. Otherwise, someone using a browser that does not display the image will see appropriate alternative text and will understand the significance of it being there. Ditto for printed pages (most browsers eliminate background images by default on print). If you want to change the icon site-wide later, just upload a new icon by that same name :)

The inline "kludge" you presented is, in fact, the proper way to go about what you're trying to do. Except for one thing - there's no such thing as </img>. If you're trying to close your image tag to be XHTML compliant, add a slash into the end of the opening tag, like so <img src="..." alt="..." />

Just a note to say thanks to you *all* for your speedy replies!

I shall have a go with each idea, and certainly check out that link for List Types - in the end i'll probably end up with what I started with (but at least I know its the right way to do it!! (thanks the_pm for explaining it!)

Also, thanks for the </img> tag tip..!! :D

cheers,
Grayp

Hmmm this is a little oftopic but what is the purpose of CSS? I thought it was just a sheet for for like text styles and stuff.

CSS is fastly becoming, if not already, the standard for web design. The benefits of using CSS are huge.