Sujets similaires

Sujet: Re: Faire une infobulle (messages) Ven 05 Nov 2010, 14:31

Code:: <a class="imginfo"><img src="http://i63.servimg.com/u/f63/14/03/72/43/80-62110.jpg" /><span><table><img src="http://i63.servimg.com/u/f63/14/03/72/43/isa10.png" /><div><a href="http://www.frenchficsfanart.com/msg.forum?mode=post&u=80" class="postlink" target="_blank">Lui adresser un MP</a></div><div><a href="http://www.frenchficsfanart.com/le-coin-cafe-thes-alcools-petits-fours-c43/" class="postlink" target="_blank">Sa section</a></div>Modératrice des sections détente</span></table></a>

Sujet: Re: Faire une infobulle (messages) Ven 05 Nov 2010, 14:37

Merci d'avoir répondu le nouveau code fonctionne à la perfection sur safari par contre le problème demeure entier sous EI.

Édit : je viens de m'apercevoir que ce code ne fonctionne pas non plus sous G chrome

Sujet: Re: Faire une infobulle (messages) Dim 28 Nov 2010, 06:30

Chez moi, ca marche pas du tout =//
Mais je crois savoir pourquoi, et j'aimerai savoir si il a une solution.

1) sois je place le htlm au mauvais endroit ( je sais pas trop ou le mettre, enfaite...)
2) j'ai une PA réactive, c'est qu'une image avec certains codes, et j'aimerai mettre des infosbulles sur les avatars des admins, mais comme c'est une image toute faite..=//
(pour vous montrer: mon forum)

Sujet: Re: Faire une infobulle (messages) Lun 29 Nov 2010, 05:27

Bonjour,

J'ai essayé de répondre à cette question ici, sinon, question totalement à part, pourquoi as-tu mis une barre de défilement dans ton image? Juste comme ça, en tant qu'utilisateur, mon premier réflexe quand je l'ai vue a été d'essayer de descendre la barre xD Ce qui ne fonctionnait évidemment pas et m'a intriguée sur le coup, j'ai tenté plusieurs fois d'y arriver x)

Déjà, merci d'avoir répondu,c 'est gentil =3
(Alors enfaite, c'est juste un truc très bête. Au départ, je n'étais pas sencée être la codeuse, n'y connaissant rien, et c'est une amie qui devait le faire, mais elle nous a laché, et comme on savait pas du tout comment l'enlever, on c'est dit que ca ferait un effet. XD)

Bonjour
Je fais UP car personne ne me répond , ce beug j'aurais du le résoudre depuis bien longtemps.
J'ai suivis le tutoriel à la lettre , mais ça ne marche toujours pas. J'ai seulement fais du copier / coller , j'ai rien changé. Doit-on compléter certaines choses ?

Dernière édition par Tupac le Jeu 06 Jan 2011, 20:57, édité 1 fois

Bonjour

problème résolu

Bonjour,

Je rencontre un grave problème.. J'ai suivis à la lettre, mais mon infobulle ne marche pas..dès que je passe ma souris dessus rien ne marche.

Mon CSS :

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 */

}
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: 5px; /* on positionne notre infobulle */
left: 30px;

background: #ebebeb; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

Mon HTMl :

Code:: <a class="imginfo"><img src="http://img832.imageshack.us/img832/961/16094202.png" /><span><table><br><img src="http://40.img.v4.skyrock.net/404/x--vampires-diaries--x/pics/photo_68712245_8.gif" /> <br>
<div><a href="http://www.frenchsandamericans.forum-canada.com/msg.forum?mode=post&u=1" class="postlink" target="_blank">La Contacter</a></div><div><a href="http://www.frenchsandamericans.forum-canada.com/u1" class="postlink" target="_blank"></div>Fondatrice</span></table></a>

Ici pour l'apercu de mon problème

Merci D'avance

Bonsoir ;

vaaléeriiee : c'est normal puisque dans votre code il est noté :

Code:: <a class="imginfo">

