Code pour Infobulle..

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 4:36

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


Dernière édition par Vaaléeriiee le Mer 29 Déc 2010 - 19:41, édité 1 fois
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 5:36

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

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 8:51

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
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par no_way Mer 29 Déc 2010 - 11:00

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>
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 18:49

@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...
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 18:57

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


ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 18:59

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

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:02

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

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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:04

J'essaye tout de suite
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:09

Et vous avez plusieurs lignes à corriger !
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:12

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

Je dois corriger dans lequel ? Le PA ou Le Css ?
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:14

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.
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:18

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..
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:23

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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par no_way Mer 29 Déc 2010 - 19:26

Idem car pour moi c'est bon:
voir
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:31

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...
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:34

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

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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:37

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...


Dernière édition par Vaaléeriiee le Mer 29 Déc 2010 - 19:39, édité 1 fois
Vaaléeriiee

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par no_way Mer 29 Déc 2010 - 19:38

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.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:40

cheers no_way

Et avec la bonne CSS ceci devrait fonctionner !
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par Vaaléeriiee Mer 29 Déc 2010 - 19:41

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

Vaaléeriiee
***

Féminin
Messages : 136
Inscrit(e) le : 09/12/2009

http://thesimsliveyourlife.forum-canada.com/
Vaaléeriiee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par no_way Mer 29 Déc 2010 - 19:42

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

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


Dernière édition par no_way le Mer 29 Déc 2010 - 19:44, édité 1 fois
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par ge80 Mer 29 Déc 2010 - 19:43

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

Cela fonctionne nickel et sans conflit Wink.

bonne soirée

victoire
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour Infobulle..

Message par no_way Mer 29 Déc 2010 - 19:45

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

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum