Sujets similaires

Sujet: aide infobulle Sam 19 Jan 2013, 06:35

bonjour, je suis a la recherche d'un tuto qui marche pour une infobulles.
Exemple : http://poudnoir.forumgratuit.be/
Quand vous avez ouvert se site, il ya un entête. il y'a 4 petit image avec 0 point en dessous. ls 0 point, je voudrais que il viennnent en infobulles, quand je survole une des images, que sa se montre. merci de l'aide

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:37

Bonjour,
tu t'es trompé.
Prend ce code:

Code:: a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}

a.info:hover{
z-index:25;
background-color:#FFF
}

a.info span{
display: none
}

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}

Et tu mets dans le CSS.

Et ça:

Code:: <a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a>

Dans ta PA.

Cordialement.

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:40

Merci pour la premiere aide, elle marche un peu, sa doit juste se mettre la ou ya les 4 petite image :s

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:40

Bonjour,

la fonction " rechercher " peut vous éviter de poster une demande d'aide pour un sujet beaucoup traité sur CSSActif.

Voici par exemple un résultat pour la recherche " infobulle " :

http://www.css-actif.com/t12680-infobulle-avec-effets-css3?highlight=infobulle

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:42

je l'ai deja lu, lien n'a pas marché

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:42

Re,

Je peux avoir le code de ta PA s'il te plaît ?

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:47

Code:: <table>

</table>

<table>
<tr>
<td>
<div class="titre titre-welcome">
W<br />E<br />L<br />C<br />O<br />M<br />E
</div>
</td>

<td>
<div class="block block-welcome">
Contexte :
La guerre est passée , Harry Potter a vaincu Voldemort. le professeur McGonagall reprît Poudlard. Les sorciers reprirent une vie paisible. Pendant 15 ans ce fut l'âge d'Or.

Pendant ce temps , un petit groupe de sorcier se forma,un Ordre du Nom de La Salamendre avec à sa tête un Mage Noire du nom de Azard accompagnée de son assistance Shéila . Ils avaient de grandes ambitions. Descendants d'ancien mangemorts il reprirent les ambitions du Seigneur des Ténèbres et réunirent des fidèles.
Au bout de quelques temps , Le professeur McGonagal , ,Harry Potter et d'autres grands noms de la bataille finale se firent assassiner. Cela rejeta sur la communauté sorcière une vague d'angoisse.
C'est alors que Théo.F.Lockart fît son retour à Poudlard pour occupé le Poste de Directeur. Il n'était nul autre que le petit-fils d'Albus Dumbledore. Il avait pour réputation d'être courageux et il était extrêmement rusé. Mais il n'était pas venu seul, il était venu avec ses amis d'enfances. Ensemble, ils rebâtissais l'école et se battais.
Cette fois qui gagnera ? Combien de vies seront sacrifiés ? Quel sera le prix à payer ?
</div>
</td>

<td>
<div class="block block-staff">
<h1 class="titre titre-staff">L'equipe du Forum</h1>

<table>
<tr>
<td>
<div class="thumbnail">
<img src="http://media.zoom-cinema.fr/photos/news/4370/_thumbs/leonardo-dicaprio_jpg_90x90_crop_upscale_q95.jpg" />
<div>
Théo.F.Lockart.<br /><br /><a href="http://poudnoir.forumgratuit.be/privmsg?mode=post&u=1">Mp</a> & <a href="http://poudnoir.forumgratuit.be/u1">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>
</tr>
</table>

<a href="LIEN_DU_SUJET_STAFF" class="tstaff">Tout le staff ?</a>
</div>
</td>
</tr>
</table>

<table>
<tr>
<td>
<div class="block block-Portoloins.">
<h1 class="titre">Portoloins.</h1>
<font color="yellow">*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/f3-presentation-des-eleves?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des élèves.</a></span>
*
*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/t3-fiche-de-presentation-des-adultes-obligatoire?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des adultes.</a></span>
*
*<span style="font-size: 50px; line-height: normal"></span><a href="http://poudnoir.forumgratuit.be/t4-reglement-de-poudnoir?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Règlement</a>*</font>
<br />
</div>
</td>