et que dans votre CSS il est affiché

Code:: a.infobulle

Si la class dans le CSS ne s'appelle pas pareil que dans le code de l'infobulle il est normal que cela ne fonctionne pas Wink

Deux solutions donc ;
- soit renommer les "infobulle" dans le CSS par "imginfo"
- soit renommer les "imginfo" dans le code de votre page par des "infobulle" Wink

J'ai changé imginfo pour infobulle.. Donc la sur mon forum, je n'ai plus l'image qui devrait normalement apparaitre dans l'infobulle, mais toujours pas d'infobulle.. Les liens sont aussi toujours visible...

Pourtant en utilisant le code donné dans votre précédent message et en modifiant le CSS ça marche sur mon forum de test. Pourrais-je avoir le code de la page d'accueil ?

Code:: <a class="infobulle"><img src="http://img832.imageshack.us/img832/961/16094202.png" /><span><table><br><img src="http://40.img.v4.skyrock.net/404/x--vampires-diaries--x/pics/photo_68712245_8.gif" /> <br> Fondatrice <br><div><a href="http://frenchsandamericans.forum-canada.com/privmsg?mode=post&u=1" class="postlink" target="_blank">La Contacter</a></div><div><a href="http://frenchsandamericans.forum-canada.com/u1" class="postlink" target="_blank"></div> Son Profil</span></table></a>

</a></p><div style="text-align: justify;"><font size="1"><span style="font-weight: bold; color: rgb(153, 149, 82);">SYNOPSIS ♛</span>À VENIR. </font><font size="1"><span style="font-weight: bold; color: rgb(135, 113, 101);"></span></span></a></font></div><p></p></div><font size="1"><span style="font-weight: bold;"></span></font></div></div></td>
<td style="border-left: 3px dotted rgb(50, 50, 49); vertical-align: top;" width="35%"><div width="400" style="padding-right: 15px; padding-left: 15px; padding-bottom: 15px; text-align: justify;"><font size="1"><span style="font-weight: bold; color: rgb(153, 149, 82);">INFORMATIONS ♛</span>
À VENIRfont><br><div style="text-align: center;"><font size="1">

</font><p style="text-align: justify;"><span style="font-weight: bold; color: rgb(135, 113, 101);"></span><font size="1"><font size="1"><span style="font-weight: bold; color: rgb(135, 113, 101);"></span></font><font size="1"><span style="font-weight: bold; color: rgb(153, 149, 82);">ANNONCE DU 27.10.10 ♛</span> À VENIR</font></font></p></div><div style="text-align: center;">

<select onchange="document.location=this.options[this.selectedIndex].value"> <option value="#" selected="selected">TOP PARTENAIRES</option> <option value="LIEN">option 1</option> <option value="LIEN">option 2</option> <option value="LIEN">Option 3</option> <option value="LIEN">Option 4</option> <option value="LIEN">Option 5</option> <option value="LIEN">Option 6</option> <option value="LIEN">Option 7</option> <option value="LIEN">Option 8</option> <option value="Option 9</option> <option value="LIEN">Option 10</option> <option value="LIEN">Option 11</option></select><font size="1"><br><br>

<a href="LIEN"><span style="font-weight: bold;">nos partenaires</span></a><span style="font-weight: bold;"> </span><font size="1">●</font><font size="1"><span style="font-weight: bold;"> <a href="LIEN">devenir ?</a><br></span></font></font></div></div></td></tr></tbody></table></div></div><br><br>

<center><div class="decofiche4"><font face="Times New Roman"> <a href="LIEN">✥ Reglements</a> × <a href="LIEN">Scenario</a> × <a href="Lien">vacants</a> × <a href="LIEN">annonces</a> × <a href="LIEN">invités ✥</a> </font></div>

EDIT 1 : Peut-être cela vient-il du forum lui-même.. Le problème c'est que, j'ai trouvé une meilleure idée de forum RPG donc, j'ai décidé de tout recommencer à zéro & depuis ce temps j'ai quelques difficulté avec le forum en question donc..

