28111 sujets

CSS et mise en forme, CSS3

[Résolu]Infobulle CSS z-index chez IE

Bonjour,

Je teste l'infobulle CSS décrite dans la FAQ. Elle parait sympa de simplicité.
http://forum.alsacreations.com/faq/#item11
mais avec IE/win98, elle semble passer derrière le texte. Existe-t'il un hack pour corriger ou faut-il s'en accommoder? Dans ce cas je préfère ma version js

Merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Infobulle DHTML avec image</title>
<base href="http://perso.wanadoo.fr/michel.deboom/moncastel/">
<style type="text/css" >
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none; border:0
}
a.info:hover {
background: none; /* correction d'un bug IE */
}
a.info:hover img {
position: relative;
z-index: 100;
}
a.info:hover span {
display: block;
position: absolute;
z-index: 50;
top: 2em;
left: 6em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}
</style>
</head>

<body>
<h2>Infobulle CSS</h2>
<p><a class="info" href="#">"Toto" <span>un petit garçon sympathique</span></a>
ou survolez le mot <a class="info" href="#">"Ginette" <span>une vilaine madame !</span></a
pour obtenir des explications.</p>

<p><a class="info" href="#">lien vignette chambre 1-1<span><img src="img/vchambre1-1.jpg" /></span></a></p>
<p><a class="info" href="#">lien vignette chambre 1-2<span><img src="img/vchambre1-2.jpg" /></span></a></p>
<p><a class="info" href="#">lien vignette chambre 1-3<span><img src="img/vchambre1-3.jpg" /></span></a></p>
</body>
</html>

Modifié par chmel (21 May 2005 - 19:52)
Salut !
En regardant vite fait le code d'alsacréations, j'ai trouvé ca :

a.info 
{
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}

a.info:hover
{
z-index:25; 
background: none;
}

a.info span
{
display: none
}

a.info:hover span
{ 
display: block;
position: absolute;
top: 2em;
left: 6em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}


Ca correspond à peu près à ce que tu veux sauf que cette fois-ci c'est au dessus le texte. Maintenant je te laisse adapter ce code css a tes envies (déjà je te conseille de mettre une border au lieu de ton padding:2px parce que firefox et IE ne réagissent pas de la meme façon).
A+
Merci Jumpy pour
le z-index déplacé dans a.info:hover : ça marche Smiley rolleyes .
Entre temps, j'ai trouvé une autre solution :
- Supprimer position:relative de a.info
- transformer top: 2em; et left: 6em; en margin:2em 0 0 1em;
- et enfin dans le HTML : déplacer les éléments span au début du lien.

comme cela, la bulle reste positionnée avec des marges, par rapport au début du lien.
J'ai ajouté les pseudo-class focus et active pour la navigation clavier.

Pour le border à la place du padding, je n'ai pas compris, car j'ai renseigné les 2 et le résultat est identique ie/gecko

