| | Problème d'infobulles RESOLU |  |
|
 Jessica A. 
{ Membre }
 Messages : 139
 | Bonjour à vous tous. J'ai un problème que voici avec mes infobulles. Elles s'affichent toutes au même endroit, c-a-d, imaginons que j'en place une en bas à gauche, lorsque mon curseur sera sur l'image, elle s'affichera bien en bas à gauche. Mais si j'en mets une autre en haut, elle s'affichera tout de même en bas à gauche. Ce qui pose problème si on mets plusieurs images, car on ne peut pas accéder à toutes les informations, comme des liens, etc. J'ai un code CSS ou il faut mettre des valeurs, ce qui pose problème si je veux en mettre un peu partout des infobulles. N'auriez vous pas un code CSS sans valeurs avec le HTML qui se règle tout seul ? Voici mon CSS - Spoiler:
- Code:
-
a.imginfo {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}
a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: /* 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: 950px; /* on positionne notre infobulle */
left: 700px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
background-image: url(http://nsa07.casimages.com/img/2009/08/31/090831063519908.png);
border-left: 3px solid #1D1B1B;
border-right: 3px solid #1D1B1B;
border-top: 3px solid #1D1B1B;
border-bottom: 3px solid #1D1B1B;
}
Voici mon HTML- Spoiler:
- Code:
-
</span></a><a class="imginfo"><font color="burlywood"><img src="http://nsa10.casimages.com/img/2009/11/06/091106065946999055.jpg"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">PRECIOUS WILLIAM admin</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://moe.mabul.org/up/moe/2009/09/24/img-1935091ldwj.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1"><a href="http://cursed-moon.bbactif.com/profile.forum?mode=viewprofile&u=2">VOIR PROFIL</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <a class="imginfo"><font color="burlywood"><img src="http://nsa10.casimages.com/img/2009/11/06/091106065921104734.jpg"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">PHOENIX MATTHEWS admin</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i44.tinypic.com/346njab.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1"><a href="http://cursed-moon.bbactif.com/profile.forum?mode=viewprofile&u=3">VOIR PROFIL</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
Voici une capture d'écran- Spoiler:
Vous voyez ça s'affiche au même endroit...là il n'y a que deux infobulles, mais j'aimerai en rajouter et du coup, l'infobulle s'affichera complètement à droite et si l'infobulle est complètement à gauche, c'est pas le top. Merci à vous. |
Dernière édition par Jessica A. le Dim 15 Nov 2009, 13:58, édité 1 fois | |
|
| | |
Emaline
{ Membre }
Messages : 202
| Essaye de modifier cela dans ton Css - Code:
-
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: relative;
white-space: /* 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: 950px; /* on positionne notre infobulle */
left: 700px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey; | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Modifié ça par quoi ? Car même si on change les valeurs ça décalera simplement l'infobulle donc toutes en fait^^ | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| J'ai juste fait un copier collé de ton CSS Mais je ne suis pas certaine que cela fonctionne car j'ai essayé sur mon forum test et les infobulle son inexistante... Il doit manqué une partie a ton Css  Bon le code j'ai juste changé la position le reste tu as pas en t'en occupé c'était déjà là mais si tu préfère - Code:
-
a.imginfo:hover span {
display: inline;
position: relative;
white-space:
top: 950px;
left: 700px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey; | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Ça ne marche pas, pour le coup il n'y a plus d'infobulles
(j'ai bien vérifié, je t'ai bien donné tout le CSS qui concerne les infobulle) | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| Après plusieurs essaie de le mettre sur mon forum test cela a fonctionné et j'ai vue que l'info bulle fonctionnait mais se retrouvais completement a l'oposé de la PA alors j'ai modifier les données dams TOP et LEFT car ceux que ta mit était très haute et les infobulles fonctionnait très bien - Code:
-
a.imginfo:hover span {
display: inline;
position: absolute;
white-space:
top: 40px;
left: 20px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey; [/quote] | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| J'ai changé le 100 en 550 et ça fais le même problème qu'au début, elles s'affichent au même endroit...
Sur ce forum :
http://www.new-york-city-life.com/forum.htm
Chaque infobulle est propre à chaque image, tu vois ce que je veux dire ? | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| |
| | |
Jessica A.
{ Membre }
Messages : 139
| Tu est sûr ? Parce que mon code est le code bateau que la plupart des gens utilisent donc je comprends pas pourquoi moi je n'y arrive pas... | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| Moi j'utilise celui là qui est très bien http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ Mais celui du Tuto fonctionne aussi je l'ai utilisé pour une PA d'une amie  | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Je compris rien au Tuto ici alors je vais essayer le tien^^ | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| J'ai essayé le code du forum, j'ai enfin réussis, merci | | |
|
| | |
Tech
{ Membre actif }
 Messages : 1378
| Bonsoir,
Je classe donc ta demande. | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Problème d'infobulles RESOLU | |
|
