Sujets similaires

Bonsoir !

J'ai bien consulté la liste des problèmes résolus, parcouru (je l'avoue un peu rapidement) celle des problèmes en cours... Désolée si la question a déjà été posée.

Voilà mon problème : je suis en train de travailler sur la PA de mon forum sur un forum-test, que vous pouvez voir ici : http://c-est-mon.1fr1.net/
Je ne sais pas si ça vous le fait également... Personnellement, je ne rencontre aucun problème dans l'affichage, mais j'ai déjà montré la PA a notre équipe modératrice, et deux des membres ne la voient pas correctement >< Je ne sais pas si c'est utile de le préciser, mais elles utilisent Safari et Chrome. Je leur ai demandé de me faire une capture d'écran et voilà :
https://2img.net/h/oi55.tinypic.com/2rrsz0n.jpg
https://2img.net/h/oi52.tinypic.com/2aenuk2.jpg

Tandis que moi et l'amie qui avons codé la PA voyons ceci : https://2img.net/h/oi55.tinypic.com/hv6npx.jpg
C'est à dire, des infobulles qui s'affichent normalement au passage de la souris sur les images...

Voilà le code HTML de cette partie de la PA (Si vous avez besoin du code en entier, dites-le moi, mais je ne pense pas que ce soit utile donc... :O)

Code:: <td class="tabl" align="center" valign="top" width="22%"><span style="font-size: 12pt;">»</span><font style="font-family: Palatino Linotype;" size="3"><span style="font-weight: bold;"> L E   S T A F F </span></font><span style="font-size: 12pt;">«</span><br><br>

<a class="infobulle"><img src="http://i51.tinypic.com/a3guio.png" onmouseover="this.src='http://i56.tinypic.com/2cnjog0.png';" onmouseout="this.src='http://i51.tinypic.com/a3guio.png';" alt="" border="0">
<span><div style="text-align: center;"><b>Fondatrice</b><br><img src="http://i53.tinypic.com/14jx6pv.png"><br> <div class="ob"><b>*** DarkD ***</b></div>(Allen Winters)<br><br><div><a href="http://pensionnat-interdit.actifforum.com/msg.forum?mode=post&u=176" target="_blank">Envoyer un MP ?<br>♥</a></div></div></span></a>

<a class="infobulle"><img src="http://i54.tinypic.com/206exdh.png" onmouseover="this.src='http://i54.tinypic.com/2n19pfk.png';" onmouseout="this.src='http://i54.tinypic.com/206exdh.png';" alt="" border="0">
<span><div style="text-align: center;"><b>Admin</b><br><img src="http://i55.tinypic.com/168enw1.png"><br> <div class="ob"><b>*** Mistral ***</b></div>(Helen Machiaviel)<br><br><div><a href="http://pensionnat-interdit.actifforum.com/msg.forum?mode=post&u=198" target="_blank">Envoyer un MP ?<br>♥</a></div></div></span></a>

<a class="infobulle"><img src="http://i52.tinypic.com/2is9udz.png" onmouseover="this.src='http://i55.tinypic.com/2afmm9w.png';" onmouseout="this.src='http://i52.tinypic.com/2is9udz.png';" alt="" border="0">
<span><div style="text-align: center;"><b>Admin</b><br><img src="http://i55.tinypic.com/15cj8kk.png"><br> <div class="ob"><b>*** Angie ***</b></div>(Emily Johanson S.)<br><br><div><a href="http://pensionnat-interdit.actifforum.com/msg.forum?mode=post&u=47" target="_blank">Envoyer un MP ?<br>♥</a></div></div></span></a>

<a class="infobulle"><img src="http://i52.tinypic.com/p3k3p.png" onmouseover="this.src='http://i52.tinypic.com/11l1w13.png';" onmouseout="this.src='http://i52.tinypic.com/p3k3p.png';" alt="" border="0">
<span><div style="text-align: center;"><b>Admin</b><br><img src="http://i52.tinypic.com/egs9j8.png"><br> <div class="ob"><b>**** Nii' ****</b></div>(Emrys Sulwyn)<br><br><div><a href="http://pensionnat-interdit.actifforum.com/msg.forum?mode=post&u=835" target="_blank">Envoyer un MP ?<br>♥</a></div></div></span></a>

<br><a href="http://pensionnat-interdit.actifforum.com/reglement-f1/le-staff-du-pays-t2673.htm">→ ...et leurs larbins ♥</a></td>

Et le CSS utilisé :

Code:: a.infobulle {
position: relative; }

a.infobulle span {
display: none; }

a.infobulle:hover {
background: none;
z-index: 999; }

a.infobulle:hover span {
display: inline;
position: absolute;

white-space: nowrap;

top: 5px;
left: 15px;

background: #ebebeb;

color: black;
padding: 3px;

border: 1px dotted black;
border-left: 1px dotted black;
text-transform: none;
text-shadow: 0px 0px 0px #9c5f2a;
letter-spacing: 0px; }

.ob {
text-shadow: 0px 0px 4px #3b0838;
color : #FFFFFF;
font-size: 12px;
font-style: balder;
white-space: nowrap; }

Merci d'avance ! ><

Salut

