Mettre un lien dans une infobulle

[Cinderella.]

Bonsoir

Je me remets à vous en ce qui concerne l'utilisation de mon infobulle déjà bien installée sur le forum
J'aimerais mettre des liens sur "Mp" et "Profil" sur la page d'accueil, lorsque vous survolez les petits sièges rouges avec des animaux. Seulement, je n'y arrive pas, lorsque j'essaye, tout mon code se déforme et mon infobulle disparaît.
Je suppose que le problème vient de mon code CSS de base (mon infobulle est déjà considérée comme une balise <a>), je ne peux donc pas mettre des balises <a> à l'intérieur de la description de l'infobulle.
Comment faire autrement ?
Le lien de mon forum est dans mon profil, et voici mon code CSS et HTML :

Code:


a.info{
position:relative;
z-index:24;
color:#a2a434;
text-decoration:none;
text-transform: uppercase;
}
 
a.info:hover{
z-index:25;
}
 
a.info div{
display: none
}
 
a.info:hover div{
display:block;
  font-family: arial;
position:absolute;
top:0em; left:0em; width:8em;
background-color:#dfd9cd;
border-right: 4px #a2a434 solid;
border-left: 4px #a2a434 solid;
  -moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
color:#a2a434;
text-align: justify;
font-style: normal;
  text-transform: uppercase;
padding:5px;
  width: 127px;
}


Code:


<a class="info" href="http://once-upon-a-time.1talk.net/u2"><img src="http://files.getwebb.org/files/55/2a/85/127d577a2939a331c5beaf2ab4d8b8faeb/source.png"><div><center><img style="width: 90px;"src="http://93.img.v4.skyrock.net/938/x-so-jenii-x/pics/1214253076.gif">
<br />
<span>LANA.</span>
<br />
<span style="text-transform: none; color: #968e83;">Alias Emilie</span>
<br/>
<span><span style="color: #968e83;">MP</span>  <span style="color: #973532;">Ψ</span> <span style="color: #968e83;">PROFIL</span></span>
</center></div></a>

<a class="info" href="http://once-upon-a-time.1talk.net/u3"><img src="http://files.getwebb.org/files/1b/de/e9/a7c6397ee0dc0ab4a72a6c2919b0de1427/source.png"><div><center><img style="width: 90px;"src="http://29.media.tumblr.com/tumblr_lucyqzGX5U1qdu64xo6_250.gif">
<br />
<span>Ariana K. O'Sullivan</span>
<br />
<span style="text-transform: none; color: #968e83;">Alias Elodie</span>
<br/>
<span><span style="color: #968e83;">MP</span>  <span style="color: #973532;">Ψ</span> <span style="color: #968e83;">PROFIL</span></span>
</center></div></a>


Un grand merci d'avance, c'est le dernier détail qu'il me reste avant de terminer notre page d'accueil

[Invité]

Coucou,

Rajoute ce code là où tu le veux :

Code:

<a href="LE LIEN DES MP">M.P</a>

Et

Code:

<a href="LE LIEN DU PROFIL">Profil</a>

[Cinderella.]

Merci pour votre réponse rapide
Justement, c'est ce que j'ai essayé avant de poster une demande d'aide sur Forumactif
En ajoutant ce code, mon infobulle se détruit, je ne peux même plus cliquer ou survoler, ça m'affiche automatiquement ça sur mon forum :
http://files.getwebb.org/files/b0/96/31/05c2d5156a164fb1b89d8c07fe870adda2/source.png

Je pense que le problème vient du code CSS de base (qui comprend déjà des balises de type <a>), que j'avais trouvé ici : http://creer-un-site.fr/creer-une-info-bulle-en-css-70.php

[Invité]

pouvez vous me montrer une image sans le code que je viens de vous donner ?

c'est peut-être le mot profil qui est trop grand et qui décale ce qui ne serais pas supposer...

Faisons un teste prenez le mot profile et marquer juste la lettre F et effacer le reste du mot Est-ce que cela décale encore ?

Du coup pourrais-tu me poster le CSS correspondant avec ta modification s'il te plait ?

[Cinderella.]

Merci de me venir en aide

Voici une image sans les liens <a> dans l'infobulle (tout fonctionne très bien, sauf que je ne peux pas mettre de liens (pour le moment) sur les mots "MP" et "Profil".
Voici une capture d'écran de l'infobulle, avec les codes correspondants :
http://files.getwebb.org/files/24/7e/89/2e9d171bca97aeacefefbdde55f7183d39/source.png