voici le code test :
<html>
<style>
a img {
border:0;
vertical-align:middle;
}
a.info {
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover,a.info:focus,a.info:active {
background: none; /* correction d'un bug IE */
}
a.info:hover span,a.info:focus span,a.info:active span {
display: inline;
position: absolute;
z-index: 500;
margin:2em 0 0 1em;
background: orange;
text-align: center;
color: white;
padding: 3px;
border:0
}
</style>

<p>Survolez le mot <a class="info" href="#"><span><img src="http://www.legendemania.com/motifs/gif/OplusOegalToto.gif" alt="" width="32" height="32" /> un petit garçon sympathique. </span>"Toto" </a></p>
<p>pour obtenir des explications ou survolez le mot <a class="info" href="#"><span>une vilaine madame !</span>"Ginette" </a>
.</p>

</html>

Cordialement
De rien ! je n'ai pas fait grand'chose Smiley cligne
Pour l'histoire des border c'était parce que sous firefox les images que tu avais choisies pour les vignettes du bas étaient encadrées d'une bande blanche et d'une bande orange, je pensais que ça venait du padding qui était pas interprété de la mm façon par IE et firefox. Si tout s'affiche comme tu le veux c'est le principal.
A bientot
Bonjour,
Ce procédé pour créer une info-bulle entièrement en CSS est très intéressant. Smiley biggrin Je l'ai testé sous MSIE et FireFox où il fonctionne très bien. Il reste malheureusement un problème ennuyeux pour lequel je n'ai pas trouvé de solution.
Supposons un texte d'une certaine longueur et comportant un certain nombre de mots munis d'un hyperlien avec class="info" et un petit texte d'info entre balises <span></span> comme expliqué dans l'astuce.
Si l'un de ces mots avec hyperlien se trouve tout au bout d'une ligne (à droite de la fenêtre du navigateur, donc), eh bien, au survol de ce mot, l'infobulle s'affiche en partie dans la fenêtre et ... en partie en dehors.
c'est-à-dire que l'infobulle n'est pas visible entièrement Smiley fache ... Il nous manque un paramètre précisant à l'infobulle de bien s'afficher à l'intérieur de la fenêtre, si quelqu'un a une idée? Merci d'avance. Smiley edit Modifié par jojojr (08 Aug 2005 - 10:40)
L'infobulle d'Alsacréations est constituée comme celle de Eric Meyer. Une span "display none" est glissée dans le lien et quand on passe la souris avec la "magie" du hover elle redevient "display block". Cette span est placée en "position absolute" car sinon à l'affichage de l'infobulle tout se décalerait, l'infobulle pousserait les éléments mis en page.
Effectivement, il y a ce problème de l'infobulle placée en fin de ligne et qui s'affiche hors écran... puisque elle est positionnée par rapport au lien. Alors, il faut penser différement et placer la span en position "fixed" au lieu de "absolute". Par exemple : en haut au centre de l'écran.
D'autre part, le placement en absolute réserve quelques surprises comme ici sur Opera ( Mac ) ou l'infobulle bleue est automatiquement masquée par l'affichage de l'adresse
( hum !).
upload/579-infobullemey.jpg
Il faudrait dans ce cas placer l'infobulle plus haut... Ah, oui ? Nous sommes déjà en haut de l'écran ? Dommage.
Pour ma part, je range franchement ces infobulles dans le rang des gadgets fausses-bonnes idées :
- inaccessibilité (sans souris, par exemple)
- mise en oeuvre acrobatique
- lecture quasi-incompatible avec toute autre opération : il est difficile, par exemple, de consulter l'aide fournie par l'infobulle pendant qu'on remplit un formulaire. Ou de copier le contenu de l'infobulle.
- alourdissement de l'interface
- encouragement à ne pas trier le contenu utile, scinder en plusieurs pages des contenus trop abondant, prévoir différents niveaux d'utilisation, etc.
Laurent Denis a écrit :
Pour ma part, je range franchement ces infobulles dans le rang des gadgets fausses-bonnes idées :
1- inaccessibilité (sans souris, par exemple)
2- mise en oeuvre acrobatique
3- lecture quasi-incompatible avec toute autre opération : il est difficile, par exemple, de consulter l'aide fournie par l'infobulle pendant qu'on remplit un formulaire. Ou de copier le contenu de l'infobulle.
4- alourdissement de l'interface
5- encouragement à ne pas trier le contenu utile, scinder en plusieurs pages des contenus trop abondant, prévoir différents niveaux d'utilisation, etc.

Bonjour Laurent,
je réponds à tes arguments sur l'aspect "gadget" de cette infobulle:
1- j'ai vraiment du mal à concevoir comment on peut naviguer sans souris
2- oui, c'est acrobatique, malheureusement
3- tout dépend de l'usage qu'on veut faire de cette info-bulle (voir ci-dessous)
4- ???
5- là encore, tout dépend de l'utilisation qu'on veut en faire.

Pourquoi j'ai besoin d'une infobulle "améliorée".

1) Dans mes cours en ligne, le recours à l'infobulle me permet :

a) de développer un acronyme;
b) de donner l'équivalent d'un terme dans une autre langue - plus précisément, dans un cours d'anglais, le passage de la souris sur un terme muni d'une info-bulle donnant une traduction encourage à mon avis l'étudiant à formuler mentalement une solution avant de consulter la réponse dans l'info-bulle

2) Pourquoi ne pas me contenter de la balise <title> ou <alt>?

a) voir ici http://forum.alsacreations.com/topic.php?fid=4&tid=285;
b) pour des infobulles avec contenu très bref, la balise <title> peut convenir - malheureusement, dès qu'on dépasse environ 70 caractères, les navigateurs Mozilla & Firefox coupent le texte - alors qu'Internet Explorer passe gentiment à la ligne;
c) l'infobulle disparait au bout de quelques secondes;
d) impossible de formater le texte de l'infobulle (or j'aurais au minimum besoin d'y mettre du gras ou de l'italique);
e) je pourrais à la place d'un <span title=""> utiliser la balise <acronym>, mais elle a les mêmes limitations que le <span title=""> (voir http://www.la-grange.net/accessibilite/day_17.html).

