Infobulle ne s'affiche pas correctement

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

Résolu Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Jeu 28 Avr 2011 - 19:14

Bonjour, bonsoir!
Et oui, comme d'habitude j'ai un problème que je n'arrive pas à comprendre. x)
J'ai un petit problème avec mon infobulle sur ma page d'accueil, j'ai beau à regarder mon CSS, je vois pas où est le problème. Car sur Firefox, l'infobulle est niquel et quand je vais sur Safari, c'est pas vraiment jolie-jolie à voir. Alors que quand je vais sur d'autres forums avec Safari, je peux voir les infobulles correctement, donc je sais pas trop où est le problème avec mon infobulle.
Je vous donne quelques images pour voir.

Sur Safari vue sur mon infobulle dans la P.A.:


Sur Firefox vue sur mon infobulle dans la P.A.:


Voici la CSS de mon infobulle si besoin :

Code:
a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: hand;
position: relative;
text-decoration:none;
border: 0;

}
a.infobulle:hover span {
  display: inline; /* ceci 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é */
top: 0px; /* on positionne notre infobulle */
  left: 50px;
background: #ffffff ; /* arrière-plan de l'infobulle */
color: #000000; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 4px solid AliceBlue;
  border-left: 2px solid MediumTurquoise;
border-right: 2px solid MediumTurquoise ;}

Voici le code HTML que j'utilise dans ma page d'accueil :

Code:
<a href="#" class="infobulle"><img style="border:4px solid AliceBlue; border-left: 2px solid MediumTurquoise; border-right: 2px solid MediumTurquoise;"src="http://img851.imageshack.us/img851/6281/iconpa.png" width="50" height="50"/><span><center><font color= MediumTurquoise >Hisashi Isamu</font><br><font color=MediumTurquoise >The Natural one</font><br>
<img src="http://img585.imageshack.us/img585/2056/iconpacolor.png"><div><a href="http://og-rpg-test.forumactif.org/u1rpg"_blank">Me</div><div><a href="http://og-rpg-test.forumactif.org/privmsg?mode=post&u=1"_blank">M.P. me</div>

Merci d'avance à celle ou celui qui me donnera un petit coup de main. ^^


Dernière édition par Miya Yoshizumi le Mer 4 Mai 2011 - 18:58, édité 1 fois

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Ven 29 Avr 2011 - 22:06

Uhhh... Un petit up? n_n''

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Dim 1 Mai 2011 - 12:16

Up. ~

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Lun 2 Mai 2011 - 16:07

Nyup.. ~

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Mar 3 Mai 2011 - 19:53

Up. ~

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Invité le Mar 3 Mai 2011 - 19:56

Bonsoir,

Safari faisait la tête, mais Firefox 4 aussi sur mon forum test Razz . En remplaçant <a href="#" class="infobulle">....</a> par <div class="infobulle">....</div> dans votre code
Code:
<div class="infobulle"><img style="border:4px solid AliceBlue; border-left: 2px solid MediumTurquoise; border-right: 2px solid MediumTurquoise;"src="http://img851.imageshack.us/img851/6281/iconpa.png" width="50" height="50"/><span><center><font color= MediumTurquoise >Hisashi Isamu</font><br><font color=MediumTurquoise >The Natural one</font><br>
<img src="http://img585.imageshack.us/img585/2056/iconpacolor.png"><div><a href="http://og-rpg-test.forumactif.org/u1rpg"_blank">Me</div><div><a href="http://og-rpg-test.forumactif.org/privmsg?mode=post&u=1"_blank">M.P. me</div></span></div>

et en changeant le CSS comme ci-dessous, ça fonctionne:
Code:
.infobulle {
      position: relative;
    }

.infobulle span {
      display: none; /* ceci masque l'infobulle */
    }
.infobulle:hover {
      background: none; /* correction d'un bug IE */
      z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
    cursor: hand;
    position: relative;
    text-decoration:none;
    border: 0;

    }
.infobulle:hover span {
      display: inline; /* ceci 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é */
    top: 0px; /* on positionne notre infobulle */
      left: 50px;
    background: #ffffff ; /* arrière-plan de l'infobulle */
    color: #000000; /* texte dans l'infobulle */
      padding: 3px;

      /* bordures de votre infobulle*/
      border: 4px solid AliceBlue;
      border-left: 2px solid MediumTurquoise;
    border-right: 2px solid MediumTurquoise ;}

Cordialement.

Invité
Invité


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

Résolu Re: Infobulle ne s'affiche pas correctement

Message par Miya Yoshizumi le Mer 4 Mai 2011 - 18:58

Oh! Merci beaucoup Isolde!
Ce code marche parfaitement. :3
Vous êtes vraiment ma sauveuse! x)
Merci encore!

Miya Yoshizumi
***

Féminin
Messages : 146
Inscrit(e) le : 21/03/2009

http://hunterXhunter-world.forumactif.com
Miya Yoshizumi a été remercié(e) par l'auteur de ce sujet.

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