Hi

 

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

#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 & 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> 

Edited April 10, 201016 yr by Sam G
added [code] tags

#sidebar li.desktop change to #sidebar li#desktop

 

#=id .=class

This is not related to your query, but I could not help noticing it.

 

You might run into problems sooner or later if you wrap block-level elements inside inline elements. Even if all appears well, it's still very poor mark up and does no good for accessibility (just listen to LIs and headings all mixed up).

 

If you are doing it primarily for the sake of expanding the anchors, I suggest that you wrap those anchors inside the headings, use divisions instead of list items, and expand the links with jQuery (try biggerlink), a la progressive enhancement. Anchors are inline elements.

I also noticed what Ade said...put more simply, you should have your <a> tags inside your <li> tags & not the other way round & the H2 & P shouldn't be in there...it should be more along the lines of:

 

<li id="desktop">
   <a href="desktop.html">Desktop & Server Solutions<br>
   <span class="intro">Hardware and software solutions for all needs<br>
   more...</span>
   </a>
</li>