https://2img.net/r/ihimizer/img696/2125/31378305.png

Chez moi le code que tu me donnes fonctionne ^^ (mais bug sous Google Chrome au passage) Je pense que cela est du à quelques petits défauts dans ton code (comme des balises ouvertes & fermées mais sans rien à l'intérieur par exemple --')

J'Ai recommencer avec un nouveau forum, gardant tout ce que j'avais déjà et ça ne marche pas... Je ne comprend pas pourquoi avec toi Liliana cela marche. Pourtant je ne suis pas avec Google Chrome...

EDIT 1 : Si je clique sur l'image sa apparait que 1 secondes puis disparait..

Sujet: Re: Faire une infobulle (messages) Sam 08 Jan 2011, 18:27

Moi j'ai un problème, je ne sais pas si il a déjà été résolu, j'avais ne pas avoir eu le courage de lire toutes les pages.
Donc moi, cela fait une transparence dans le fond de l'infobulle et dans toute l'infobulle :/

Sujet: Re: Faire une infobulle (messages) Sam 08 Jan 2011, 18:41

Pour vaalééérie entre autres, ton problème vient du fait que tu n'as pas lu la rectification de ce topic Wink

http://www.css-actif.com/t8017-faire-une-infobulle-ameliorations

Sujet: Re: Faire une infobulle (messages) Sam 08 Jan 2011, 18:56

J'ai fait un aperçu écran, donc voilà, j'espère que ça vous aideras pour m'aider ><'

Spoiler:

https://2img.net/r/ihimizer/i/image7a.png/

Sujet: Re: Faire une infobulle (messages) Dim 09 Jan 2011, 20:13

Bonsoir undisclosed desires

Je peux avoir vos codes css et html svp

Sujet: Re: Faire une infobulle (messages) Lun 10 Jan 2011, 02:10

Alors voilà mon CSS :

Code:: tr.post span.gensmall { display: none; }

.code {
background-color: floralwhite; /* couleur noire du fond */
border:10px tan solid; /* bordure blanche en traits peu épais */
-border-radius: 15px; /* tous les côtés sont arrondis */
-moz-border-radius: 15px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
}

.spoiler{
background-color: floralwhite; /* couleur noire du fond */
border:10px tan solid; /* bordure blanche en traits peu épais */
-border-radius: 15px; /* tous les côtés sont arrondis */
-moz-border-radius: 15px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
}

.quote{
background-color: floralwhite; /* couleur noire du fond */
border:10px tan solid; /* bordure blanche en traits peu épais */
-border-radius: 15px; /* tous les côtés sont arrondis */
-moz-border-radius: 15px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
}

.sousforums{
font-family: georgia;
font-style: italic;
text-align: center;
}

a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
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: 5px; /* on positionne notre infobulle */
left: 15px;

background: floralwhite; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 7px;

/* bordures de votre infobulle*/
border: 2px solid tan;
-moz-border-radius: 8px;
}

.forumlink{
font-family: georgia;
font-size: 20pt;
text-shadow: black 1px 1px 1px;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: lighter;
font-style: italic;
}

.codefond{
background: floralwhite;
opacity: 0.8;
-moz-border-radius: 20px;
color: dimgray;
width: 600px;
border: 5px solid DarkOliveGreen;
}

.titres2{
font-size: 20pt;
line-height: 12pt;
font-family: georgia;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: lighter;
font-style: italic;
}

.a
{
text-decoration: none;
outiline: none;
}
.a:link
{
text-decoration: none;
}
.a:hover
{
text-decoration: none !important;
}

.postbody {
display: block;
padding-left: 20px;
padding-right: 10px;
text-align:justify;
}

.contourdetails{
background: BurlyWood;
border: 3px solid DarkOliveGreen;
-moz-border-radius: 10px;
padding: 10px;
}

.opacite:hover{
opacity: 0.8;}

.titres{
color: burlywood;
font-family: times new roman;
font-size: 17px;
text-shadow: black 1px 1px 1px;
}

