Info bulle simple

[ludogamer]

Bonjour ,Dans mon forum j'ai pas mal de categories et j'aurais voulu faire de la place en mettands juste
une info bulle simple ,Je vais éssayer de vous expliquer ,j'aimerais quant ton survole une image d'une categories une info bulle souvrirais avec les information concernant les sous menu qui presaide et les lien direct sans chercher ont n'arrive directement ,

merci à tous

[Amaaranth]

Bonjour,

Je vais essayer de me montrer productive et de vous fournir une aide, tant qu'à faire ^^.
Pour faire des infobulles, il vous faut du CSS et bien sûr du HTML.
Tout d'abord dans CSS, il faut que vous indiquiez ce que vous voulez comme infobulle, son apparence :

Code:


a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on 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é */
  margin-top: 20px;
  margin-left: -20px;
  background: #0F3142;
  color: #------;
  padding: 3px;
  border: 2px solid #344d48 ;
}

Un fois cela placé avec les données que vous désirez, il suffit de placer le code HTML pour vos catégories.

Code:

<a class="imginfo" href="#">la catégorie<span>Votre texte de l'info bulle, vos liens</span></a>

Après, je ne sais pas si ce que vous voulez c'est de l'aide pour les placer dans les templates (il faudra le faire puisque vous souhaitez agir sur les catégories et forums) ou simplement obtenir un code. Pour le code, je peux faire plus simple mais celui-ci est assez complet et pas trop compliqué, il me semble.

J'espère avoir pu être utile, bonne fin de journée !

[ludogamer]

Oui sait se que je chercher je vous remercie ,
par contre la bulle et trop longue et je n'arrive pas la le réduire style un
petit rétangle, gomment vous t'il le regler merci

[Amaaranth]

Rajoutez ceci dans votre partie de code a.imginfo:hover span {

Code:

width: 100px ; /*largeur souhaitée*/
height:100px; /*hauteur souhaitée*/

[ludogamer]

dans le css je remet sa en dessou merci

[ludogamer]

j'ai donc mis se code il marche ,Jai donc régler la taille de la bulle mais mon
texte lui ne va pas à la ligne du carré et donc il me manque une partie du texte voulu ,Il faut sans doute un petite réglage ,Une fois que tous seras régler je touche plus à rien à avait vous une petite soluttions pour finir
cette info bulle

[Amaaranth]

Essayez en enlevant :

Code:


  white-space: nowrap;


du code, je ne suis pas sûre mais il me semble que c'est cela qui empêche le retour à la ligne.

[ludogamer]

Oui c'est bien sa je les enlevé et donc je mais sur résolu merci pour votre
aides et bonne soirée