28172 sujets

CSS et mise en forme, CSS3

Menu avec liste a puce en css

bonjours
en fait j'ai fait un menu avec liste a puce en css et j'ai mis a la place des puce, des images
et je veut savoir si il ya une possibilité de changer l'image au passage de la souri sur le lien .
.
j'espere que c'est Compréhensible ce que je vien d'ecrire!
et merci d'avance.
Hello !

Tu peux le faire avec ta feuille de style de cette manière :


li:hover{
list-style-image:url(ton_chemin.png) no-repeat 0 0;
}

Modifié par pfoofen (17 Aug 2009 - 14:28)
Bonjour,

J'aurais tendance à dire oui... ou non.

Ce serait plus facile de te répondre en voyant ton code (ou, mieux, une page en ligne).
pfoofen a écrit :
Hello !

Tu peux le faire avec ta feuille de style de cette manière :


li:hover{
list-style-image:url(ton_chemin.png) no-repeat 0 0;
}


Ne fonctionnera pas sur IE6.
Ah oui pardon ^^

#IE6{
	width:100%;
	position:absolute;
	top:0;
	padding:10px 10px;
	border-bottom:1px solid #ccc;
	background-color:#FFFF99;
	color:#454545;
}


<!--[if IE 6]>
	<div id="IE6">
    	<p><strong>Votre navigateur est obsolète !</strong> Je vous conseil <a href="http://www.google.com/chrome/?hl=fr" title="Installer Google Chrome" target="_blank">d'utiliser un autre navigateur</a> ou de <a href="http://www.microsoft.com/france/windows/ie/" title="Mettre à jour IE" target="_blank">mettre à jour votre version d'Internet Explorer</a> pour visiter ce site.</p>
	</div>
<![endif]-->

Modifié par pfoofen (17 Aug 2009 - 14:33)
Bah tiens...

On va forcer les gens à changer de logiciel -_-

Sache que la plupart des personnes qui utilisent encore IE6 sont des employé qui n'ont pas le choix du logiciel. Les administrateur réseaux n'ayant pas envie ou pas l'autorisation de changer ce navigateur. Les autres, ils s'en foutent, les messages "d'erreur", "d'avertissement" il les connaissent.

Agylus a écrit :
@pfoofen : Qu'est-ce que c'est que cette horreur ?
La réponse est dans la question Smiley langue
Modifié par Laurie-Anne (17 Aug 2009 - 14:36)
Je suis sous IE6... J'attends l'explosion...


ps. : Nous sommes sur un forum qui prone l'accessibilité. L'accessibilité, il ne faut pas l'oublier c'est aussi faire en sorte que l'utilisateur quelque soit sont matériel ou ses logiciel puisse visiter un site, confortablement.
merci de mavoir repondu j'ai essayer mais ca marche pas donc j'espere que je ne serai pas grossier si je met mon code ici
****code html****

<ul class="iconlist" id="menu">
<li class="prof"><a href="profil.html">Profil</a></li>
<li class="parc"><a href="parcours.html">Parcours</a></li>
<li class="form"><a href="formation.html">formation</a></li>
<li class="real"><a href="realisation.html">Realisation</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

****style.css***
.iconlist
{
list-style-type: none;
padding: 0;
margin: 0;
}

li.parc
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}

li.prof
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}

li.form
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}

li.real
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}
li.contact
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}
***********************
en fait j'utilise firefox
Rebonjour,

Première chose à faire : éditer ton précédent message pour rajouter les balises [ code] et [ /code] (sans espace), histoire de rendre sa lectude plus facile (tu peux également utiliser le bouton "Code" qui se trouve sous la zone d'édition du message).

Pour ton problème, tu pourrais effectivement utiliser la pseudo classe :hover : 
li.parc:hover{
background-image:url(images/left-menu2.png); /* l'image de remplacemnt */
}
Mais ce code ne fonctionnera pas pour IE6

Pour que cela fonctionne avec IE6, tu peux utiliser JavaScript (avec l'évènement onMouseOver), mais cela ne fonctionnera bien sûr pas si JS est désactivé. Tu peux également spécifier les images de fond sur l'élément a : 
li.parc a
{
background-image:url(images/left-menu.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 23px 0 3px 20px;
}
li.parc a:hover
{
background-image:url(images/left-menu2.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 23px 0 3px 20px;
}

En ajustant le padding pour que le texte du lien commence après l'image.

overlord a écrit :
en fait j'utilise firefox

Et qu'en est-il de tes (potentiels) utilisateurs ?
Déjà ton CSS tu peux le changer par ça, c'est plus optimisé :


.iconlist{
list-style-type: none;
padding: 0;
margin: 0;
}

ul.iconlist li{
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin-left:20px;
}

li.parc{
background-image:url(images/left-menu.png);

}

li.prof{
background-image:url(images/left-menu.png);
}

li.form{
background-image:url(images/left-menu.png);
}

li.real{
background-image:url(images/left-menu.png);
}

li.contact{
background-image:url(images/left-menu.png);
}
Salut,

Je dirais plutôt comme ça :

ul.iconlist li{ 
background-repeat: no-repeat; 
background-position: 0 50%; 
padding: 3px 0 3px 20px; 
margin-left:20px; 
background-image:url(images/left-menu.png);
}

Vu que tous ses li ont la même image de fond, après s'il veut changer les images différemment à lui de faire des classes comme tu les as mises.
Sujet clos
Aller à