28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionner les Infobulles CSS

Bonjour Raphaël et bonjour à tous,

Je souhaite adapter les infobulles en CSS et imposer leur affichage en bas de ma page.
Je n'arrive pas à obtenir le résultat escompté! Est-ce possible?

Voici mon code html:
<p>Survolez le mot <a class="info" href="#">"Toto" <span>Ici la traduction russe (ou autre).</span></a>
	ou survolez le mot <a class="info" href="#">"Ginette" <span>Ici la traduction russe (ou autre).</span></a>
	pour voir le résultat.</p>

et mon code css:

a.info2 {
font: 0.8em verdana, arial, sans-serif;
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info2 span {
display: none;
}
a.info2:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
/* style de l'infobulle*/
a.info2:hover span {
	font: 1em Lucida Sans Unicode; 
   display: inline;
	top: 770px;
	left: 50px; 
}


En fait j'ai réussi à le faire lorsqu'on clique sur le lien, mais j'aimerais aussi pouvoir le faire en le survolant.
Est-ce que c'est faisable ou pas? Sinon j'oublie !

Merci
Modifié par Serfa.Tice (29 Mar 2006 - 16:27)
Administrateur
Hello Serfa.Tice et bienvenue ici Smiley smile

J'ai un peu de mal à comprendre ton code : tu emploies un nom de classe CSS "info2" qui n'est pas présent dans le code HTML Smiley ohwell

Ensuite tu appliques des propriétés à "a.info2:hover span" qui sont top et left, mais qui ne s'appliquent que sur des éléments positionnés. Il faudrait donc donner une position (absolute par exemple) à cet élément pour que ces propriétés fonctionnent.
Oups j'ai copié le mauvais bout de code!

En fait j'ai 4 propositions:
1) l'infobulle telle qu'elle est présentée sur ce site
2) la popup en css qui s'affiche près du lien
3) l'infobulle mais que j'aimerais toujours afficher au même endroit quelle que soit la position du lien (là où je butte)
4) la popup CSS qui s'affiche en bas de la page
Dans les cas 3 et 4, j'ai un div qui est toujours visible et le clic ou survol affiche le texte dedans.

Je ne voulais pas flooder en collant tout mon code;)

J'ai un peu avancé entre-temps, et j'affiche mon texte à la distance que je veux du lien survolé, mais elle change (absolute) selon l'emplacement de ce lien.
Je me dis que la balise <span> n'est peut-être pas la bonne solution...

Voilà où j'en suis:
<p>Méthode 1: Survolez le mot <a class="info2" href="#">"Toto" <span>Ici la traduction russe (ou autre).</span></a>
ou survolez le mot <a class="info2" href="#">"Ginette" <span>Ici la traduction russe (ou autre).</span></a>
pour voir le résultat.<br/>
</p>

<p>Méthode 2: Cliquez sur le mot <a href="#pop2" class="pop">Lien</a> pour voir le résultat.</p>
<div id="pop2">
<p>Il va falloir gérer les polices de caractères!!</p>
</div>
<!-- Zone -->
<div id="zone"><div class="entete">Ici la traduction russe (ou autre)</div>
</div>

Et le code css pour le survol (Méthode 1):
/* survol*/
a.info2 {
font: 0.8em verdana, arial, sans-serif;
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info2 span {
display: none;
}
a.info2:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info2:hover span {
	font: 1em Lucida Sans Unicode; 
	color:black;
   display: inline;
	position: absolute;
	top: 35em;
	left:2em;
}

Modifié par Serfa.Tice (29 Mar 2006 - 10:29)
Administrateur
Serfa.Tice a écrit :
3) l'infobulle mais que j'aimerais toujours afficher au même endroit quelle que soit la position du lien (là où je butte)
Aaaah voilà qui est plus clair.
En fait, à partir du moment où tu positionnes ton lien (position relative), il va servir de référence pour tous les éléments positionnés qu'il contiendra.
En clair, si un <a> en relatif contient un <span> en absolu, ce <span> va se placer par rapport à ce <a> (voir le tuto sur le positionnement).

Dans ton cas, il suffirait a priori de ne pas positionner tes liens.

Serfa.Tice a écrit :
Je me dis que la balise <span> n'est peut-être pas la bonne solution...
Le choix de la balise HTML n'influe en rien à partir du moment où tu la "gères" en CSS. L'important est de la choisir selon sa fonction, or il n'existe pas de balise attitrée pour faire une infobulle (on ne parle pas de l'attribut "title" évidemment).
Par contre tu es obligé de choisir une balise de type En-ligne au sein d'une balise <a>.
Sujet clos
Aller à