Infobulle pour les sujets de forum

[J-CHamel]

Bonjour/bonsoir !

J'aimerais avoir votre aide pour la réalisation de plusieurs infobulles concernant les sujets de forum,
plutôt que d'avoir à écrire une description dans les cases. Comme par exemple: règlements, infos, présentation, etc.
J'ai regardé dans les sujets concernant les infobulles pour avoir les codes ainsi que la marche à suivre, mais les infobulles
demandées étaient pour des images, non pas pour des sujets de forum.

Cordialement!

[selas]

Bonjour,

Et bien à la place d'une image vous entrez un texte.
Surement entre la balise suivante: <p> ton texte </p> . Et pour les sauts de lignes utilise la balise <br> .

Je ne suis pas sur sur mais vous pouvez toujours essayé.

Ou au pire donnez nous le code du tuto.

Bonne journée.

[selas]

Bonjour,

Et bien à la place d'une image vous entrez un texte.
Surement entre la balise suivante: <p> ton texte </p> . Et pour les sauts de lignes utilise la balise <br> .

Je ne suis pas sur sur mais vous pouvez toujours essayé.

Ou au pire donnez nous le code du tuto.

Bonne journée.

Edit: Oulala désolé mais sa à posté deux fois.

[J-CHamel]

Bonsoir selas!

Voici le lien du code du tuto: https://forum.forumactif.com/t284982-infobulle-boite-de-dialogue?highlight=infobulle

En fait, c'est la réponse (en vert) de Lixyr.

Mon problème c'est que j'ai de la difficulté à savoir où mettre ces fameux codes. Exemple:

Ensuite, tu vas dans la partie où tu veux que ton info bulle apparaisse.

Et tu rentres ce code :

Code: Sélectionner le contenu

1. <table>
   
2. <tr>
   
3. <td><div class="lock">CE QU'IL FAUT PASSER AVEC LA SOURIS<div class="lock-hidden">CE QUI APPARAIT
   
4. </div></div>
   
5. </td>
   
6. </tr>
   
7. </table>
   

J'ai aucune idée de qu'elle partie elle (Lixyr) fait référence.

À+

[J-CHamel]

UP!

[selas]

Bonjour,

Code:


<table>
<tr>
<td><div class="lock">Ici une petite image ou un texte qui dit de passé la souris pour voir l'infobulle<div class="lock-hidden">ici ton texte blablablalblalblalblalbllblalballbalalblaalb pour faire un retour a la ligne utilise cette balise <br> ton blalbalblalblalbl&aalalballbalblababl
</div></div>
</td>
</tr>
</table>


Vous copiez le code dans la description d'un forum ou d'une catégorie par exemple.

A+

[J-CHamel]

Bonsoir selas!

Merci pour le code!
Je vais tester ça sur le champs et je te redonne des nouvelles.

À+

[J-CHamel]

Re:bonsoir selas,

Désolé mais ça ne fonctionne pas. En plus, je ne vois pas de ‘‘hover’’ dans ton code, pourquoi? J'ai insérer le code dans le forum ‘‘Règlements’’ et voici ce que ça donne avec mon texte:
<table>
<tr>
<td><div class="lock">Passez la souris pour voir l'infobulle<div class="lock-hidden">Quelques règles sont à respecter sur un tel forum.<br> À consulter au moins une fois !
</div></div>
</td>
</tr>
</table>

[selas]

Re chamel,

Alors je viens de faire un test sur mon forumtest et le code marche très bien.

Avez vous pris en compte le code CSS du tuto?? celui-ci :

Code:


.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 1px;
  padding-right : 1px;
  padding-top  : 1px;
  padding-bottom : 1px;
    top: 45px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 2px outset #BECCCC;
  border-radius: 5px;
  background-color: transparent;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
}
.lock:hover .lock-hidden {
  display: block;
}


A copier dans votre feuille de style.

Et par la suite vous copiez votre code html pour l'infobulle dans "la description d'une catégorie ou d'un forum" et le tours est joué.

Selas

[nickylarson]

bonsoir

tout fonctionne très bien

vous avez oublier la feuille css a modifier

ma question est la suivante mon écriture ne se voit pas dans l'info bulle ??

comment lui changer sa couleur

bonne nuit a toutes et a tous

mon nouveau forum : http://linux.lebonforum.com/

dans la partis présentation

[selas]

Re,

Euh non c'est pas un n'oublie de modifications du css mais un n'oublie du css puisque l'infobulle ne s'affichais pas chez chamel.

Par-contre la j'ai bien peur de ne pas comprendre.

??? Chamel = nickylarson ???

Si c'est pas le cas, merci de posté un nouveau sujet pour ta demande.

Selas

[J-CHamel]

Re bonsoir selas,

CooL, ça fonctionne! Un gros MERCI selas! Par contre, juste un petit détail, le nom (ou titre) de mon 1er forum est ‘‘Règlements’’. Donc, quand j'inscris dans le code Règlements ( une deuxième fois), je me retrouve avec 2 Règlement dans la case.
Regarde:



Par contre, je voudrais que ce sois le nom du forum (le premier Règlements) qui soit pris en compte. Voici le code:
<table>
<tr>
<td><div class="lock">Règlements<div class="lock-hidden">Quelques règles sont à respecter sur un tel forum.<br> <br><span style="font-style: italic;" class="genmed"><span class="genmed">À consulter au moins une fois !</span></span><br>
</div></div>
</td>
</tr>
</table>
Encore MERCI, et À+

[selas]

Re,

Alors je viens de faire un test sur mon forum. Nous ne pouvons pas inséré un aussi long code dans le nom de la catégorie/forum.
Bien sur on laisse le code de l'infobulle dans la description.
Alors ce qu'il faut faire maintenant c'est de remplacer le nom de la catégorie ou du forum par:

Code:


"nbsp;


ATTENTION remplace le " par &, désolé mais si je l'affiche tel quel il ne s'affichera pas, c'est un espace en HTML .


Et maintenant tu n'a que 1 règlement qui s'affiche, certes pas forcément au bon endroit mais bon

A +

[J-CHamel]

Bonjour selas,

Un gros MERCI, ça fonctionne! Par contre, c'est vraiment dommage que ce ne sois pas le bon Règlements qui demeure. Avant de terminer, j'aimerais savoir si je peux modifier ou embellir se Règlement? Exemple: si je peux le mettre en GRAS, en BLANC, etc...et aussi, si je peux remplacer le mot par une image? Car j'ai tenté l'expérience mais voici ce que j'avais:


au lieu de l'image. Merci à l’avance!

À+

[selas]

Re,

Oui, c'est le seul emplacement disponible, puisque le titre ne peu dépassé un certain nombre de lettre et dans le code il y en a pas-mal XD.
Bien-sur que vous pouvez remplacé le mot par une image, replacez MonLien par le votre:

Code:


[img]MonLien[/img]


Par-contre chez moi il est tard 2h du matin fuuu, je vais me couché, je répondrais aux restes demain.

A+

[J-CHamel]

Un gros MERCI selas!

Vraiment CooL avec toi !
Je vais sur le champs m'amuser avec les images pour voir le résultat.

N.B. Comment je fais pour insérer un lien à cette image et est-ce possible?
Bonne nuit et À+
Je l'espère!

[nickylarson]

bonsoir

et merci j'ai posté ailleurs désolé

bon weekend

[J-CHamel]

Un gros MERCI selas!

Vraiment CooL avec toi !
Je vais sur le champs m'amuser avec les images pour voir le résultat.

N.B. Comment je fais pour insérer un lien à cette image et est-ce possible?
Bonne nuit et À+
Je l'espère!

[selas]

Re,

Pas de problème, c'est un plaisir d'aidés les gens.

Oui c'est possible, voici le code:

Code:


