28173 sujets

CSS et mise en forme, CSS3

Survol et infobulle sur une image [résolu]

Bonjour à tous,

Je suis un nouveau converti au CSS, notamment grâce à l'ouvrage de Sieur R. Goetter. J'avance doucement, et je tombe sur un os. J'ai cherché une solution, mais sans succès pour l'instant. Peut-être pourrez-vous m'aider.

L'idée est simple : je veux créer des infobulles au survol d'une image. C'est assez proche de ce tutorial (http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol) sauf que c'est sur une image que l'action se passe.
Tout va bien en dehors du positionnement de l'infobulle par rapport à l'image. Explorer semble considérer que l'origine de l'image est en haut à gauche, Mozilla en bas à gauche. D'où impossibilité de paramétrer harmonieusement pour tous les navigateurs : la position absolue définie pour l'infobulle est en fait relative... au navigateur. Quelqu'un a-t-il une astuce ?
Merci d'avance.

R.
Modifié par Melkior (24 Apr 2006 - 16:15)
...pour être plus précis, je vous mets l'essentiel du code ci-dessous :


#international a.legende {
	position: relative;
	text-decoration: none;
}

#international a.legende img {
	border: 2px solid white;
}
#international a.legende span {
	display: none;
}
#international a.legende:hover {
	background: none;
	z-index: 500;
}

#international a.legende:hover img {
	border: 2px solid #ffcc33;
}

#international a.legende:hover span {
	display: inline;
	position: absolute;
	z-index: 500;
	top: 5em;
	left: 1em;
	width: 300px;
	border: 1px white dotted;
	background: #333366;
	font: normal 11px Arial, Helvetica, sans-serif;
	text-align: left;
	color: #ffcc33;
	padding: 0.5em;
}
Bonjour Melkior,

Peux-tu donner la partie html stp où mieux, l'adresse de ton travail si tu l'a mis en ligne
Bonjour, et merci de te pencher sur mon cas,

Pas encore en ligne, je donne ci-dessous un extrait épuré du code html :

<a class="legende" href="#"><img src="images/photo/londres.jpg"/><span>blablablablablablabla</span></a>

Le tout est contenu dans l'identificateur #international, qu'on peut virer pour l'occasion dans le code css.
Réduit à ça, on voit nettement la différence entre les 2 navigateurs. Dans Explorer, mon commentaire apparait dans la partie supérieure de l'image, dans Firefox, dans la partie inférieure...

Le paradis, c'est sûrement là où tous les navigateurs sont aux normes...

Merci
Bonjour Melkior

Avec ce que tu m'as donné comme code, j'ai fait ça :
css

body {
margin: 0;
padding: 0;
}
#international a.legende {
	position: relative;
	text-decoration: none;
}
#international a.legende img {
	border: 2px solid white;
}
#international a.legende span {
	display: none;
}
#international a.legende:hover {
	background: none;
	z-index: 500;
}
#international a.legende:hover img {
	border: 2px solid #ffcc33;
}
#international a.legende:hover span {
	display: inline;
	position: absolute;
	z-index: 500;
	top: 5em;
	left: 1em;
	width: 300px;
	border: 1px white dotted;
	background: #333366;
	font: normal 11px Arial, Helvetica, sans-serif;
	text-align: left;
	color: #ffcc33;
	padding: 0.5em;
}

html

<div id="international">
	<a class="legende" href="#"><img src="http://bluesmilies.celeonet.fr/heureux/129.gif"/><span>blablablablablablabla</span></a>
</div>

et ça donne ça en image :
upload/2075-melkior.png
Hormis un problème de marge classique, je pense, entre IE et FF, je ne vois pas de grosse différence.

Peux-tu nous montrer, toi même, une image comparative stp ?
Bonsoir,
Je pense qu'en ajoutant aussi une valeur pour la hauteur de "#international a.legende:hover span" ce serait mieux, en effet, tu indiques une largeur mais pas de hauteur.
Bonjour Aureance, merci de jeter un oeil.

Sans trop y croire, j'ai spécifié une hauteur mais ça ne change effectivement rien à mon problème. A la même adresse, tu peux voir, une hauteur de 20 px.
Je vous joins une image comparative :
upload/6218-survol.jpg

Ouala où j'en suis...
Blue, je pense que le peu de différence que tu as constatée avec ton exemple vient de la taille trop petite de l'image choisie. Comme l'écart entre les 2 navigateurs semble être de la hauteur de l'image, il faut une certaine hauteur, justement, pour que ça devienne sensible.
Bon, j'ai regardé ton css et en fait, c'est tout simple Smiley smile

Il faut que tu enlèves la position: relative à ta div :

#international a.legende


Tu as donc ton commentaire en haut à gauche sur les 2 navigateurs.

Ensuite, tu places ton commentaire où tu veux par :

top: xpx;
left: xpx;

de ta div :

#international a.legende:hover span
Merci beaucoup Blue, mais...

2 inconvénients, dont un que je ne solutionne pas :

1. S'il y a plusieurs images dans la page - c'est mon cas - ça oblige à recaler chaque infobulle suivant la position de l'image dans la page. C'est pas un problème, juste un peu de code en plus.

2. Si la page du site est centrée - c'est mon cas... Smiley lol - la distance entre mes images et le bord gauche du navigateur est fluctuante... donc la position des infobulles aussi, puisqu'elle est maintenant calée sur le bord du navigateur. On peut se consoler en se disant que ça merde pareillement sur les 2 navigateurs...

J'ai remis en ligne une version centrée pour que ce soit clair, avec les modifs que tu m'as suggérées.

Smiley confus
Oui, enfin la position est absolue par rapport au bord haut-gauche du navigateur mais fluctuante par rapport aux images puisque celles-ci sont centrées.

Mais ayé ! Ca y était presque, il faut également centrer le texte de l'infobulle en positionnement absolu :
position: absolute;
	left: 50%;
	margin-left: -150px;/*pour un bloc de 300px*/


Une fois fait, il faut jouer sur la propriété margin-left (et top bien sûr), en fonction de la position de l'image. Un peu pénible mais ça marche, pour IE et FF.

Merci bien.
Trouvé... (je suis pas un habitué des forums...)

Maintenant que j'ai fait le 'montage', c'est vrai que c'est pénible à mettre en oeuvre. Le truc simple reste encore à trouver : on se retrouve à tatonner pour le positionnement, dont l'origine est le coin haut/gauche du navigateur. Et le positionnement dans la hauteur dépend aussi du nombre de lignes de l'infobulle. Pas super pratique. Mais ça me va dans l'immédiat.

Encore merci.
Sujet clos
Aller à