28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche à faire une infobulle d'aide : lorsque je passe sur une image, une infobulle s'affiche juste à droite


<dfn>
  <img width="16" height="16" src="logo/aide.png" alt="aide" />
  <span>Texte de l'aide</span>
</dfn>



dfn {
	position: relative;
}

dfn span {
	display: none; /* on masque l'infobulle */
}

dfn:hover {
	background: none; /* correction d'un bug IE */
	z-index: 99; /* on définit une valeur pour l'ordre d'affichage */
	cursor: help; /* on change le curseur par défaut en curseur d'aide */
}

dfn:hover span {
	display: inline; /* on affiche l'infobulle */
	position: absolute;
	white-space: nowrap; /* pas de retour à la ligne non-désiré */
	top: 0px; /* on positionne notre infobulle */
	left: 20px;
	border: 1px solid green;
	border-left: 4px solid green;
	padding: 3px;
	background: white;
	color: green;
	font-size: 0.8em;
}


Ce code fonctionne avec firefox et epiphany version webkit (je ne sais pas si marche avec IE8) mais l'infobulle ne s'affiche pas avec opera... si qq'un sait pourquoi ?

Merci, David
Salut,

La comme ça, non. T'aurais pas une page en ligne pour constater le problème et pouvoir t'aider à y remédier. Smiley cligne
Re,

Allez voir sur http://japsenne.free.fr/

J'ai testé : ok avec FF2, FF3, webkit, IE7, IE8
Par contre, avec opera, l'infobulle s'affiche mais ne s'enlève pas : je sais que ce n'est pas ce qui se passe sur mon site, mais il y a quand même un problème, le code html étant assez similaire à mon site

David
djaps a écrit :
Par contre, avec opera, l'infobulle s'affiche mais ne s'enlève pas

J'ai un comportement différent avec Opera 10. L'infobulle s'affiche et redevient masquée normalement, par contre dans le cas où elle est dans un FIELDSET ce qui dépasse du conteneur est tronqué.

Il se peut qu'Opera applique un overflow:hidden aux FIELDSET par défaut, ou que ce soit un bug. L'utilisation du FIELDSET n'est de toute façon pas justifiée ici (sauf si c'est pour le test).
Correction: c'est ce qui dépasse du paragraphe qui est masqué. Aucune idée du pourquoi ou du comment.
Merci pour vos réponses si rapide.

J'ai copié trois fois le code (code identique) dans mon fieldset et j'arrive à un résultat surprenant avec opera (pour la ligne 3, c'est ce que j'obtient en ce moment sur mon site)
Je vous laisse regarder : http://japsenne.free.fr
Peut-on parler de bug ?

David
Re,

J'ai pris connaissance de ce post : http://forum.alsacreations.com/topic-4-11229-1-rsoluProbleme-infobulle-CSS-sous-opra.html

En enlevant mon "z-index" et mon "background:none", le pb se corrige pour ma balise <div> mais pas pour mon <fieldset>
- AVEC z-index et bkg:none : http://japsenne.free.fr/
- SANS z-index et bkg:none : http://japsenne.free.fr/pbopera.html
Le pb est du au z-index ( le fait de toucher au bkg:none; ne change rien)

Je vais faire comme dans ce post ( http://forum.alsacreations.com/topic.php?fid=4&tid=3932 ), MAIS mon pb ne sera pas du tout résolu Smiley decu

David