<td>
<div class="block block-nouveautes">
<h1 class="titre">Nouveautes</h1>

<div>
11/ 01/13 ~> Création de Poudnoir.<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
</div>
</div>
</td>

<td>
<div class="block block-credits">
<h1 class="titre">Coupe des 4 maisons:</h1>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/griffy10.png" border="0" alt="" /> <font color="red">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/pouffy11.png" border="0" alt="" /><font color="yellow">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serdai10.png" border="0" alt="" /> <font color="blue">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /> <font color="green">0</font>
Pour gagnez des points, faîtes vos devoirs.
</div>

</div>
</div>
</td>
</tr>
</table>

voila

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:51

Coucou,

Alors voilà tu as ceci dans ton code :

Code:: <img src="http://i34.servimg.com/u/f34/17/74/87/49/griffy10.png" border="0" alt="" /> <font color="red">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/pouffy11.png" border="0" alt="" /><font color="yellow">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serdai10.png" border="0" alt="" /> <font color="blue">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /> <font color="green">0</font>

C'est assez simple. Dans le code de Marion tu as ça :

Code:: <a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a>

La partie "texte du lien", tu mettras la balise img dedans. La partie "Votre texte de l'infobulle" tu mettras le font avec tes points. Ce qui donne quelque chose du genre :

Code:: <a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /><span> <font color="green">0</font></span></a>

Une petite recherche de ta part et je suis sûre que tu y serais parvenu. Wink

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:57

Et faut pas rajoué un truc styl (img) quand je met mon image ?

Sujet: Re: aide infobulle Sam 19 Jan 2013, 06:59

Donne ta Pa modifié (avec les modif's de Melone).

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:01

Non. Tu modifie comme je t'ai dit et tu ajoutes ceci dans ton css (P.A > Affichage > Couleur > Feuille de style CSS) :

Code:: a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}

a.info:hover{
z-index:25;
background-color:#FFF
}

a.info span{
display: none
}

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}

Regarde par toi même avant tout de même. On veut bien t'aider mais on va pas mâcher le travail hein. Wink

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:08

euh ... bug : j'ai que un lien d'image ... Pa sl'image

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:11

Ce serait bien que des que tu as des bugs, tu nous fournisse les codes... What a Face

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:15

Code:: <table>

</table>

<table>
<tr>
<td>
<div class="titre titre-welcome">
W<br />E<br />L<br />C<br />O<br />M<br />E
</div>
</td>

<td>
<div class="block block-welcome">
Contexte :
La guerre est passée , Harry Potter a vaincu Voldemort. le professeur McGonagall reprît Poudlard. Les sorciers reprirent une vie paisible. Pendant 15 ans ce fut l'âge d'Or.

Pendant ce temps , un petit groupe de sorcier se forma,un Ordre du Nom de La Salamendre avec à sa tête un Mage Noire du nom de Azard accompagnée de son assistance Shéila . Ils avaient de grandes ambitions. Descendants d'ancien mangemorts il reprirent les ambitions du Seigneur des Ténèbres et réunirent des fidèles.
Au bout de quelques temps , Le professeur McGonagal , ,Harry Potter et d'autres grands noms de la bataille finale se firent assassiner. Cela rejeta sur la communauté sorcière une vague d'angoisse.
C'est alors que Théo.F.Lockart fît son retour à Poudlard pour occupé le Poste de Directeur. Il n'était nul autre que le petit-fils d'Albus Dumbledore. Il avait pour réputation d'être courageux et il était extrêmement rusé. Mais il n'était pas venu seul, il était venu avec ses amis d'enfances. Ensemble, ils rebâtissais l'école et se battais.
Cette fois qui gagnera ? Combien de vies seront sacrifiés ? Quel sera le prix à payer ?
</div>
</td>

<td>
<div class="block block-staff">
<h1 class="titre titre-staff">L'equipe du Forum</h1>

<table>
<tr>
<td>
<div class="thumbnail">
<img src="http://media.zoom-cinema.fr/photos/news/4370/_thumbs/leonardo-dicaprio_jpg_90x90_crop_upscale_q95.jpg" />
<div>
Théo.F.Lockart.<br /><br /><a href="http://poudnoir.forumgratuit.be/privmsg?mode=post&u=1">Mp</a> & <a href="http://poudnoir.forumgratuit.be/u1">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>
</tr>
</table>

