Mettre un lien dans une infobulle

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

Résolu Mettre un lien dans une infobulle

Message par Cinderella. Jeu 23 Fév 2012 - 21:47

Bonsoir Smile

Je me remets à vous en ce qui concerne l'utilisation de mon infobulle déjà bien installée sur le forum Smile
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 I love you


Dernière édition par Cinderella. le Lun 27 Fév 2012 - 18:37, édité 1 fois
Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Ven 24 Fév 2012 - 8:50

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

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Ven 24 Fév 2012 - 9:17

Merci pour votre réponse rapide Smile
Justement, c'est ce que j'ai essayé avant de poster une demande d'aide sur Forumactif Smile
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

Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Ven 24 Fév 2012 - 9:20

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 Wink Est-ce que cela décale encore ?

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

Anonymous

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Ven 24 Fév 2012 - 10:12

Merci de me venir en aide Very Happy

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.


Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Ven 24 Fév 2012 - 10:23

Coucou,

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

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Ven 24 Fév 2012 - 10:47

Pas de soucis Smile

"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 Rolling Eyes

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.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Dim 26 Fév 2012 - 16:49

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

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Dim 26 Fév 2012 - 17:46

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 Wink !
Anonymous

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Dim 26 Fév 2012 - 17:52

Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Dim 26 Fév 2012 - 17:56

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 Wink !
Anonymous

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Dim 26 Fév 2012 - 17:57

Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Dim 26 Fév 2012 - 18:05

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

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Lun 27 Fév 2012 - 12:41

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

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: Mettre un lien dans une infobulle

Message par Invité Lun 27 Fév 2012 - 13:25

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 Wink !!
Anonymous

Invité
Invité


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

Résolu Re: Mettre un lien dans une infobulle

Message par Cinderella. Lun 27 Fév 2012 - 18:38

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

Sujet terminé/résolu
Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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