Comment changer l'apparence de sa liste ?

Bonjour tout le monde.

Voilà, j'essaye de faire une liste avec un background qui change de couleur au passage de la souris, mais forcément ça marche pô...

Si quelqu'un peut regarder un peu le code et me dire ou est ma (mes) erreurs, je le remercie d'avance :

CODE CSS :

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	color: #565656;
}

img {
    border: none;
} 

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.update{
	position:absolute;
	width:250px;
	margin:0px;
	background-position: top;
	background-repeat: no-repeat;
	padding: 10px 0 0 0;
}

ul.contacts  {
	list-style-type: none;
	margin:0px;
	padding:0px;
	text-align: left;
}
ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
li.contact {
	list-style-type: none;
	display:block;
	margin:0;
	padding:2px;
	height:25px;
}
li.contact div.image {
	float:left;
	width:32px;
	height:25px;
	margin-right:8px;
	margin-left:8px;
	background:none;
}
li.contact div.nom {
	font-weight:bold;
	font-size:11px;
	line-height:1.2em;
	background:none;
}

#blockCorners {
    background: #F9CF0C;
    border: 1px solid #000000;
    position: relative;
    margin: auto;
    width: 400px;
    padding: 5px;
}

#blockCorners .corner_topleft,
#blockCorners .corner_topright,
#blockCorners .corner_bottomleft,
#blockCorners .corner_bottomright {
    background: url("img/corners.jpg") no-repeat;
    position: absolute;
    height: 8px;
    width: 8px;
}

#blockCorners .corner_topleft {
    top: -1px;
    left: -1px;
}

#blockCorners .corner_topright {
    background-position: 100% 0;
    top: -1px;
    right: -1px;
}

#blockCorners .corner_bottomleft {
    background-position: 0 100%;
    bottom: -1px;
    left: -1px;
}

#blockCorners .corner_bottomright {
    background-position: 100% 100%;
    bottom: -1px;
    right: -1px;
}

CODE HTML :

<div class="update">

	<div id="blockCorners">
		<span class="corner_topleft">&nbsp;</span><span class="corner_topright">&nbsp;</span>
		<span class="corner_bottomleft">&nbsp;</span><span class="corner_bottomright">&nbsp;</span>

<ul class="contacts">
		
<li class="contact"><div class="image"><img src="image/departement/1-dep.gif" width="24" height="24"/></div><div class="nom">azerty</div></li>
<li class="contact"><div class="image"><img src="image/departement/2-dep.gif" width="24" height="24"/></div><div class="nom">dgsdfgdsfg</div></li>
<li class="contact"><div class="image"><img src="image/departement/3-dep.gif" width="24" height="24"/></div><div class="nom">afghtyjtyzerty</div></li>
<li class="contact"><div class="image"><img src="image/departement/4-dep.gif" width="24" height="24"/></div><div class="nom">azcvxcvsererty</div></li>
<li class="contact"><div class="image"><img src="image/departement/5-dep.gif" width="24" height="24"/></div><div class="nom">ngyjyr</div></li>
<li class="contact"><div class="image"><img src="image/departement/6-dep.gif" width="24" height="24"/></div><div class="nom">azersdfgstrhty</div></li>
<li class="contact"><div class="image"><img src="image/departement/7-dep.gif" width="24" height="24"/></div><div class="nom">rthrtyuykhj</div></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;...</li>

</ul>

	</div>


</div>

En fait ça marchait très bien jusqu'à temps que j'essaye de faire des coins arrondis à ma boite (#blockCorners ...) avec ce code trouvé sur le net :
http://www.tommyl.be/dev/xhtml-css/creer-blocs-aux-coins-arrondis-tres-facilement (d'ailleurs j'ai essayé avec le code d'ici et cela fait pareil.)
j'ai également besoin de ma class="update" car elle me sers dans un effet ajax, la boite apparaît et disparaît selon où se trouve le pointeur de la souris.


Et bien merci encore à celui qui pourra éclairer ma petite tête

Modifié par lugdanum (19 Mar 2008 - 19:36)