<a href="LIEN_DU_SUJET_STAFF" class="tstaff">Tout le staff ?</a>
</div>
</td>
</tr>
</table>

<table>
<tr>
<td>
<div class="block block-Portoloins.">
<h1 class="titre">Portoloins.</h1>
<font color="yellow">*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/f3-presentation-des-eleves?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des élèves.</a></span>
*
*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/t3-fiche-de-presentation-des-adultes-obligatoire?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des adultes.</a></span>
*
*<span style="font-size: 50px; line-height: normal"></span><a href="http://poudnoir.forumgratuit.be/t4-reglement-de-poudnoir?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Règlement</a>*</font>
<br />
</div>
</td>

<td>
<div class="block block-nouveautes">
<h1 class="titre">Nouveautes</h1>

<div>
11/ 01/13 ~> Création de Poudnoir.<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
</div>
</div>
</td>

<td>
<div class="block block-credits">
<h1 class="titre">Coupe des 4 maisons:</h1>
<a class="info" href="#">http://i34.servimg.com/u/f34/17/74/87/49/griffy10.png<span>Gryffondor 0 Points</span></a>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/pouffy11.png" border="0" alt="" /><font color="yellow">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serdai10.png" border="0" alt="" /> <font color="blue">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /> <font color="green">0</font>
</div>

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:16

Et ton css entier.

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:16

Tu ne suis pas mes informations....
Je t'ai expliqué qu'il fallait garder tes balises !

Melone a écrit:

Coucou,

Alors voilà tu as ceci dans ton code :

Code:: <img src="http://i34.servimg.com/u/f34/17/74/87/49/griffy10.png" border="0" alt="" /> <font color="red">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/pouffy11.png" border="0" alt="" /><font color="yellow">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serdai10.png" border="0" alt="" /> <font color="blue">0</font>
<img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /> <font color="green">0</font>

C'est assez simple. Dans le code de Marion tu as ça :

Code:: <a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a>

La partie "texte du lien", tu mettras la balise img dedans. La partie "Votre texte de l'infobulle" tu mettras le font avec tes points. Ce qui donne quelque chose du genre :

Code:: <a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /><span> <font color="green">0</font></span></a>

Une petite recherche de ta part et je suis sûre que tu y serais parvenu. Wink

On ne pourras pas plus t'aider si tu ne suis pas les informations dîtes...

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:22

et c'est quoi ... les balises img

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:23

Les voilà..:

Code:: <img src="LIEN">

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:26

Elles sont déjà dans ton code, c'est les balises qui affichent tes images. Il te suffit de regarder ton code et de le modifier comme je te le dis...

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:28

Passe ton CSS et ton code de la PA.

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:37

Code:: <table>

</table>

<table>
<tr>
<td>
<div class="titre titre-welcome">
W<br />E<br />L<br />C<br />O<br />M<br />E
</div>
</td>

<td>
<div class="block block-welcome">
Contexte :
La guerre est passée , Harry Potter a vaincu Voldemort. le professeur McGonagall reprît Poudlard. Les sorciers reprirent une vie paisible. Pendant 15 ans ce fut l'âge d'Or.

Pendant ce temps , un petit groupe de sorcier se forma,un Ordre du Nom de La Salamendre avec à sa tête un Mage Noire du nom de Azard accompagnée de son assistance Shéila . Ils avaient de grandes ambitions. Descendants d'ancien mangemorts il reprirent les ambitions du Seigneur des Ténèbres et réunirent des fidèles.
Au bout de quelques temps , Le professeur McGonagal , ,Harry Potter et d'autres grands noms de la bataille finale se firent assassiner. Cela rejeta sur la communauté sorcière une vague d'angoisse.
C'est alors que Théo.F.Lockart fît son retour à Poudlard pour occupé le Poste de Directeur. Il n'était nul autre que le petit-fils d'Albus Dumbledore. Il avait pour réputation d'être courageux et il était extrêmement rusé. Mais il n'était pas venu seul, il était venu avec ses amis d'enfances. Ensemble, ils rebâtissais l'école et se battais.
Cette fois qui gagnera ? Combien de vies seront sacrifiés ? Quel sera le prix à payer ?
</div>
</td>

