CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:  Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| | Problème dans l'affichage des infobulles |  |
|  Miss~DD 
{ Membre }
 Messages : 4
 | 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 ! >< | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| 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"> <!-- Je te conseille ici de faire une classe dans laquelle tu entres toutes les données pour ton rectangle, j'ignore si tu en avais une comme je ne l'ai pas dans tes codes mais généralement ça facilite la tâche --> <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> <!-- Tu recopies à partir du <p> et tu fermes la balise <p> à la fin de tout --> Css (je t'ai rajouté des balises donc des propriétés, à toi d'ajuster les valeurs  ) - 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 xo | | |
| | | | Miss~DD
{ Membre }
Messages : 4
| 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 ! | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Plaisir Je vais voir de mon côté si je peux trouver la solution miracle (autrement dit, quelqu'un qui la détient  !) xo | | |
| | | | Invité Invité
| Salut, c'est bizarre car chez moi sous chrome ça marche parfaitement Ô~o | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| 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... | | |
| | | | Invité Invité
| Heuu j'ai pas fais attention, je vous tien au jus | | |
| | | | Murtagh 
{ Modérateur }
 Messages : 1492
| Bonjour, Votre problème est-il toujours d'actualité ? Si ce n'est pas le cas, merci de cocher l'icône  en éditant votre premier post. Merci | | |
| | | | Miss~DD
{ Membre }
Messages : 4
| 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 >< | | |
| | | | Kiwi
{ Membre }
Messages : 142
| 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 ^^ | | |
| | | | Psycho
Psychopathe
Messages : 3407
| Bonjour (: Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône en éditant votre premier message (: | | |
| | | | Hortie
{ Membre actif }
Messages : 660
| 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. | | |
| | | | Contenu sponsorisé
| | | | | | | Problème dans l'affichage des infobulles | |
|
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
