bien le bonjour/bonsoir/bonne nuit/bonne année. *paf*
donc, après des heures de recherches et d'arrachage de cheveux, j'en suis venue au point de vous quémander un peu d'aide. (à) j'ai en effet quelques soucis avec le codage de mon profil pour un forum qui va bientôt ouvrir ses portes (ici). je m'explique : comme vous pourrez le constater en cliquant ici et en jouant avec la feuille de personnage, le bouton en forme de clé s'actionne parfaitement pour ouvrir cette fameuse feuille, mais refuse de se fermer par la suite. assez embêtant, ça me branche moyen de me retrouver avec toutes les feuilles de perso ouvertes lorsque je voudrais en regarder une. aussi, voilà mon template viewtopic_body (sous balises hide les enfants), est-ce que vous voyez ce qui pourrait clocher ? j'avoue que j'ai beau le regarder maintes fois, je vois pas (peut-être aussi parce que j'ai bossé dessus toute la nuit &. que j'en peux plus *paf) ;



à savoir que mes templates sont très très modifiés
hm je ne pense pas que mon css soit indispensable ici non ? à moins que ce soit lui qui déconne. dans ce cas je le mettrais si vous jugez en avoir besoin pour m'aider.

après, j'aurais une deuxième petite question : est-il possible de mettre la fameuse feuille de personnage dans une infobulle qui se déclenche lorsqu'on passe la souris sur le bouton ? (ici la clé donc) il me semble l'avoir déjà vu mais je suis plus sûre.

en tout cas, merci d'avance à tous ceux qui tenteront de me venir en aide, je vous vénère.

oops, honte sur moi, j'oublie tout le temps le statut de maintenance. le voilà enlevé, désolé.

Tu veux plutôt l'infobulle au passage de la souris? ou bien qu'on t'aide à fermer? Ou les deux en même temps?

Parce que si tu préfères une infobulle, inutile qu'on t'aide à refermer au click! Il te suffira d'enlever ça et mettre l'infobulle à la place! xD

en fait, j'aimerais beaucoup résoudre ces deux soucis. pour apprendre à le faire seule la prochaine fois dans un premier temps et parce que ça me titille. xD je cherche depuis des jours comment fermer cette feuille donc voilà (à) mais c'est vrai que oui, inutile de fermer si c'est pour mettre une infobulle, je m'en doute, c'est simplement pour apprendre. ahem, je m'embrouille là. donc si c'est possible, j'aimerais énormément savoir faire les deux.

Alors je suis assez mauvaise en javascript, donc je préfère ne t'aider pour ça qu'en dernier recours, mais je suppose que les tutoriel pour la chatbox latérale pourraient t'aider. Je pense que ce serait plus ou moins le même principe (mais là encor,e je peux me tromper)

Pour l'infobulle, quant à elle, c'est plutôt simple.
Je te donne ce code simple:

Code:

<div class="MA_CLASSE">ICI_CE_QUI_SERA_VISIBLE<div>CE_QUI_DEVRA_S'AFFICHER_LORS_DU_HOVER</div></div>

et son CSS:

Code:

div.MA_CLASSE {
  /*Tu mets ici toutes les propriétés de ton image/ton div visible de base. Par exemple centrer, etc.*/
}

div.MA_CLASSE div {
  display: none; /*Cela veut dire que lorsque la souris n'est pas sur l'image, l'infobulle ne s'affiche pas.*/
}

div.lastmess2:hover {
 /*Correction d'un bug.*/
  background: none;
  z-index: 999;
}

div.lastmess2:hover div {
  display: inline;
  width: A_DEFINIRpx;
  text-align: A_DEFINIR;

/*Début du positionnement de l'infobulle sur la page.*/
  position: REMPLACER ICI;
  top: A_DEFINIRpx;
  left: A_DEFINIRpx;
/*Fin du positionnement*/

  background: #A_DEFINIR;
  color: #A_DEFINIR;

/*Ajoute tout ce que tu veux comme autres chose spour ton infobulle. Tu peux aussi retirer certaines des propriétés que j'ai mise plus haut, sauf le display!*/
}

Le div peut être remplacer par un span, mais personnellement, je préfère utiliser des div.