<a href="http://www.zozor.com/"><img src="http://cdn1.iconfinder.com/data/icons/Color%20me_dock%20icons/Night/Adobe%20Premiere.png"></a>


Il te reste a remplcé: http://www.zozor.com/ par ton lien
et
http://cdn1.iconfinder.com/data/icons/Color%20me_dock%20icons/Night/Adobe%20Premiere.png par le lien de ton image

Et voila ton image redirige sur un lien

A+

[J-CHamel]

Bonsoir selas!

Oufff! J'ai beau chercher mais là...je n'y arrive pas . Je ne sais pas comment l'intégrer dans le code:

<table>
<tr>
<td><div class="lock"><img src="https://i.servimg.com/u/f36/17/26/87/42/reglem10.png"border="0"alt=""/><div class="lock-hidden"><font color="white">"RÈGLEMENTS"</font><br><font color="white">"Quelques règles sont à respecter sur un tel forum."</font><br><span style="font-style: italic;" class="genmed"><span class="genmed"><font color="blue">À consulter au moins une fois !</font></span></span><br>
</div></div>
</td>
</tr>
</table>

Pourrais-tu me montrer s.v.p?
Merci!

[selas]

Re,

Voici le code:

Code:


<table>
<tr>
<td><div class="lock"><a href="TONLIENICI"><img src="TONIMAGEICI"></a><div class="lock-hidden"><font color="white">"RÈGLEMENTS"</font><br><font color="white">"Quelques règles sont à respecter sur un tel forum."</font><br><span style="font-style: italic;" class="genmed"><span class="genmed"><font color="blue">À consulter au moins une fois !</font></span></span><br>
</div></div>
</td>
</tr>
</table>


Et voila ton image redirige la ou tu veux et affiche l'infobulle au passage

PS: C'est bizarre mais je ne vois pas le résultat sur le forum de votre profil.

A+

[J-CHamel]

Re bonsoir selas!

Parfait!!! Un gros MERCI selas!
Maintenant,avant de d'éditer se message, pourrais-tu (si possible) jeter un œil à mon autre sujet
(Liste déroulante dans un widget) des fois que?

Cordialement
J-C

[J-CHamel]

Bonjour selas!

En fait non, j'ai encore un petit problème désolé!
J'ai tenté de faire un deuxième sujet de forum (celui-ci se nomme Infos). Tout allait bien jusqu'à ce que je remarque que je ne peu ajuster la box de l'infobulle (qui est dans le CSS) qui prend le même emplacement que la première (Règlements), sauf le texte à l'intérieur qui appartient à Infos.

Exemple:



Comment faire s.v.p?
Cordialement!
J-C

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[nickylarson]

Bonsoir je rejoins mon ami selas.

On ne voit pas le résultat sur ton forum ???

Re,

Voici le code:

Code:


<table>
<tr>
<td><div class="lock"><a href="TONLIENICI"><img src="TONIMAGEICI"></a><div class="lock-hidden"><font color="white">"RÈGLEMENTS"</font><br><font color="white">"Quelques règles sont à respecter sur un tel forum."</font><br><span style="font-style: italic;" class="genmed"><span class="genmed"><font color="blue">À consulter au moins une fois !</font></span></span><br>
</div></div>
</td>
</tr>
</table>


Et voila ton image redirige la ou tu veux et affiche l'infobulle au passage

PS: C'est bizarre mais je ne vois pas le résultat sur le forum de votre profil.

A+

Bonne soiree

[J-CHamel]

Salut nickylarson!

Je ne comprends pas la fin de ton PS ‘‘le forum de votre profil’’ mais bon, ce n'est pas très grave. Si tu relis mon dernier post, je pense que tu devrais comprendre un peu mieux mon problème.

Je ne peu ajuster la box de l'infobulle Infos (qui est dans le CSS) qui prend
le même emplacement que la première (Règlements), sauf le texte à
l'intérieur qui appartient à Infos.

Cordialement!
J-C

[J-CHamel]

UP!