Code:

       
        a.info{
        position:relative;
        z-index:24;
        color:#a2a434;
        text-decoration:none;
        text-transform: uppercase;
        }
       
        a.info:hover{
        z-index:25;
        }
       
        a.info div{
        display: none
        }
       
        a.info:hover div{
        display:block;
          font-family: arial;
        position:absolute;
        top:0em; left:0em; width:8em;
        background-color:#dfd9cd;
        border-right: 4px #a2a434 solid;
        border-left: 4px #a2a434 solid;
          -moz-border-radius:20px;
        -webkit-border-radius: 20px;
        -khtml-border-radius: 20px;
        color:#a2a434;
        text-align: justify;
        font-style: normal;
          text-transform: uppercase;
        padding:5px;
          width: 127px;
        }

Code:

<a class="info" href="http://once-upon-a-time.1talk.net/u3"><img src="http://files.getwebb.org/files/1b/de/e9/a7c6397ee0dc0ab4a72a6c2919b0de1427/source.png"><div><center><img style="width: 90px;"src="http://29.media.tumblr.com/tumblr_lucyqzGX5U1qdu64xo6_250.gif">
<br />
<span>Ariana K. O'Sullivan</span>
<br />
<span style="text-transform: none; color: #968e83;">Alias Elodie</span>
<br/>
<span><span style="color: #968e83;">MP</span>  <span style="color: #973532;">Ψ</span> <span style="color: #968e83;">PROFIL</span></span>
</center></div></a>

Le mot "profil" ne décale pas, puisque sur l'image que je vous communique les termes "MP" et "Profil" s'affichent sans problème. C'est à partir du moment où j'ajoute des liens que l'infobulle disparaît.

[Invité]

Coucou,

Tu peux me donner un descriptif pour les code de CSS juste me dire ce que chacun fait ?

[Cinderella.]

Pas de soucis

"Info" c'est la classe de l'image que tu survoles (le fauteuil rouge avec l'animal).

a.info définit l'allure du texte qui appelle l'infobulle (pour te donner un exemple, ici c'est le texte : Passer votre souris ici.)
J'ai remplacé ce texte par une image, donc les paramètres définis ici ne me servent pas à grand chose au final

a.info:hover définit un z-index supérieur au z-index de la balise précédente "a.info" pour signaler que l'infobulle doit s'afficher au-dessus du texte ou l'image "appelant".

a.info div symbolise que la div (l'infobulle) est cachée par défaut.

a.info: hover div contient toutes les propriétés de mon infobulle active : elle s'ouvre au survol de l'image (fauteuil avec l'animal), elle a une taille définie (127 px en width), une couleur, un style de texte (uppercase), des arrondis avec border-radius...

[Cinderella.]

Je n'ai toujours pas résolu le problème, je suis donc ouverte à toute suggestion

[Invité]

Remplace ton HTML par celui-ci:

Code:

        <a class="info" href="http://once-upon-a-time.1talk.net/u3"><img src="http://files.getwebb.org/files/1b/de/e9/a7c6397ee0dc0ab4a72a6c2919b0de1427/source.png"><div><center><img style="width: 90px;"src="http://29.media.tumblr.com/tumblr_lucyqzGX5U1qdu64xo6_250.gif">
        <br />
        <span>Ariana K. O'Sullivan</span>
        <br />
        <span style="text-transform: none; color: #968e83;">Alias Elodie</span>
        <br/>
        <span><span style="color: #968e83;"><a href="TON LIEN ICI">MP</a></span>  <span style="color: #973532;">Ψ</span> <span style="color: #968e83;"><a href="TON LIEN ICI">PROFIL</a</span></span>
        </center></div></a>

Regarde le code... Et n'oublie pas de placer tes lien !

[Cinderella.]

Le résultat est le même qu'au début du sujet:
http://files.getwebb.org/files/b0/96/31/05c2d5156a164fb1b89d8c07fe870adda2/source.png

[Invité]

Coucou laisse le problème comme cela et donne moi le lien ou je peux voir le problème je vais aller voir si je peux faire un truc !

[Cinderella.]

Voilà
http://once-upon-a-time.1talk.net/

[Invité]

Je sais pas si c'est possible .. Mais je epux avoir une image de ce que c'est supposer donner ?

[Cinderella.]

Voilà une capture du résultat escompté, avec des liens sur "MP" et "Profil", ce que je ne parviens pas à faire à l'heure actuelle
http://files.getwebb.org/files/9a/28/da/683d9240dba215c0dc793c40a5beb5ed75/source.png

[Invité]

T'inquiète pas je travail toujours sur ton cas.. J'arrive pas a comprendre oO Pour quoi ça fait cela .. Je vais peut-être te le coder d'une autre manière !!

[Cinderella.]

Bonjour, finalement, j'ai abandonné le projet faute de temps.
Merci Webmestre_pro pour ton aide

Sujet terminé/résolu