<td>
<div class="block block-staff">
<h1 class="titre titre-staff">L'equipe du Forum</h1>

<table>
<tr>
<td>
<div class="thumbnail">
<img src="http://media.zoom-cinema.fr/photos/news/4370/_thumbs/leonardo-dicaprio_jpg_90x90_crop_upscale_q95.jpg" />
<div>
Théo.F.Lockart.<br /><br /><a href="http://poudnoir.forumgratuit.be/privmsg?mode=post&u=1">Mp</a> & <a href="http://poudnoir.forumgratuit.be/u1">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>
</tr>
</table>

<a href="LIEN_DU_SUJET_STAFF" class="tstaff">Tout le staff ?</a>
</div>
</td>
</tr>
</table>

<table>
<tr>
<td>
<div class="block block-Portoloins.">
<h1 class="titre">Portoloins.</h1>
<font color="yellow">*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/f3-presentation-des-eleves?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des élèves.</a></span>
*
*<span style="font-size: 12px; line-height: normal"><a href="http://poudnoir.forumgratuit.be/t3-fiche-de-presentation-des-adultes-obligatoire?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Présentation des adultes.</a></span>
*
*<span style="font-size: 50px; line-height: normal"></span><a href="http://poudnoir.forumgratuit.be/t4-reglement-de-poudnoir?tid=3f1370b2df88e583b0c0790d646d1d8e" class="postlink">Règlement</a>*</font>
<br />
</div>
</td>

<td>
<div class="block block-nouveautes">
<h1 class="titre">Nouveautes</h1>

<div>
11/ 01/13 ~> Création de Poudnoir.<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
</div>
</div>
</td>

<td>
<div class="block block-credits">
<h1 class="titre">Coupe des 4 maisons:</h1>
<a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/griffy10.png" border="0" alt="" /><span>Gryffondor a obtenu 0 point </span></a>

<a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/pouffy11.png" border="0" alt="" /><span>Poufsouffle a obtenu 0 point </span></a>

<a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/serdai10.png" border="0" alt="" /><span>Serdaigle a obtenu 0 point </span></a>

<a class="info" href="#"><img src="http://i34.servimg.com/u/f34/17/74/87/49/serpy11.png" border="0" alt="" /><span>Serpentard a obtenu 0 point </span></a>
</div>

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:42

Et ton CSS !

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:49

Ton CSS ! Donne-le ! Pour que j'ai la PA correcte.

Sujet: Re: aide infobulle Sam 19 Jan 2013, 07:50

S'il vous plait les filles, évitez de poster deux fois le même message...

Schtroumpf > A première vue sur ton forum (http://poudnoir.forumgratuit.be/) tout est correct. Quel est le problème ?

Sujet: Re: aide infobulle Sam 19 Jan 2013, 08:24

Bonjour mesdemoiselles,

Je tiens à vous signaler que le code d'infobulle que vous utilisez depuis le début de ce sujet est un TRES MAUVAIS CODE à n'utiliser sous aucun prétexte Wink

Vous ne pouvez raisonnablement pas utiliser un LIEN pour créer une infobulle, surtout si vous comptez mettre d'autres liens à l'intérieur, ou pire, des blocs !

CSSActif dispose d'un tutoriel créer une infobulle qui a le mérite d'expliquer tout le fonctionnement du code et d'utiliser des pratiques CSS et HTML propres et fonctionnelles.

De surcroit, je rappelle que CSSActif s'axe sur l'apprentissage. La prochaine qui donne un code tout fait sans autre explication que "prend ce code voilà au revoir" se prend des tartes.

Ah, oui, et faites des phrases, on n'est pas dans une réunion d'hommes des cavernes ici. Pas de "passe ton CSS", mais "Peux tu nous montrer ton code CSS s'il te plait". Idem pour les questions, d'ailleurs, un "je ne comprends pas, à quoi servent les balises img exactement ?" c'est quand même vachement plus élégant que "c'est quoi les balises img".

aide infobulle

aide infobulle

Sujets similaires

Sujets similaires

Partenaires Or