Code pour Infobulle..

[Vaaléeriiee]

Bonjour, j'ai été sur CSS-actif pour savoir comment faire un infobulle.. malheureusement cela ne réussit pas.

Voila le code de mon PA :

Code:

<A class=infobulle><IMG src="http://img832.imageshack.us/img832/961/16094202.png"><SPAN>
<TABLE><BR><IMG src="http://40.img.v4.skyrock.net/404/x--vampires-diaries--x/pics/photo_68712245_8.gif"> <BR>Fondatrice <BR><DIV><A class=postlink href="http://frenchsandamericans.forum-canada.com/privmsg?mode=post&amp;u=1" target=_blank>La Contacter</A></DIV><DIV><A class=postlink href="http://frenchsandamericans.forum-canada.com/u1" target=_blank></DIV>Son Profil</SPAN>
<TBODY></TBODY></TABLE></A></A>
<p></p><DIV style="TEXT-ALIGN: justify"><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold"></SPAN></FONT> </DIV><DIV style="TEXT-ALIGN: justify"><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold"></SPAN></FONT> </DIV><DIV style="TEXT-ALIGN: justify"><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold"></SPAN></FONT> </DIV><DIV style="TEXT-ALIGN: justify"><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold">SYNOPSIS ♛</SPAN>À VENIR. </FONT><FONT size=1><SPAN style="COLOR: rgb(135,113,101); FONT-WEIGHT: bold"></SPAN></SPAN></A></FONT></DIV>
<p></p><DIV></DIV><FONT size=1><SPAN style="FONT-WEIGHT: bold"></SPAN></FONT><DIV></DIV><DIV></DIV></TD><TD style="BORDER-LEFT: rgb(50,50,49) 3px dotted; VERTICAL-ALIGN: top" width="35%"><DIV style="TEXT-ALIGN: justify; PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; PADDING-RIGHT: 15px" width="400"><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold">INFORMATIONS ♛</SPAN> À VENIRfont><BR><DIV style="TEXT-ALIGN: center"><FONT size=1></FONT>
<P style="TEXT-ALIGN: justify"><SPAN style="COLOR: rgb(135,113,101); FONT-WEIGHT: bold"></SPAN><FONT size=1><FONT size=1><SPAN style="COLOR: rgb(135,113,101); FONT-WEIGHT: bold"></SPAN></FONT><FONT size=1><SPAN style="COLOR: rgb(153,149,82); FONT-WEIGHT: bold">ANNONCE DU 27.10.10 ♛</SPAN> À VENIR</FONT></FONT></p></DIV><DIV style="TEXT-ALIGN: center"><SELECT onchange=document.location=this.options[this.selectedIndex].value> <OPTION selected value=#>TOP PARTENAIRES</OPTION> <OPTION value=LIEN>option 1</OPTION> <OPTION value=LIEN>option 2</OPTION> <OPTION value=LIEN>Option 3</OPTION> <OPTION value=LIEN>Option 4</OPTION> <OPTION value=LIEN>Option 5</OPTION> <OPTION value=LIEN>Option 6</OPTION> <OPTION value=LIEN>Option 7</OPTION> <OPTION value=LIEN>Option 8</OPTION> <OPTION value="Option 9</option> <option value=" LIEN?>Option 10</OPTION> <OPTION value=LIEN>Option 11</OPTION></SELECT><FONT size=1><BR><BR><A href="LIEN"><SPAN style="FONT-WEIGHT: bold">nos partenaires</SPAN></A><SPAN style="FONT-WEIGHT: bold"> </SPAN><FONT size=1>●</FONT><FONT size=1><SPAN style="FONT-WEIGHT: bold"> <A href="LIEN">devenir ?</A><BR></SPAN></FONT></FONT></DIV></DIV></TD></TR></TBODY></TABLE><DIV></DIV><DIV></DIV><BR><BR>
<CENTER><DIV class=decofiche4><FONT face="Times New Roman"><A href="LIEN">✥ Reglements</A> × <A href="LIEN">Scenario</A> × <A href="Lien">vacants</A> × <A href="LIEN">annonces</A> × <A href="LIEN">invités ✥</A> </FONT></DIV></CENTER></FONT>

Mon CSS :

Code:

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 30px;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px dotted black;
  border-left: 1px dotted black;
}

Si vous voulez avoir un apercu de mon problème c'est ici :www.frenchamericanpeople.forum-canada.com

Merci D'avance

[Vaaléeriiee]

