18041 sujets

Questions générales et questions de débutants

Popup à position imposée qui ne marche pas sous IE

bonjour à tous,

j'ai écris ce petit code qui me permet de faire apparaitre une popup à une position précise sur la page. Ca marche très bien sur firefox et pas sous IE.

Je n'arrive pas à trouver l'erreur. Si une bonne ame veut bien y jeter un coup d'oeil (le css est intégré dans le code html). 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
.info {
	position: relative;
}

a.info span {
display: none;
}


a.info:hover span {
	padding: 2px;
	position: absolute;
	display: inline;
	z-index: 500;
}

#cadre {
	background-color: #FF0033;
	height: 50px;
	width: 50px;
}
</style>
</head>
    <p>passez <a class="info" href="#">ici<span style="left:100px; top:100px;"><div id="cadre"></div>   </span></a>&nbsp la souris</p>
<body>
</body>
</html>
J'ai réussi à m'en sortir en écrivant ceci : 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
.info {
	position: relative;
}

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

a.info:hover  span{

	background: none; /* correction d'un bug IE */
	padding: 2px;
	position: absolute;
	display: inline;
}

#cadre {
	background-color: #FF0033;
	height: 50px;
	width: 50px;
}
</style>
</head>
<body>
    <p>passez <a class="info" href="#">ici<span style="left:100px; top:100px;"><div id="cadre"></div>   </span></a>&nbsp la souris</p>

</body>
</html>


Apparemment c'est une correction de bug IE que je n'avais pas vue. désolé.

Maintenant ca ne marche pas sous opera. (ca réagit mais le positionnement et le flux n'est pas respecté).
Bonjour Olivier,

Attention !

Il y a des erreurs dans ta page.

- Tu ne peux pas mettre de <div> dans un <span>
- Tu ne peux pas mettre de <div> dans un <a>
- Tu ne peux donc pas mettre de <div> dans un <span> qui se trouve dans un <a>.

Essaye comme cela :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">

p {
position: relative;
}
	
a.info span {
display: none;
padding: 2px;
position: absolute;
height: 50px;
width: 50px;
}

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

a.info:hover span{
display: block;
background-color: #FF0033;
}

</style>
</head>
<body>
    <p>passez <a class="info" href="#">ici<span style="left:100px; top:100px;">&nbsp;</span></a>&nbsp; la souris</p>
	
</body>
</html>

Modifié par papillon41 (16 Jan 2007 - 12:15)
Ah oui, j'avais oublié. Firefox et IE n'étaient pas génés.

J'ai remplacé le div par une image (j'ai le droit cette fois n'est ce pas ?), et ça marche beaucoup mieux sous tous les navigateurs (sauf qu'opéra rafraichit mal l'écran quand l'image disparait. Pas trop grave.).

Si je veux faire la même chose avec du texte au lieu d'une image , je ne pourrai donc pas l'inclure dans un div. Embetant. Elle me plaisait bien cette petite méthode, qui assure d'avoir des popus qui ne sortent pas de la page.

merci de m'avoir repondu.
merci pour ta proposition.

Ca marche très bien.

J'ai remplacé ton &nbsp; entre les span par une image, et ca ne marche plus sous IE6, qui ne fait pas disparaitre l'image quand la souris dégage.
Comme ceci ça marche, mais je ne sais pas pourquoi ?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
p {
position: relative;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
}
a.info:hover span {
padding: 2px;
position: absolute;
height: 50px;
width: 50px;
display: block;
background-color: #FF0033;
}
</style>
</head>
<body>
    <p>passez <a class="info" href="#">ici<span style="left:100px; top:100px;"><img src="alsa.gif" alt=""  /></span></a>  la souris</p>
</body>
</html>

Modifié par papillon41 (17 Jan 2007 - 16:19)
Sujet clos
Aller à