Discussion :

[dukky]

Bonjour,

Débutant en CCS, je suis actuellement en train de travailler sur le CMS Guppy.
Je vais essayer d'être le plus clair possible: je cherche à afficher des infobulles lorsque le curseur de la souris survole les icônes du menu ( représenté par des images en gif : home.gif, news.gif...)

J'ai trouver sur différentes forum les lignes de codes à insérer dans mon CCS, entre autre sur le très bon site qu'es devellopez.com. Malgré ça, pas moyen d'arriver à mes fins.

J'utilise la lignes suivant dans mon document html (ou xhtml ,j'ai encore du mal à faire la difference..) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<a  class="info" 
      href="index.php?lng=fr" 
      title="ACCUEIL">
             <img src="inc/img/icons/ico_tete/home.gif" 
      border="0" 
  <span>  Texte de l'infobulle  </span>
</a>

La classe "info" permet l'affichage de l'infobulle. Mon problème est le suivant, au lieu que l'infobulle apparaisse sur mon icone "ACCUEIL", un nouvel icone "ACCUEIL" apparait...

Ce qui me fait un icone bien placé sans infobulle et un icone mal placé avec infobulle...

Mes connaissance sont encore très limité et j'ai beau cherché, je ne trouve pas de réponse à mon problème.

Merci d'avance à mon eventuel futur sauveur!

[desert]

Bonjour,
Je suppose que tu veux parler de l'attribut title qui fait aussi apparaître une info-bulle, sans doute la source de ton problème. Il ne te reste plus qu'à le supprimer.
PS: N'oublie pas de fermer ta balise img.

[dukky]

Merci pour ta réponse mais ce n'est hélas pas ça, voici un exemple pour que mon problème soit plus parlant :


(admettons que cette série de smiley soit mon menu, je cherche alors à ce que lorsque ma souris survol ces icônes apparaisse une infobulle.)

dans mon cas cela donne ça :

:





Et c'est l'icone qui vient de se "dédoubler" qui possède une infobulle...
je bloque vraiment, j'essaie plein d'approche différente mais pour l'instant aucun résultat...

ps : pour info j'ai aussi poster sur le forum de freeguppy :http://www.freeguppy.org/thread.php?...&fid=1&cat=100

aucune solution de ce coté la non plus.

[Msieurduss]

A tout hasard, tu as essayé de fermer ta balise image ? Des fois des balises mal fermées ça fait tout casser ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img src="inc/img/icons/ico_tete/home.gif" 
      border="0" />

Car une icône qui se dédouble, c'est étrange... on peut voir un exemple en ligne (histoire de faire un petit contrôle firebug et de tenter quelques trucs) ?

[dukky]

Pour l'instant je travail en local donc je ne peut pas montrer le site mais j'ai mis une petite image en pièce joint crée par mes soin qui j'espère illustrera ce problème

Sinon j'ai essayé de fermer la balise image comme indiqué par Msieurduss mais ça a pour seul effet de faire disparaitre l'infobulle...

Je commence à croire que c'est pas possible mais pourtant de nombreux site existe (exemple du résultat sur http://guppy-skins.nuxit.net/ ; son menu est en gros ce que je cherche à réaliser)

Mais je ne désespère pas !

[12monkeys]

Bonsoir

Tu peut commencer par lire ce tutoriel qui te donnera pas à pas la méthode pour faire une info bulle : http://r-hunel.developpez.com/tutoriels/css/info-bulle/