3) Je persiste à dire qu'on aurait bien besoin dans les documents HTML d'une vraie balise infobulle avec longueur de texte non limitée (enfin, disons jusqu'à 255 caractères) et avec texte formatable. C'est pourquoi j'étais si heureux Smiley biggrin de découvrir l'infobulle "pure CSS tooltip" d'Eric Meyer, reprise sur plusieurs sites... et finalement déçu du problème d'affichage lorsqu'on arrive en bout de ligne, comme indiqué dans mon précédent message. Smiley bawling
En fait, je me suis aperçu que dans Firefox, lorsqu'une telle infobulle "sort" de la fenêtre du navigateur (sur la droite), la barre de défilement horizontale apparait, et avec la flèche droite du clavier (ou avec la molette multidirectionnelle de certaines souris) il est possible de faire défiler la fenêtre vers la droite et d'obtenir l'affichage de l'infobulle en entier. C'est bien, mais, comme dirait Laurent, "acrobatique". Smiley cligne
Certes il existe des solutions, mais elles passent par des scripts javascript relativement lourds...
jojojr a écrit :

Bonjour Laurent,
je réponds à tes arguments sur l'aspect "gadget" de cette infobulle:
1- j'ai vraiment du mal à concevoir comment on peut naviguer sans souris


Comme n'importe quel utilisateur :
- qui n'en a pas
- ou dont le système n'en supporte pas
- ou qui ne peut pas s'en servir (handicap moteur)
- ou pour qui elle n'a aucun sens (navigation vocale)
- ou pour qui elle est une gêne (motricité réduite ou maladroite)
- ou pour qui c'est une préférence de confort ou de goût


jojojr a écrit :

3- tout dépend de l'usage qu'on veut faire de cette info-bulle (voir ci-dessous)


ne jamais préjuger des besoins de l'utilisateur. Son usage de ton document ne sera pas nécessairement celui que tu as prévu. En limitant cet usage, tu restreins ton audience et la qualité du site.

(Je peux avoir besoin, par exemple, de copier la signification d'un acronyme ou une traduction)

jojojr a écrit :

4- ???


Alourdissement de l'interface, car:
- une manipulation supplémentaire, peu intuitive, pour accéder à un contenu caché que rien ne signale
- complexité de l'interface graphique accrue. Il faut que l'utilisateur fasse un effort d'adaptation supplémentaire à une particularité d'un site. Ce qu'il n'a pas nécessairement le temps/l'envie/le besoin de faire.
- dégradation fréquente dans les interfaces non graphiques CSS
- aspect "bricolo" du résultat

jojojr a écrit :

5- là encore, tout dépend de l'utilisation qu'on veut en faire.

Pourquoi j'ai besoin d'une infobulle "améliorée".

1) Dans mes cours en ligne, le recours à l'infobulle me permet :

a) de développer un acronyme;


Le développement de l'acronyme entre parenthèses dans le contenu remplit très bien cette fonction, de manière simple et accessible. Des liens sur les acronymes vers un glossaire sont un complément tout aussi approprié.

jojojr a écrit :

b) de donner l'équivalent d'un terme dans une autre langue - plus précisément, dans un cours d'anglais, le passage de la souris sur un terme muni d'une info-bulle donnant une traduction encourage à mon avis l'étudiant à formuler mentalement une solution avant de consulter la réponse dans l'info-bulle


ah, effectivement : la problématique devient entièrement différente, puisqu'il s'agit d'interface riche, que les techniques HTML CSS ne permettent actuellement pas de créer de manière satisfaisante. Donc, là, ce serait un pis-aller.

jojojr a écrit :

2) Pourquoi ne pas me contenter de la balise <title> ou <alt>?


title, oui. alt: non. Ce n'est du tout fait pour cela, en dépit du comportement d'IE avec cet attribut.

jojojr a écrit :

b) pour des infobulles avec contenu très bref, la balise <title> peut convenir - malheureusement, dès qu'on dépasse environ 70 caractères, les navigateurs Mozilla & Firefox coupent le texte - alors qu'Internet Explorer passe gentiment à la ligne;


Une information complémentaire aussi longue est-elle encore une information complémentaire ? Sa place n'est pas dans un title.
jojojr a écrit :

