28173 sujets

CSS et mise en forme, CSS3

Salut,

Mon probleme est un probleme tout simple et trouvera surement tres facilement une solution, mais voila :

Je fais donc un site en CSS, j'ai fais un menu image, en possitionnant des blocs pour faire les boutons :

#sidebar ul {
list-style-type : none;
width : 332px;
height : 560px;
position : relative;
margin : 10px auto 30px;
background : url(fond_menu.gif);
}
#sidebar li {
position : absolute;
}
#sidebar li a span {
display : none;
}
#sidebar li a {
display : block;
width : 100%;
height : 100%;
}
.un {
top : 220px;
left : 90px;
width : 98px;
height : 32px;
}
.deux {
top : 280px;
left : 90px;
width : 100px;
height : 31px;
}
.trois {
top : 330px;
left : 100px;
width : 155px;
height : 40px;
}


Je voudrais faire apparaitre a gauche de chaque bouton une petite image, au survol de la souris, j'ai donc ajouté :

.un:hover {
background-image: url(puce.jpg);
width : 35px;
height : 35px;
top : 220px;
left : 50px;
}


Et ainsi de suite pour tous les boutons (je veux une image différente pour chaque bouton). L'image s'affiche bien au survol de la souris, mais probleme, elle ne reste pas fixe et clignote, en gros, super vite. Le curseur de la souris s'affole aussi et fait pareil lorsque l'on passe sur le bouton.

Si vous voulez voir :

http://senya.free.fr/fullmetalcoating/

Merci Smiley cligne
salut,


avant ton :hover :
.un {
...
width : 98px;
height : 32px;
}

et après :
.un:hover {
...
width : 35px;
height : 35px;
}

du coup ta boite devient plus petit pendant le hover ... et si ta souris n'est plus au dessus de ses nouvelles dimension alors le :hover est annulé.

Ajuste tes dimension au :hover.
Ok merci.

Seulement je voudrais que ce soit juste une puce sur le coté du bouton, et la j'ai l'impression que ça va remplacer tout le bouton, non ? Car du coup l'image se repete sur tout le bouton.

Sinon le lien fonctionne tres bien ?!