28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai utilisé le tuto d'alsacreations consacré au menu accordéon. Tout fonctionne nickel mais je souhaiterais ajouter une image avec float à gauche dans le <li class="toggleSubMenu">.
L'image en arriere-plan apparait bien mais pas les images insérées.
Comment faire ?
Merci

Voici le code javascript du tuto:


<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu:not('.open_at_load')").hide();
// On selectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'element span qu'ils contiennent par un lien :
$("li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
} ) ;

// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("fast", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("fast", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("fast", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>


Et voici mon code css:

#accordion {	padding: 0; list-style: none:;	width: 493px; margin: 19px 0 21px 0;}
#accordion a, #accordion span {	display: block;	height: 58px;	background-image: url(img/fond-menu-support.gif);	background-position: left;	background-repeat: no-repeat;
text-decoration: none; color:#000; padding: 9px 50px 7px 20px;
}
#accordion span img{float:left;}
#accordion .open a, #accordion .open span {	background-image: url(img/fond-menu-support-over.gif);	background-repeat: no-repeat;	background-position: left;}	
#accordion a:hover, #accordion a:focus, #accordion a:active {
background-image: url(img/fond-menu-support-over.gif);	background-repeat: no-repeat; background-position: left;}	
#accordion .subMenu {	margin: 0;	padding: 0;	background-color: #E8FFE8}
#accordion ul.subMenu div {	padding: 10px 50px 10px 20px;	border-top-width: 1px;
	border-bottom-width: 1px;	border-top-style: solid;	border-bottom-style: solid;
	border-top-color: #FFF;	border-bottom-color: #FFF;}


Et voici le lien de la page:
http://www.a-doc.com/Testing/Site2009/telecharger/Copie-doc.html
Donc en fait je veux insérer l'image avant le début du texte "Aides à l'instalation...."

Merci de votre aide