Bon, je sais pas le pourquoi de la chose (ce qui est ma fois très malheureux car j'ai eu le même problème il y a quelques temps) c'est le lien dans l'infobulle.

Ça prendrait quelqu'un sans doute de plus expérimenté que moi pour trouver le problème, mais en attendant, pour moi ya même pas de questions à ce poser: elle est là l'erreur.

Donc voilà ce que je te propose qui pourrait arranger les chose: mettre le lien sur l'infobulle au complet, c'est à dire que peu importe où ils cliqueront, ça les amènera au MP. Sinon, on enlève le lien ou comme j'ai dit, tu espères trouver quelqu'un qui est meilleur que moi ^^

J'ai quand même refait ton code car ce n'était pas la seule chose qui faisait buggé le tout (c'est seulement la seule chose que je n'ai pas trouvé...). En fait, j'ai seulement refait le début du code, tu n'auras qu'à copier-coller les liens des images et le morceaux de textes pour le refaire au complet. (LIS BIEN LES COMMENTAIRES QUE J'AI MIS DANS LE CODE!)

Code:: <td class="tabl" align="center" valign="top" width="22%">
<div class="nom_de_class"> 
<div class="titre"> » <b>L E S T A F F</b> « </div>
<p><a class="info" target="_blank"><img src="http://i51.tinypic.com/a3guio.png">
<span>Fondatrice<br><img src="http://i53.tinypic.com/14jx6pv.png"/><br><font style="font-size: 12pt; ffont-style: balder; color: color : #FFFFFF; text-shadow: 0px 0px 4px #3b0838;"><b>*** DarkD ***</b><br>(Allen Winters)
</span></a>

Css (je t'ai rajouté des balises donc des propriétés, à toi d'ajuster les valeurs Wink

)

Code:: a.infobulle {
position: relative;
opacity : 0.7
}

a.infobulle span {
display: none; }

a.infobulle:hover {
background: none;
z-index: 999;
opacity : 1}

a.infobulle:hover span {
display: inline;
position: absolute;

white-space: nowrap;

top: 5px;
left: 15px;

background: #ebebeb;

color: black;
padding: 3px;

border: 1px dotted black;
border-left: 1px dotted black;
text-transform: none;
text-shadow: 0px 0px 0px #9c5f2a;
letter-spacing: 0px;
}

.titre {
font-family: Palatino Linotype;
font-size: 12pt;
}

.nom_de_class {
font-size: Xpx;
font-family: XXXXX;
border: Xpx solid #COLOR;
background-color: #COLOR;
color: #COLOR;
width: Xpx;
height: Xpx;
}

Voilà!

Si ça ne marche pas encore ou que tu as d'autres problème, n'hésite pas à me demander Smile

xo

D'accord, merci beaucoup ! En effet, si quelqu'un de "plus expérimenté" sait comment régler le problème tout en gardant le lien, je suis preneuse... Autrement, j'ai tout simplement supprimé le lien qui menait au MP (ce n'était pas si important, et au pire je le rajouterai en dessous des images et non dans l'infobulle).

Merci beaucoup en tout cas pour ta réponse !

Plaisir

Je vais voir de mon côté si je peux trouver la solution miracle (autrement dit, quelqu'un qui la détient Razz

!)

xo

Salut, c'est bizarre car chez moi sous chrome ça marche parfaitement Ô~o

Avec ou sans le lien dans l'infobulle? Car quand je l'ai essayé avec ses codes, moi ça fonctionnait uniquement sous Firefox, rien ne marchait sous Chrome, Safari ou IE (rien de suprenant xD).

Étrange...

Heuu j'ai pas fais attention, je vous tien au jus Wink

Bonjour,
Votre problème est-il toujours d'actualité ? Si ce n'est pas le cas, merci de cocher l'icône Problème dans l'affichage des infobulles Resolu3

en éditant votre premier post.

Merci Smile

Eh bien, mon problème est réglé puisque j'ai tout simplement enlevé les liens, mais si quelqu'un a une solution pour que les infobulles s'affichent correctement tout en contenant un lien, je suis preneuse ><

Bonjour,

Il s'agit d'un problème d'ordre sémantique (ce que signifient les balises HTML) et de normes... Une balise a, c'est un lien. Il n'est pas "normal" de trouver dans un lien dans un autre lien. On peut y trouver du texte ou une image, mais pas un lien. Ce que vous faites ne devrait marcher sous aucun navigateur, en réalité. C'est plus un bug de Firefox, et vous n'êtes pas à l'abri qu'un jour, ils décident de corriger cela dans une nouvelle version ou mise à jour du navigateur.

Pour résoudre le problème, il suffit de remplacer le premier lien par un bloc neutre (une div). J'avais fait un tuto sur ça, il est dans les astuces je crois... C'était une amélioration d'un tuto déjà existant...

Bonne fin de journée ^^

Sujet: Re: Problème dans l'affichage des infobulles Ven 07 Jan 2011, 16:58

Bonjour (:
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône Problème dans l'affichage des infobulles Resolu3

en éditant votre premier message (:

Sujet: Re: Problème dans l'affichage des infobulles Jeu 13 Jan 2011, 14:28

Bonjour
Aucune relance n'ayant été faites de la part du créateur de ce sujet, je le considère comme résolue. Je classe.

Problème dans l'affichage des infobulles

Problème dans l'affichage des infobulles

Sujets similaires

Sujets similaires

Partenaires Or