28173 sujets

CSS et mise en forme, CSS3

[résolu] Donner des informations sur un mot lors de son survol

Bonjour,
J'essaie de faire apparître une boite d'informations au survol d'un texte, en faisant apparaître une div avec dedans un span au survol d'un lien. Mais je n'arrive pas à positionner la boite juste en dessous du lien, il s'affiche à 0px du bord gauche ^^.

Le code :
<html>
<head>
<style type="text/css">


a.infos {
	border-bottom: dotted 1px;
	text-decoration: none;
	color: #505050;
}

a.infos .boiteinfos {
	display: none;
	width: 100px;
	position: absolute;
	background: #F8F8F8;
	padding: 2px;
	margin: 2px;
	border: solid 2px #5A5A5A;
}

a:hover.infos .boiteinfos {
	display: block;
	width: 100px;
	position: absolute;
	padding: 2px;
	margin: 2px;
	border: solid 2px #5A5A5A;
}

a:hover {
	border-bottom: 0px;
}

a.infos .boiteinfos span {
	display: none;
	text-decoration: none;
	color: black;
}

a:hover.infos .boiteinfos span {
	display: inline;
	position: relative;
}

</style>
</head>

<body>

<br><br>
<a class="infos" href="#">aa?<div class="boiteinfos"><span> a a a a a a a a a</span></div></a>

<br>Lorem ipsum dolor sit amet, ligula nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl turpis est, vel elit, congue wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas ligula <a class="infos" href="#">bb?<div class="boiteinfos"><span> bbb bb bbb bbb bbb</span></div></a> nostra, accumsan taciti. Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat nec leo, temporibus scelerisque nec.

</body>
</html>

Modifié par Whisno (12 May 2006 - 23:10)
modifié Smiley confused Je ne savais pas comment l'appeler, car c'est un positionnement relatif à un élément mais pas dans le code puisque 
position: relative;
est euh... (zut, j'ai oublié) fait bouger le texte ^^ (or j'essaie de le faire se placer au dessus du reste)
oups, je vient seulement de me rendre compte d'une erreur énorme, une div dans un a *court se cacher*. Si quelqu'un qui passe par ici connaît une méthode plus efficace d'afficher des infos au survol d'un élément, je suis preneur Smiley biggrin , je vais continuer a y réfléchir.

edit : J'ai encore modifié le titre, étant donné que je reprend à la base.

Est-il possible de le faire en applicant un border au span qui apparaît au survol du a?
Modifié par Whisno (12 May 2006 - 22:19)
Sujet clos
Aller à