Info bulle simple

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

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Info bulle simple

Message par Amaaranth le Mar 6 Mar 2012 - 17:04

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 !

Amaaranth
*

Féminin
Messages : 45
Inscrit(e) le : 25/07/2010

http://never-tell.forumactif.org/
Amaaranth a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Info bulle simple

Message par Amaaranth le Mar 6 Mar 2012 - 17:54

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

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

Amaaranth
*

Féminin
Messages : 45
Inscrit(e) le : 25/07/2010

http://never-tell.forumactif.org/
Amaaranth a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Info bulle simple

Message par Amaaranth le Mar 6 Mar 2012 - 18:36

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.

Amaaranth
*

Féminin
Messages : 45
Inscrit(e) le : 25/07/2010

http://never-tell.forumactif.org/
Amaaranth a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

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


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