Infobulle pour les sujets de forum

[J-CHamel]

Rappel du premier message :

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!

[J-CHamel]

Up!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!
Ce sujet est toujours d'actualité.

[J-CHamel]

Up!
Sujet toujours d'actualité!

[J-CHamel]

UP!

[J-CHamel]

Sujet toujours d'actualité!

[J-CHamel]

UP!

[J-CHamel]

Sujet toujours d'actualité!

[J-CHamel]

UP!

[J-CHamel]

UP!

[J-CHamel]

UP!

[MlleAlys]

tu ne peux pas, au lieu d'applique le lien de l'infobulle à un image, l'appliquer directement à ton texte ? ^^"
comme ça par exemple :

le code css d'une infobulle parmi d'autres :

Code:

/*INFOBULLE*/
a.infobulle{
    position: relative;
    padding:7px;
}
a.infobulle span {
    display: none;
}
a.infobulle:hover {
    background: none repeat scroll 0 0 transparent;
    z-index: 9999;
}
a.infobulle:hover span { /*apparence de l'Infobulle*/
    -moz-border-radius: 10px 10px 10px 10px; /*contours arrondis*/
    background-color: #EBEBEB; /*arrière plan*/
    border: 1px solid #000000; /*contours solid couleur */
    color: #000000; /*couleur de texte*/
    display: inline; /*pas toucher*/
    left: 22px; /*espace gauche par rapport au texte survolé*/
    top: -50px;/*espace haut par rapport au texte survolé*/
    bottom: 0px; /*espace bas par rapport au texte survolé*/
    right : 0px; /*espace droit par rapport a au texte survolé*/
    width: 100px /*largeur de l'infobulle*/
    heigth: 100px; /*hauteur de l'infobulle*/
    padding: 3px; /*espace a l'intérieur de la bulle par rapport aux bordures*/
    position: absolute; /*pas toucher*/
    text-align:center; /*alignement du texte dans l'infobulle*/
}
/*fin*/

le code html :

Code:

<a class="infobulle">TON TEXTE SURVOLé<span>LE TEXTE DE TON INFOBULLE</span></a>

[J-CHamel]

Salut MlleAlys,
Pourrais-tu m'expliquer qu'est-ce que je ne peux pas au juste?
Merci de te préoccuper de ce sujet!

Cordialement!
J-C

[J-CHamel]

Sujet toujours d'actualité!

[MlleAlys]

Si, normalement tu peux justement : les balises de l'infobulle, si elle est appliquée à une image, sont de part et d'autre de cette image. Si tu veux l'appliquer à un texte, il suffit de mettre les balises de l'infobulle de part et d'autre de ce texte, comme l'exemple posté juste avant.

[J-CHamel]

Bonjour MlleAlys,
En fait, j'ai deux problèmes relié aux infobulles. Le premier, étant que je ne vois plus les infobulles et idem pour nickylarson. Mystère.
Voici le lien de mon forum:http://zone.1fr1.net/

Bonsoir je rejoins mon ami selas.

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

selas a écrit:Re,

Voici le code:

Code: Sélectionner le contenu


<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+

Ensuite, 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:



Voici le HTML de mon PA:

Code:

<table>
        <tr>
        <td><div class="lock"><a href="http://zone.1fr1.net/t4-regles-d-utilisations-des-forums"><img src="http://i34.servimg.com/u/f34/15/04/69/53/reglem10.png"></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 le CSS:

Code:

Infobulle Règlements
        .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: 568px;
            left: 505px;
          /* style du bloc qui apparait */
          border: 2px outset #0165fb;
          border-radius: 5px;
          background-color: transparent;
          -moz-border-radius: 5px;
          text-align: center;
            visibility: visible;
        }
        .lock:hover .lock-hidden {
          display: block;
        }


Comment faire s.v.p?
Cordialement!

[MlleAlys]

waaah ! Oui pardon, comme le premier message est répété en haut de cette page, je n'avais vu la page précédente !! je suis désolée, ma réponse est donc dépassée =S

heu...
est-ce possible d'avoir un lien pour voir directement le(s) problème(s) ?

[J-CHamel]

UP!

[MadDev]

Bonjour

il me semble qu'il y ait un problème avec les codes

il faut plutôt essayer de mettre le html de cette façon :

Code:

<div class="lock"><a href="http://zone.1fr1.net/t4-regles-d-utilisations-des-forums"><img src="http://i34.servimg.com/u/f34/15/04/69/53/reglem10.png"></a><span><center><font color="white">"RÈGLEMENTS"</font><br><font color="white">"Quelques règles sont à respecter sur un tel forum."</font></center></span></div></td><td>

et essayer ce css :

Code:

div.lock
{
position: relative;
color: #000000;
text-decoration: none;

}

div.lock span
{
display: none;
width: 100px;
}

div.lock:hover
{
background: none;
z-index: 999;
cursor: defaut;

}

div.lock:hover span
{
display: inline;
position: absolute;
white-space: nowrap;
top: 10px;
padding: 5px;
width: 50px;
}


modifier le css comme désiré

bonjour votre problème a t il été résolu ? si c'est le cas merci d'éditer votre message en cliquant sur et mettre l'icone .

[J-CHamel]

Bonjour/bonsoir Lady Oscar!
Merci beaucoup pour ces rectifications!
Ça fonctionne ENFIN!
Je vais donc mettre mon sujet comme résolu grâce à ton intervention
Un gros MERCI!

J-C