28172 sujets

CSS et mise en forme, CSS3

Bouton : hover

Salut,

Pour un nouveau site en css, j'ai fais un menu avec une image de fond, en utilisant des boites css invisibles pour faire les boutons (1boite=un bouton, menant à la page).

.un {
top : 220px;
left : 90px;
width : 98px;
height : 32px;
}


Maintenant, je voudrais mettre une puce à gauche de mon bouton, j'ai utilisé ça :

.un {
top : 220px;
left : 90px;
width : 98px;
height : 32px;
}
.un:hover {
background-image: url(puce.jpg);
width : 80px;
height : 40px;
top : 215px;
left : 10px;
}



Probleme : au survol, bin la puce apparait bien, mais clignote, et le bouton déconne, je pense qu'en fait c'est parce que la puce est considérée dans la meme boite que l'autre, mais je sèche pour résoudre le probleme (j'ai pourtant essayé des heures durant ...).

De plus cela ne fonctionne pas sous IE. Smiley bawling

Merci d'avance pour votre aide précieuse
Saluton,
a écrit :
De plus cela ne fonctionne pas sous IE.
Normal, IE ne supporte :hover que sur les balises d'ancre <a>.

D'autre part, je ne sais pas ce que tu appelles
a écrit :
des boites css invisibles

Amike.
Bonjour,

Non seulement ton code est bizarre (propriétés top et left pour un élément à priori pas positionné en relatif ou en absolu... ou bien si?), mais en plus il est incomplet (CSS réduit, pas de code HTML...).

Pourrait-on voir la page en ligne, et si possible avoir une image du rendu à obtenir?

Sans ça, cela risque d'être difficile d'obtenir une aide efficace.
Je crois que la méthode d'intégration que tu as utilisée pour ton effet de rollover est tellement tarabiscotée que ça décourage les éventuelles bonnes volontés.

Suggestion rapide: utiliser un système connu et éprouvé: le menu avec images HTML (avec attribut alt qui va bien pour chaque image, liste non ordonnée pour le menu pourquoi pas, etc.) et rollover en Javascript. Ou bien, s'il s'agit à chaque fois d'afficher une image sur la gauche du bouton, faire le rollover en CSS avec une image de fond. Dans tous les cas, on n'utilisera pas :hover pour cacher des éléments ou changer leur positionnement.

Ah oui: et découper les différentes images du menu plutôt que de tenter de faire une image map avec des liens invisibles (et changeant de position au survol Smiley rolleyes ). Ou bien on fera une véritable image map. Smiley cligne

Bref, c'est à refaire.
Modifié par Florent V. (10 Feb 2008 - 19:07)
Florent V. a écrit :
Je crois que la méthode d'intégration que tu as utilisée pour ton effet de rollover est tellement tarabiscotée que ça décourage les éventuelles bonnes volontés.

Suggestion rapide: utiliser un système connu et éprouvé: le menu avec images HTML (avec attribut alt qui va bien pour chaque image, liste non ordonnée pour le menu pourquoi pas, etc.) et rollover en Javascript. Ou bien, s'il s'agit à chaque fois d'afficher une image sur la gauche du bouton, faire le rollover en CSS avec une image de fond. Dans tous les cas, on n'utilisera pas :hover pour cacher des éléments ou changer leur positionnement.

Ah oui: et découper les différentes images du menu plutôt que de tenter de faire une image map avec des liens invisibles (et changeant de position au survol Smiley rolleyes ). Ou bien on fera une véritable image map. Smiley cligne

Bref, c'est à refaire.


Ok, bin je vais chercher
Smiley rolleyes
Sujet clos
Aller à