J'espère que cela va t'aider, même si qu'un peu! ^^

Ton forum nous est plus accessible, car à nouveau en maintenance, il serait bien de nous laisser accès tant que nous n'avons pas résolu ton problème!.

bonjour.
déjà merci de ton explication, j'ai enfin réussi à placer mon infobulle au bon endroit. *danse de la joie* toutefois oui, y'a toujours un problème avec moi *paf*, cette infobulle se déclenche par un click de la souris et non au simple passage de celle ci : http://deadlydisaster.frbb.net/t47-f-w-holland-o-cest-pas-de-ma-faute-si-je-suis-une-grosse-vache-charismatique-avec-une-grande-gueule-et-un-cul-de-mammouth?tt=1

j'ai ici mon bout de template qui correspond à la feuille RPG :


je suppose qu'il faut que j'enlève quelque chose, ou que je remplace par une autre valeur ou quoi, mais je sais pas quoi .____.
&& je suis vraiment désolée pour le statut de maintenance à chaque fois, je pense que c'est l'une des autres admins qui doit la remettre à chaque fois, j'vais leur demander de pas toucher. xD (à) en tout cas merci de ton aide !

C'est parce que tu as laissé le javascript qui te permettait d'ouvrir la partie de la feuille de personnage au click (et que tu n'arrivais pas à faire refermer!

Code:

onClick="this.firstChild.src=(this.firstChild.src==' http://img11.hostingpics.net/pics/97366920cl.png ')?' http://img11.hostingpics.net/pics/97366920cl.png ':' http://img11.hostingpics.net/pics/97366920cl.png ';this.lastChild.style.display=(this.firstChild.src==' http://img11.hostingpics.net/pics/97366920cl.png ')?'none':'block';"

Tu vois, le premier mot est "onClick, ce qui signifie "au click de la souris"!

Cette partie est du javascript, et donc à enlever! Voici donc le code à mettre:

Code:

<div class="bulle">
   <div style="text-align: center; padding: 3px;">
      <img src=" http://img11.hostingpics.net/pics/97366920cl.png "/>
      <div style="display: none; text-align: left;">
         <span style="white-space:nowrap;">
            <div>{postrow.displayed.POSTER_RPG}</div>
         </span>
      </div>
   </div>
</div>

décidément, je crois que j'ai la poisse. .______. malgré le code que tu m'as donné, cette fois l'infobulle ne s'affiche absolument pas. l'image est bien là, mais la feuille RPG reste invisible

Pourrais-tu me donner ton CSS et le HTML correspondant?

j'vais carrément filer tout le template &. le CSS qui m'a servi à coder tout le profil.

template viewtopic_body:


CSS:


peut-être que j'ai glissé des erreurs dans mon templates &. mon css qui font que l'infobulle déconne. .____. si c'est le cas je m'en excuse et te remercie de m'accorder un peu de ton temps.

C'est rien, je suis là pour ça, moi! ^^
Ah, je sais d'où vient le problème!
Dans ton template, tu as mis:

Code:

<div style="display: none; text-align: left;">
    <span style="white-space:nowrap;">
            <span>{postrow.displayed.POSTER_RPG}</span>
    </span>
</div>

Sais-tu ce que tu dis à ton navigateur, lorsque tu mets à ton div: "display: none" ? Eh boien tu lui dis "En toute occasion, n'affiche pas ce div. Il doit toujours rester invisible.". Or toi, ce que tu voudrais, c'est que lors du :hover, le div devienne visible!

Il faudrait donc ajouter à ton CSS:

Code:

.bulle:hover div {
  display: inline;
}

Si ça ne marche pas, retire de ton template le "display: none" et mets ceci dans ton CSS:

Code:

.bulle div {
  display: none;
}

.bulle:hover div {
  display: inline;
}

Cela devrait régler le problème. Cependant, je ne sais pas encore ce que cela va faire par rapport à ton "animation" lors de l'ouverture/fermeture!

j'ai essayé tes deux propositions et au résultat la première n'affiche toujours pas l'infobulle et l'image se décale à gauche au passage de la souris, tandis que la deuxième fait carrément tout disparaître, je n'ai même plus d'image .____.

Hum, hum hum... Je teste sur mon forum teste juste pour voir, et je reviens vers toi ><
Je t'enverrais un message par MP si je fais un edit!

Edit: Ah bah voilà, le problème est évident!
En fait, à l'intérieur de ton span "bulle" tu as deux div. Ce qui fait que le premier code que je t'ai donné dit: "tout div se trouvant dans bulle soit être inline", donc le décalage à droite. Dans le second code, je dis "Tous les div dans bulle doivent ne pas être affichés, puis au passage de la souris sur bulle, douvent d'afficher". Du coup, tout disparaît!

Code:

<span class="bulle">
  <div style="text-align: center; padding: 3px;">
      <img src=" http://img11.hostingpics.net/pics/97366920cl.png "/>
      <div class="interne" style="display: none; text-align: left;">
        <span style="white-space:nowrap;">
            <span>{postrow.displayed.POSTER_RPG}</span>
        </span>
      </div>
  </div>
</span>

Après plusieurs tests également, c'est le transform qui fait tout bugger: dès qu'il apparait dans le CSS, plus rien ne s'affiche! Donc, j'ai préféré l'enlever. Je ne sais pas du tout comment tu as fait cette transformation, envoie-moi un lien vers le tuto (si tu en as suivi un), pour que je puisse regarder ça, et voir si tu as fait quelque chose de faut par rapport au tutoriel, pour te permettre de garder cette transformation.

Sinon, j'ai un peu nettoyé ton code, je l'ai épuré, et j'ai refait la partie CSS. Je te donne tout:
CSS:

Code:

/*======INFOBULLES======*/
div.bulle {
  text-align: center;
  padding: 3px;
  color:#525252;
  line-height: 95%;
  text-decoration:none;
  /*border-radius*/
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

div.bulle div {
  display: none; /*Cela veut dire que lorsque la souris n'est pas sur l'image, l'infobulle ne s'affiche pas.*/
}

div.bulle:hover {
 /*Correction d'un bug.*/
  background: none;
  z-index: 999;
}

div.bulle:hover div {
  display: inline;
  width: 130px;
  text-align: left;
  white-space:nowrap;
/*Début du positionnement de l'infobulle sur la page.*/
  position:absolute;
  padding:15px;
  margin-top:10px;
  margin-left:35px;
/*Fin du positionnement*/
  background-color: #242424;
  border-left: 6px double #413A46;
  opacity:1;
/*border-radius*/
-webkit-border-radius:10px;
  -moz-border-radius:10px;
        border-radius:10px;
/*box-shadow*/
-webkit-box-shadow:#000000 0px 0px 3px;
  -moz-box-shadow:#000000 0px 0px 3px;
        box-shadow:#000000 0px 0px 3px;
}
/*======FIN INFOBULLE======*/

Et la partie HTML que j'ai modifiée:

Code:

    <div class="bulle">
      <img src=" http://img11.hostingpics.net/pics/97366920cl.png "/>
      <div> <span>{postrow.displayed.POSTER_RPG}</span></div>
    </div>

merci beaucoup
mon autre admin me dit qu'elle elle voit la feuille RPG en cliquant dessus mais moi elle n'apparaît pas, c'est bizarre... et je sais pas, ça te fait pareil à toi sur le topic donné plus haut ? .___.

Non, moi non plus, même en cliquant je vois pas. Elle a quoi comme navigateur?

Ah, pis j'ai édité xD

HIYAAAAAAAAAAAAAAA.
merci énormément, cette fois ça fonctionne. ** hm je crois qu'elle a firefox, donc je comprends pas pourquoi chez elle ça fonctionnait et pas chez nous. xD et puis pour le tuto, c'est un copain codeur qui m'a appris vite fait sur le tas, il m'a dit "tu ajoutes ça ça ça et ça passe" - du coup ça passait, jusqu'à aurjoud'hui. xD encore merci pour le temps que tu m'as accordée, je te vénère.

c'est avec joie que je crie que mon problème est réglé et qu'on peut archiver
merciiiiiiiiiiiiiiiiii.

Hello !
Puisque le problème est résolu, je déplace le sujet (:
N'hésite pas si tu as d'autres questions =D