.titres:hover{
color: brown;
font-family: times new roman;
font-size: 17px;
text-shadow: black 1px 1px 1px;
}

.contourprofil{
background: BurlyWood;
border: 3px solid DarkOliveGreen;
-moz-border-radius: 10px;
padding: 10px;
}

.contourava{
padding: 2px;}

.pseudocrado{
font-family: times new roman;
text-shadow: black 1px 1px 1px;
font-size: 22px;
font-style: italic;
letter-spacing: -1px;
}

a:hover{
text-decoration: none !important;
}

a{
text-decoration: none !important;
}

Et mon html :

Code:: <div style="background: floralwhite; -moz-border-radius: 20px; opacity: 0.8; color: dimgray; height:600px;"><div align="center"><font size="20" color="#B2B2B2" face="Georgia">DREAMS TO HAARLEM</font></div><br>
<table border=0>
<tr><td align="left" style="VERTICAL-ALIGN: top"><table cellSpacing=1 cellPadding=1 width=300><tr><td align="left"><div align="justify"><center><font face="courier new"><span style="font-size: 15px; line-height: normal"><a href="http://dreams-to-haarlem.forumotion.com/t20-reglement-du-forum" class="postlink" target="_blank">RÈGLEMENT</a> • <a href="http://dreams-to-haarlem.forumotion.com/t3-contexte-dth" class="postlink" target="_blank">CONTEXTE</a> • <a href="http://dreams-to-haarlem.forumotion.com/t3-contexte-dth" class="postlink" target="_blank">GROUPES</a> <br><a href="http://dreams-to-haarlem.forumotion.com/t7-bottin-des-avatars" class="postlink" target="_blank">BOTTIN</a> • <a href="http://dreams-to-haarlem.forumotion.com/f6-scenarii" class="postlink" target="_blank">SCÉNARIOS</a> • <a href="http://dreams-to-haarlem.forumotion.com/f6-scenarii" class="postlink" target="_blank">INVITÉS</a> </span></font></center><div style="border: 5px solid tan; padding: 10px; width: 410px; height: 246px;-moz-border-radius: 10px; background-image: url(http://i55.tinypic.com/o5rey8.jpg);">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><center><div style="overflow: auto; width: 400px; height: 150px;"><div align="justify"><ul>Cette ville est vraiment étrange. Tout ce dont vous rêver, vous arrive vraiment. Étrange. Aucun scientifique n'as réussi à démontrer une preuve que tout ça n'était pas surnaturel, mais chacun d'eux doit bien avouer que ça l'est, bel et bien. Alors que certains deviennent président dans leurs rêves, d'autres se cassent la jambe ou finisse en prison. Simple rêve que chacun fait une nuit. Vous n'avez donc rien compris ? Cette ville, dont vous rêvez, tout ce que vous y faites se répercute sur votre vraie vie. Si vous vous foulez la cheville, votre cheville sera foulée le lendemain matin, si vous devenez milliardaire, vous serez milliardaire le lendemain matin. Encore plus étrange, vous n'êtes pas le seul à rêvez de cette ville, tout les habitants, du monde entier y habitent, c'est comme le monde réel. Vous pouvez y vivre, y acheter un appartement, ou louer une maison. Avoir un accident ou mettre des actions à la bourse, tout comme dans la vraie vie. Étrange, mais pourtant vrai, bienvenue à Haarlem.</ul></div></div></td></tr></table></td>
<td align="left" style="VERTICAL-ALIGN: top"><table cellSpacing=1 cellPadding=1 width=270><tr><td align="left"><div align="justify">
<br><br>
♣ <b>STAFFEMENT GENIAL</b></span></font><br><br><div align="justify"></span></font>
<center><table border="0" width="260"><tr><td align="left"><a href="#" class="infobulle"><img src="http://i54.tinypic.com/5zmwd3.jpg">
<span><div style="padding: 7px;"><div class="titres2">september q. weid</div><br><div><div style="margin:auto; text-align:center; width:100%; width: 200px;"><img src="http://img824.imageshack.us/img824/4876/29656812.png" border="0" alt="" /><br>
ALIAS ; UNDISLOSED DESIRES ♥<div class="titres"><a href="http://dreams-to-haarlem.forumotion.com/u2" target="_blank">Profil</a> • <a href="http://dreams-to-haarlem.forumotion.com/privmsg?mode=post&u=2" target="_blank">MP</a></div></div></div></div></span></a> <a href="#" class="infobulle"><img src="http://i56.tinypic.com/k55wgk.jpg">
<span><div style="padding: 7px;"><div class="titres2"><center>m. gaël <br> wanterwood </center></div><br><div><div style="margin:auto;text-align:center;width:100%"><img src="http://i51.tinypic.com/2qjlumg.png" border="0" alt="" /><br>
Alias ; Loow ♥<div class="titres"><a href="http://dreams-to-haarlem.forumotion.com/u3" target="_blank">Profil</a> • <a href="http://dreams-to-haarlem.forumotion.com/privmsg?mode=post&u=3" target="_blank">MP</a></div></div></div></div></span></a><div align="justify"><span style="font-size: 9px; line-height: normal">
<br><a href="lien profil"><img src="IMG"></a> <a href="lien profil"><img src="IMG"></a><div align="justify"><span style="font-size: 9px; line-height: normal"><center><i>September Q. Weid ♥ M. Gaël Wanterwood</i>

