Menu lateral

buenas tardes gente!
queria hacer una pequeña consulta...
en el curso paso a paso, en el menu lateral se pone de fondo una imàgen vale?
pues yo quiero hacer lo mismo pero poner una imagen de fondo para cada enlace, no se si me explico...
es decir, si en el menu lateral tengo enlace 1, enlace 2, enlace 3...
pues para cada enlace quiero poner una imagen de fondo.

¿como lo podria hacer?

Echa un vistazo en google:

LISTAS CSS

Hola tony

bueno eso es facil en la hoja de estilos es todo :P huy pensandolo bien es facil pero un poco largo :P empecemos :P se me ocurre poner en imagen los enlaces:

en tu html:

supuestamente tienes

<div id="navegacion">
<ul>
[*][url="#"][img]objetos/seccion1.algo:P[/img]</img>[/url]
[*][url="#"][img]objetos/seccion2.algo:P[/img]</img>[/url]
[/list]
</div>

o tambien se me ocurre crear varios divs uno para cada enlace

en html

<div id="navegacion">
<ul>
[*]<div id="seccion1">[url="#"]seccion1[/url]
[*]<div id="seccion2">[url="#"]seccion2[/url]
[*]<div id="seccion3">[url="#"]seccion3[/url]
[/list]
</div>

en css:

#seccion1 {float:left;margin:el margen q quieras :P}
#seccion1 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion1 a:link			  {}
#seccion1 a:visited 		{}
#seccion1 a:hover {color:red ; text-decoration:underline; background-color: silver}
#seccion1 a:active	 {}

#seccion2 {float:left;margin:lo mismo q arriba :P} 
#seccion2 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion2 a:link			  {}
#seccion2 a:visited 		{}
#seccion2 a:hover {color:red ; text-decoration:underline; background-color: silver}
#seccion2 a:active	 {}

#seccion3 {float:left;margin:lo mismo q arriba :P} 
#seccion3 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion3 a:link			  {}
#seccion3 a:visited 		{}
#seccion3 a:hover {color:red ; text-decoration:underline; background-color: silver}
#seccion3 a:active	 {}

largito :P

ahora para q cambie cuando le pasas el raton por encima :P

en css:

#seccion1 {float:left;margin:el margen q quieras :P}
#seccion1 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion1 a:link			  {}
#seccion1 a:visited 		{}
#seccion1 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/ya sabes :P)}
#seccion1 a:active	 {}

#seccion2 {float:left;margin:lo mismo q arriba :P} 
#seccion2 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion2 a:link			  {}
#seccion2 a:visited 		{}
#seccion2 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/ya sabes :P)}
#seccion2 a:active	 {}

#seccion3 {float:left;margin:lo mismo q arriba :P} 
#seccion3 a {background-imge: url(objetos/imagen.algo :P) ; text-decoration:none }
#seccion3 a:link			  {}
#seccion3 a:visited 		{}
#seccion3 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/ya sabes :P)}
#seccion3 a:active	 {}

Recuerda esto es para los enlaces del menu de la navegacion cambias para el menu lateral algunas cosas. bueno avisas cualquier cosa :P

He intentado hacer lo que me has dicho... pero no me sale :S
me sale solo el boton de cuando paso el cursor por encima y ademas me sale cortado :S
lo e hecho con divs y todo igual que aqui y que va que va...
si me puedes ayudar en algo...

deja tu url(direccion de web ) asi lo veo como esta

mira te dejo como lo tengo puesto en css i en html
y tambien te dejo la url para que veas como me queda...
la web es la de paso a paso pero quiero ir retocando cosas como el menu horizontal, el lateral, etc...
y lo que ahora estoy aciendo es el lateral. mi intencion es poner una imagen (boton) en cada sección (membres, formacio professional...) y que al pasar el cursor canvie a otra imagen... y no me sale... aqui te dejo todo =P

HTML

<div id="menu">
<ul>
<h1>Qui som?</h1>

<div id="seccio1">El nostre origen

<div id="seccio2">Membres

<div id="seccio3">Formació actual

<div id="seccio4">Àlbum de fotos

</div>

CSS

#seccio1 {float:left;margin:4px 8px 4px 6px}
#seccio1 a {background-imge: url(objetos/el-nostre-origen.gif) ; text-decoration:none }
#seccio1 a:link {}
#seccio1 a:visited {}
#seccio1 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/el-nostre-origen-sup.gif)}
#seccio1 a:active {}

#seccio2 {float:left;margin:4px 8px 4px 6px}
#seccio2 a {background-imge: url(objetos/membres.gif) ; text-decoration:none }
#seccio2 a:link {}
#seccio2 a:visited {}
#seccio2 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/membres-sup.gif)}
#seccio2 a:active {}

#seccio3 {float:left;margin:4px 8px 4px 6px}
#seccio3 a {background-imge: url(objetos/formacio-actual.gif) ; text-decoration:none }
#seccio3 a:link {}
#seccio3 a:visited {}
#seccio3 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/formacio-actual-sup.gif)}
#seccio3 a:active {}

#seccio4 {float:left;margin:4px 8px 4px 6px}
#seccio4 a {background-imge: url(objetos/album-de-fotos.gif) ; text-decoration:none }
#seccio4 a:link {}
#seccio4 a:visited {}
#seccio4 a:hover {color:red ; text-decoration:underline; background-image: url(objetos/album-de-fotos-sup.gif)}
#seccio4 a:active {}

y la URL: http://racoeduca.comxa.com/


y ya puestos... si ves algun defecto o algo... diemlo porfavor :P
GRACIAS

Tu imagen aparece cortada por q es mas grande q los enlaces. eso puedes solucionarlo cambiando de imagen o aumentandole a los :

#seccion {heigth:aqui el tamaño de tu imagen en pixeles; width: aqui el ancho}

tambien tendrias q q aumentar el ancho de la barra de menu. Pero lo mas acosejable es q consigas una imagen con 100 px de ancho asi te evitaras de muchos problemas :P

y vi a pusiste mal tu codigo huy si yo me equivoq :P
esta linea en todas hay q aumentarle la a :P

#seccio1 a {background-imge: url(objetos/el-nostre-origen.gif) ; text-decoration:none }

asi tiene q estar

#seccio1 a {background-image: url(objetos/el-nostre-origen.gif) ; text-decoration:none } 

Lo siento por no decir nada... estaba de puente jeje
he intentado hacer lo que me dijiste pero que va que va... ni así...
así que lo he dejado normal... ya mas adelante ya lo pondre...

gracias de todos modos!
1 saludo y cuidatee ^^