c) l'infobulle disparait au bout de quelques secondes;


Même problème pour les infobulles CSS.

jojojr a écrit :

d) impossible de formater le texte de l'infobulle (or j'aurais au minimum besoin d'y mettre du gras ou de l'italique);

Ce n'est en effet pas du tout fait pour cela.

jojojr a écrit :

e) je pourrais à la place d'un <span title=""> utiliser la balise <acronym>, mais elle a les mêmes limitations que le <span title=""> (voir http://www.la-grange.net/accessibilite/day_17.html).


Oui. Et pas plus appropriée que le title pour l'usage que tu en ferais.

jojojr a écrit :

3) Je persiste à dire qu'on aurait bien besoin dans les documents HTML d'une vraie balise infobulle avec longueur de texte non limitée (enfin, disons jusqu'à 255 caractères) et avec texte formatable


Ah... Le projet HTML5.0 du WAHTCG devrait te plaire Smiley cligne

En résumé :
- HTML CSS ne permet pas actuellement de créer des interfaces riches comme tu en aurais besoin
- l'astuce ci-dessus est-elle un pis-aller qu'on peut adopter sans plus y réfléchir dans ce cadre ? Bien souvent non, car elle pose toujours ce problème : ne faut-il pas revenir sur le projet de départ, et revoir entièrement le contenu, modifier sa hiérarchisation, ses modes d'interactions, etc ?
Modifié par Laurent Denis (16 Aug 2005 - 10:37)
Bonjour,

Je viens de faire une page avec un formulaire et j'ai utilisé votre code pour afficher une aide sur le LABEL mais le problème c'est qu'avec IE, l'infobulle se place en dessous des SELECT. Smiley confus
Avez vous une idée pour éviter cela (à part mettre des <br /> pour mettre des espaces entre le texte et le select Smiley lol )
Merci Smiley smile
uiop,

Très utile cette technique qui fonctionne très bien sauf dans le cas d'une TABLE sous IE.
Un exemple tout simple :
<table>
<tr>
<td class="info">"Toto" <span>un petit garçon sympathique</span></td>
</tr>
</table>

En reprenant la feuille de style cité plus haut.
Vous avez une solution ?
Modifié par NerOcrO (22 Feb 2006 - 11:59)
Bonjour,
Ces infos bulles ne fonctionnent pas ( ou très mal) sous Safari, le saviez-vous ?

Cordialement
Bonjour !
Je fais un petit up pour vous signaler que ces "info-bulles" fonctionnent très bien sous Firefox et IE6, mais IE7 ne veut rien savoir ! Je ne sais pas si c'est un problème de z-index, mais rien n'apparait au survol du lien...
Quelqu'un a-t-il rencontré ce problème et aurait trouvé une solution ?
Merci d'avance !

PS : voici mon code :

<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
line-height: 17px;
padding-left: 15px;
padding-top: 0px;
background-image: url("images/tri.gif");
background-repeat: no-repeat;
background-position: -1px 2px;
}

a img {
border:none;
}

a.info {
position: relative;
text-decoration: none;
color: black;
border: 0px gray dotted;
}

a.info span {
display: none;
}

a.info:hover {
background: none; correction d'un bug IE */
z-index: 500;
}

a.info:hover span {
border: 3px double black;
font:12px arial;
display: inline;
position: absolute;
top: 1.2em;
left: 2em;
width:18em;
background-image: url("images/bg2.gif") ;
text-align: left;
color: #CCCCCC;
padding: 5px;
z-index: 500;
}

</style>
Bon j'ai un peu bidouillé mon <style></style>, et maintenant ça marche indifféremment sous FF2, IE6 et IE7 (enfin le span ne s'affiche pas au bon endroit sous IE, mais c'est secondaire et j'ai déjà mon idée pour le corriger).
Je n'ai pas trop compris ce qui a été salvateur, mais je vous mets mon code au cas où, ça pourra peut-être en aider certains !

a img {
border:none;
}

a.info {
	position: relative;
	z-index:24;
	text-decoration:none;
}

a.info:hover {
	z-index:25;
	background: none;
}

a.info span {
	display: none;
}

a.info:hover span {
	display: block;
	position: absolute;
	top: 1.2em;
	left: -2em;
	width:15em;
	border: 3px double black;
	background-image: url("images/bg2.gif") ;
	text-align: justify;
	font:12px arial;
	color: #FFF;
	padding: 8px;
}
Sujet clos
Aller à