<br><br></center>
</span></div></tr></td></table></center>
<br><br>
♣ <b>PARTENARIAT</b><br><br>
<center><br>
<img src="BOUTTON 1"> <img src="BOUTON 2g">
<br><form name="lolipop" method="POST">
<SELECT name="wxlmenu" style="BORDER-RIGHT: double; BORDER-TOP: double; FONT-SIZE: 10px; BACKGROUND: #eeeeee; BORDER-LEFT: double; COLOR: #C0C0C0; BORDER-BOTTOM: double; FONT-FAMILY: georgia" size=1 name=wxlmenu> <option value="U.C">ELITE AFFILIATES</option>
<option value="http">ELITE AFFILIATES 1</option>
<option value="http">ELITE AFFILIATES 2</option>
<option value="http">ELITE AFFILIATES 3</option>
<option value="UC">YOU ?</option></SELECT> <INPUT style="BORDER-RIGHT: double; BORDER-TOP: double; FONT-SIZE: 12px; BACKGROUND: #eeeeee; BORDER-LEFT: double; COLOR: #C0C0C0; BORDER-BOTTOM: double; FONT-FAMILY: verdana" onclick="location =
document.lolipop.wxlmenu.options
[document.lolipop.wxlmenu.selectedIndex].value;" type=button value="Go"></form></td></tr></tbody></table></ul>

</table></table></div>

Merci de ne pas prendre mes codes, j'ai travailler dur :p

Sujet: Re: Faire une infobulle (messages) Lun 10 Jan 2011, 04:59

Salut!

Ce que tu cherches à faire avec opacity ne peut pas marcher... Cette propriété s'hérite et se limite à des valeurs entre 0 et 1.

En clair, si tu fais une div-transparente à 50% (ou 0.5), avec une div-opaque à l'intérieur en lui donnant 100% (ou 1), cette dernière sera à 100% de 50%, autrement dit à 50%. Si à div-opaque tu donnes 50% (0.5), elle sera à 50% de 50% soit 25% de visibilité.

Il n'y a pas de réelles solutions à l'heure actuelle en utilisant opacity... En tout cas, pour des images, etc. Par contre, si tu veux faire du transparent sur de la couleur, tu peux utiliser rgba, une propriété css3 qui ne fonctionnera pas sous IE8.

Code:: .mon-txt-bleu-transparent{
color: rgba(0, 0, 255, 0.5);
}

Kiwi

Faire une infobulle (messages)

Faire une infobulle (messages)

Sujets similaires

Sujets similaires

Partenaires Or