Putting Images in Lists

Hey guys,

I'm new to CSS and I've managed to make a list where the backround colour changes on scrollover. I want to put a different image on each line of my list. It'll act as the bullet I guess but larger. Sort of similar to what's on this page http://www.corkd.com at the very bottom where the wine bottles are the image. But rather than only using two, I'll have a different image for each line of my list.

How do I pull this off?

Not sure if you need this, but here's the CSS I have for the list:


#navcontainer2 { width: 234%; }

#navcontainer2 ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer2 a
{
display: block;
padding: 3px;
width: 234px;
background-color: #F3F1E9;
}

#navcontainer2 a:link, #navlist2 a:visited
{
color: #326EA1;
text-decoration: none;
}

#navcontainer2 a:hover
{
background-color: #F6F1DE;
color: #326EA1;
}

Thanks!
Kirsty

 

here is what I would do:

HTML

<ul>
<li><img src="bullet.gif" alt="" /> 1</li>
<li><img src="bullet.gif" alt="" /> 2</li>
</ul>

CSS
ul {
list-style: none;
}

Code (markup):

Honestly, i would scratch the list though, and jsut do it with <br />

 

Isn't BR just line breaks? I guess the thing I want to do is highlight the backround on rollover and I'm new to CSS and just found a list that did what I wanted and am trying to customise it to look how I want. You're probably right though! Any more specific advice on what code to use to do what I want?

 

another method

<ul>
<li class="list1">1</li>
<li class="list2">2</li>
</ul>

CSS
ul {
list-style-type: none;
}

ul li {
display: inline;
}

.list1 {
background: url(image1.gif);
}

.list2 {
background: url(image2.gif);
}

 

HTML:

<img class="left" src="image1.gif" alt="" /><a class="hover">Text</a>
<img class="left" src="image2.gif" alt="" /><a class="hover">Text 2</a>

CSS

img.left {
width: 100px;
height: 100px;
border: 0;
margin: 0;
}
a.hover {
display: block;
width: 100px;
height: 100px;
margin: 0;
color: #FF9;
}
a.hover:hover {
color: #9FF;
}