Nouveauté : Si je clique sur mon image, l'infobulle apparaît 2 secondes puis disparait...

[ge80]

Bonjour

J'ai consulté le lien.
De quelle image est-il question car pour moi rien ne fonctionne en infobulle ?

Suis-je mal réveillé ?

Cordialement
ge

[no_way]

Bonjour, désolé mais dans votre PA je trouve ceci:

Code:

<div class="infobulle"><img src="http://img832.imageshack.us/img832/961/16094202.png">...</div>

il vous faut indiquer ceci:

Code:

<div><a class="infobulle"><img src="http://img832.imageshack.us/img832/961/16094202.png"><span>......</span></a></div>

[Vaaléeriiee]

@ge : Il s'agit d'une icone sur ma PA une icone de Nina Dobrev.

@ no_way : Malheureusement, même si je le remplace.. sa ne marche pas... Pourtant j'ai tout fait comme il le fallait...

[ge80]

Dans votre CSS je vois des lignes de traits.
-----------------------------------------
Est-ce le cas ou est-ce une erreur lors de ma lecture ?

[Vaaléeriiee]

Oui, c'est pour m'aider dans mon CSS, sa me dit que c'est une nouvelle partie...

[ge80]

donc il faut l'écrire comme ceci :
/* ----------------------------------------- */

sinon c'est une erreur et votre CSS sera ignorée !

[Vaaléeriiee]

J'essaye tout de suite

[ge80]

Et vous avez plusieurs lignes à corriger !

[Vaaléeriiee]

Ah bon ? J'ai chanegr un peu, j'ai essayer de le refaire...

Je dois corriger dans lequel ? Le PA ou Le Css ?

[ge80]

Dans votre feuille de style (CSS) via le panneau d'administration -> Affichage -> couleurs -> puis CSS...

car je ne pense pas que vous ayez du style dans votre page d'accueil.

[Vaaléeriiee]

D'accord, je vais voir ce que je peut faire, j'ai fait un copier/coller du tutoriel proposé sur css-actif..donc c'est pour ça.. je suis capable de faire certaines choses en CSS mais pas beaucoup

Je vais voir ça..

[ge80]

OK
J'attends le résultat de la correction.

[no_way]

Idem car pour moi c'est bon:
voir

[Vaaléeriiee]

Je ne vois vraiment pas ce qui peut-être mauvais dans mon css... J'ai regarder ligne par ligne mais franchement..je ne vois absolument rien... Je vais réessayer quelque chose...

[ge80]

Donc ceci n'existe pas ---------------------------------------- ?

Cela pourrait expliquer la non exécution de votre CSS spécifique.

[Vaaléeriiee]

Pourtant je l'ai arrangé, regardé par vous même

Code:


/* ----------------------------------------- */

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 3px dotted black;
  border-left: 1px dotted black;
}

/* ----------------------------------------- */

 

Edit : Même sans.. sa ne marche toujours pas...

[no_way]

logique voici ce que vous avez mis dans votre PA:

Code:


<a href="#" class="infobulle"><img src="http://img832.imageshack.us/img832/961/16094202.png">
<span></span></a><a href="#" class="infobulle">Lexi A. Wilson</a><br>
<a href="#" class="infobulle"><img src="http://40.img.v4.skyrock.net/404/x--vampires-diaries--x/pics/photo_68712245_8.gif"></a>


hors il faut un span qui ne soit pas vide !

Code:


<a class="infobulle"><img src="http://img832.imageshack.us/img832/961/16094202.png">
<span>contenu</span></a><a class="infobulle">Lexi A. Wilson</a><br>
<a class="infobulle"><img src="http://40.img.v4.skyrock.net/404/x--vampires-diaries--x/pics/photo_68712245_8.gif"><span>contenu</span></a>


Je me suis permis de supprimer l'attribut href puisque que vos liens ne mènent nul part.

[ge80]

no_way

Et avec la bonne CSS ceci devrait fonctionner !

[Vaaléeriiee]

Voila.. Maintenant je vois mon infobulle... Merci.. c'est vraiment gentil

[no_way]

Yep
ça devrait aller beaucoup mieux .
De rien et à une prochaine .

PS:
Vous avez refait une erreur !
Faites un copié/collé du code que je vous ai donné .

[ge80]

Et bien voilà un travail d'équipe rondement mené

Cela fonctionne nickel et sans conflit .

bonne soirée

[no_way]

Là, c'est vraiment du travail d'équipe oui ^^.