Hi All

I'm trying to create a list where each item has a unique image attached to it. I've tried giving each <li> it's own id but can't get the individual images to show.

The list contains eight items, I've just pasted in the code (below) for two of them as an example of what I have written.

Could anyone point out where I'm going wrong?

Many thanks,

Dunners


CSS

PHP Code:

#sidebar ul {margin: 1px 1px;}

#sidebar li {border-bottom:dashed #dbdbdb 1px;display:block; list-style:none; padding: 5px 5px 5px 40px;}

#sidebar li.desktop {background:url(/images/icons/health_check.png) no-repeat 0 0;}

#sidebar li.healthcheck {background:url(/images/icons/health_check.png) no-repeat 0 0;} 


HTML

<div id="sidebar">
<ul>
<a href="healthcheck.html"><li id="healthcheck">
<h2>System Health Check</h2>
<p>Let us assess the health of your IT Systems</p> 
<p>more...</p>
</li></a>

<a href="desktop.html"><li id="desktop">
<h2>Desktop &amp; Server Solutions</h2>
<p>Hardware and software solutions for all needs</p> 
<p>more...</p>
</li></a>

<a href="storage.html"><li id="storage">
<h2>Data Storage</h2>
<p>Protect your data from attack or intrusion</p> 
<p>more...</p>
</li></a>
</ul>
</div>

#sidebar ul {margin: 1px 1px;}

#sidebar li {border-bottom:1px dashed #dbdbdb;display:block; list-style:none; padding: 5px 5px 5px 40px;}

div ul li.desktop {background: url('/images/icons/health_check.png') no-repeat 0 0;} 

div ul li.healthcheck {background: url('/images/icons/health_check.png') no-repeat 0 0;}  

<div id="sidebar">
<ul>
	<li class="healthcheck">
	<div>
			<a href="healthcheck.html">
				<h2>System Health Check</h2>
				<p>Let us assess the health of your IT Systems</p> 
				<p>more...</p>
			</a>
	</div>
	</li>
	


	<li class="desktop">
		<a href="desktop.html">
			<h2>Desktop &amp; Server Solutions</h2>
			<p>Hardware and software solutions for all needs</p> 
			<p>more...</p>
			</a>
	</li>

	<li class="storage">
		<a href="storage.html">
			<h2>Data Storage</h2>
			<p>Protect your data from attack or intrusion</p> 
			<p>more...</p>
		</a>
	</li>
</ul>
</div>

try this

Dunners, your problem, from the code you posted, is that you're using an ID in your html, but you've defined the css as a CLASS. R1im's example above corrects that.

You need to check out the div tag and if there is no problem in it then check out all the li tags....

Hi, Friends...
Thanks for such a nice post...