Encadré de petites images
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Encadré de petites images
Bonjour
J'ai trouvé des forum qui ont dans leur page d'accueil la liste du staff. Sur cette liste on a des petites images des membres du staff et quand on passe la souris dessus, on voir un encadré avec un avatar du membre du staff et quelques informations sur ce dernier. Puis-je savoir comment fait on pour avoir ceci ?
Merci.
J'ai trouvé des forum qui ont dans leur page d'accueil la liste du staff. Sur cette liste on a des petites images des membres du staff et quand on passe la souris dessus, on voir un encadré avec un avatar du membre du staff et quelques informations sur ce dernier. Puis-je savoir comment fait on pour avoir ceci ?
Merci.
Dernière édition par mehdi.elazhary le Sam 9 Juil 2011 - 2:25, édité 1 fois
Re: Encadré de petites images
Rebonsoir,
Ce sont ce que l'on appelle des infobulles. De nombreux sujets sur le forum traitent de ce sujet et de la manière de les créer dont celui-ci : https://forum.forumactif.com/t284982-infobulle-boite-de-dialogue?highlight=infobulle
Cordialement
Ce sont ce que l'on appelle des infobulles. De nombreux sujets sur le forum traitent de ce sujet et de la manière de les créer dont celui-ci : https://forum.forumactif.com/t284982-infobulle-boite-de-dialogue?highlight=infobulle
Cordialement
Invité- Invité
Re: Encadré de petites images
Merci beaucoup. Par contre j'ai un problème. J'ai deux images de 100*100 avec des inforbulles. Une en dessus de l'autre, quand je passe la souris sur l'image en haut, l'infobulle apparait mais sous l'image qui est bas. Genre l'image en bas cache une partie de l'infobulle :s
Re: Encadré de petites images
Ces infobulles apparaissent-elles actuellement sur votre page d'accueil ? Les seules que je vois pour le moment ce sont les deux que vous avez mises dans votre onglet "staff".
Cordialement
Cordialement
Invité- Invité
Re: Encadré de petites images
Non, ce ne sont pas elles !
Re: Encadré de petites images
Est-ce que vous pourriez remettre le code dans lequel elles apparaissent afin qu'on puisse constater le problème de visu ; voir aussi poster ce code ici afin qu'une personne vous éventuellement vous aider à le corriger/modifier si nécessaire entre balise code ?
Cordialement
Cordialement
Invité- Invité
Re: Encadré de petites images
- Code:
<table>
<tr>
<td><div class="lock">[img]http://illiweb.com/fa/pbucket.gif[/img]<div class="lock-hidden">[font=Courier New][url=http://old-poudlard.forumgratuit.org/privmsg?mode=post&u=6]C O N T A C T E R[/url][/font]
[img]http://illiweb.com/fa/pbucket.gif[/img]
[font=Courier New][color=#404747]Vladlen L. Yulian[/color]
Fondateur et administrateur[/font]
</div></div>
</td>
</tr>
</table>
<table>
<tr>
<td><div class="lock">[img]http://images4.fanpop.com/image/photos/20800000/dianna-agron-glee-20870883-100-100.jpg[/img]<div class="lock-hidden">[font=Courier New][url=http://old-poudlard.forumgratuit.org/privmsg?mode=post&u=1]C O N T A C T E R[/url][/font]
[img]http://www.kazeo.com/sites/fr/photos/303/Dianna-Agron-3_3037320-M.png[/img]
[font=Courier New][color=#404747]Marine J. Taylor[/color]
Co'Fondatrice et administrice[/font]
</div></div>
</td>
</tr>
</table>
Et voilà ce que ça donne :
Re: Encadré de petites images
Avez-vous mis un code CSS en rapport avec ce message d'accueil ? Si oui, pourriez-vous nous le poster ici entre balises code ?
Où l'avez-vous posté sur votre forum exactement ?
Pour ma part, je ne constate aucun problème d'affichage ni de chevauchement pour le moment en l'affichant dans le message d'accueil.
Cordialement
Où l'avez-vous posté sur votre forum exactement ?
Pour ma part, je ne constate aucun problème d'affichage ni de chevauchement pour le moment en l'affichant dans le message d'accueil.
Cordialement
Invité- Invité
Re: Encadré de petites images
Voilà le code CSS
- Code:
.lock {
position: relative;
cursor: pointer;
}
.lock .lock-hidden {
/* center */
display: none;
position: absolute;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
padding-bottom : 5px;
top: 45px;
left: 0px;
/* style du bloc qui apparait */
border: 2px dotted #000000;
border-radius: 5px;
background-color: #DDC3B2;
-moz-border-radius: 5px;
text-align: center;
visibility: visible;
}
.lock:hover .lock-hidden {
display: block;
}
Re: Encadré de petites images
Bonjour,
Merci pou votre CSS. Je l'ai installé, modifié et voilà pour le moment le résultat que j'obtiens. Je ne sais pas si le positionnement de l'infobulle du haut vous satisfera.
Vous pouvez donc essayer de remplacer le CSS de votre infobulle par celui-ci :
Cordialement
Merci pou votre CSS. Je l'ai installé, modifié et voilà pour le moment le résultat que j'obtiens. Je ne sais pas si le positionnement de l'infobulle du haut vous satisfera.
Vous pouvez donc essayer de remplacer le CSS de votre infobulle par celui-ci :
- Code:
.lock {
position: relative;
cursor: pointer;
}
.lock .lock-hidden {
/* center */
display: none;
position: absolute;
padding- top: 45px;
padding-left: 0px;
/* style du bloc qui apparait */
border: 2px dotted #000000;
border-radius: 5px;
background-color: #DDC3B2;
-moz-border-radius: 5px;
text-align: center;
visibility: visible;
}
.lock:hover .lock-hidden {
display:inline;
}
Cordialement
Invité- Invité
Re: Encadré de petites images
Même problèmes, les infobulles ont été décalées ce qui fait que l'infobulle d'en haut ne passe plus à travers l'image en bas . Mais l'infobulle d'en bas passe à travers une image déjà existante sur le forum, ce que je veux moi c'est qu'aucune image ne cache les infobulle :s
Re: Encadré de petites images
Vous pourriez nous faire une capture d'écran de l'affichage des infobulles pour pouvoir visualiser le problème ? Quelle est l'autre image du forum qui serait cachée par celle-ci ?
Sur votre capture vous serait-il éventuellement possible d'indiquer où exactement vous voudriez voir l'infobulle s'afficher ?
Cordialement
Sur votre capture vous serait-il éventuellement possible d'indiquer où exactement vous voudriez voir l'infobulle s'afficher ?
Cordialement
Invité- Invité
Re: Encadré de petites images
Je voudrais l'infobulle sur la PA. Je l'ai pas encore mis, je fais mes tests sur un topic Et sur ce topic, il y a le même problème que dans le Screen que je vous ai faut, sauf qu'à la place d'être caché par l'image de Dianna, il est caché par le bouton 'répondre'
Re: Encadré de petites images
Il faudrait que vous installiez le code dans la PA pour voir les problèmes qui peuvent se poser. Le mettre dans un sujet n'a pas d'intérêt dans la mesure où vous ne les utiliserez pas dans ceux-ci.
Avez-vous un forum de test dans lequel vous pourriez tester les modifications que vous souhaitez apporter à la déco de votre forum et sur lequel vous pourriez éventuellement tester ce code ?
Cordialement
Avez-vous un forum de test dans lequel vous pourriez tester les modifications que vous souhaitez apporter à la déco de votre forum et sur lequel vous pourriez éventuellement tester ce code ?
Cordialement
Invité- Invité
Re: Encadré de petites images
Les infobulles marchaient un moment et puis maintenant elles ne veulent plus apparaitre. Je vous laisse voir le code de ma PA. Pour le CSS, j'ai mis celui que tu m'as filé Lydie :p
- Code:
<center><div id="menu" Code par Dakino disponible sur Twi-art.net>
<ul>
<table><tr><td>
<li> <a href="#">L'essentiel</a>
<ul>
<li><a href="http://old-poudlard.forumgratuit.org/t4-i-m-at-your-commands-reglement">Lire le règlement</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f12-maman-je-viens-d-etre-reparti">Se présenter</a>
</li></ul></li></td>
<td><li><a href="#"> Groupes</a>
<ul>
<li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#41">Les élèves</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#42">Les inventeurs</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#43">Les bouquinistes</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#44">Le ministère</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#45">Les commerçants</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#46">Le perso. de Poudlard</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#47">Les médecins</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#48">Les Moldus</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#49">Les sportifs</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t30-each-one-s-family-explications-groupes#50">L'Aglaeca</a>
</li></ul></li></td>
<td><li><a href="#">Devenir partenaire</a>
<ul>
<li><a href="http://old-poudlard.forumgratuit.org/t12-you-want-to-be-our-partner">Faire une demande</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t39-there-is-a-link-between-us-les-partenaires#66">Nos partenaires</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/t40-you-have-to-represent-us-like-that-nos-boutons">Nos boutons</a>
</li></li></ul></li></td>
<td><li><a href="#">Base RPG</a>
<ul>
<li><a href="http://old-poudlard.forumgratuit.org/f17-relations">Fiches de lien</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f18-sujets">Fiches de topics</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f13-centre-d-informations">Centre d'informations</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f22-univers-old-poudlard">Univers Old Poudlard</a>
</li></ul></li></td>
<td><li><a href="#">Hors RPG</a>
<ul>
<li><a href="http://old-poudlard.forumgratuit.org/f61-jeux-discussions">Flood</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f64-pub-partenariats">Partenaires & Pub</a>
</li><li><a href="http://old-poudlard.forumgratuit.org/f67-ma-vie-d-artiste">Les artistes</a>
</li></ul></li></td></tr></table>
</ul>
</div> <br>
<span class="genmed"><table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">Le Staff </th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">Contexte</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">Liens Rapides</th>
</tr>
<span style="text-shadow: #000000 1px 1px 1px; text-align: right; font-size: 30px; color:#ffffff; margin: 10px; font-family: impact;">Bienvenue sur Old Poudlard, {USER&#8288;NAME} !</span><br>
<span class="postbody"></span></td>
<td class="row3" colspan="1" rowspan="1" align="center" valign="top"><span class="postbody"><div style="margin:auto;text-align:center;width:100%">
<span style="font-size: 9px; line-height: normal"> <table>
<tr>
<td><div class="lock"><img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" /><div class="lock-hidden">
<table>
<tr>
<td><div class="lock"><img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" /><div class="lock-hidden"><font face="Courier New"><a href="http://old-poudlard.forumgratuit.org/privmsg?mode=post&u=6?tid=38dcc4db921cf4fae8121ad8a6dc858e" class="postlink">C O N T A C T E R</a></font>
<img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" />
<font face="Courier New"><font color="#404747">Vladlen L. Yulian</font>
Fondateur et administrateur</font>
</div></div>
</td>
</tr>
</table>
<table>
<tr>
<td><div class="lock"><img src="http://images4.fanpop.com/image/photos/20800000/dianna-agron-glee-20870883-100-100.jpg" border="0" alt="" /><div class="lock-hidden"><font face="Courier New"><a href="http://old-poudlard.forumgratuit.org/privmsg?mode=post&u=1?tid=38dcc4db921cf4fae8121ad8a6dc858e" class="postlink">C O N T A C T E R</a></font>
<img src="http://www.kazeo.com/sites/fr/photos/303/Dianna-Agron-3_3037320-M.png" border="0" alt="" />
<font face="Courier New"><font color="#404747">Marine J. Taylor</font>
Co'Fondatrice et administrice</font>
</div></div>
</td>
</tr>
</table>
</div></div>
</td>
</tr>
</table></span></td>
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><center><div style="background-color: COULEUR FOND; color: COULEUR ECRITURE; width: 400px; -moz-border-radius: 20px; padding: 10px;"> <div style="height: 200px; overflow: auto; text-align: justify;">
<justify><u>Le 31 Décembre 2010</u><br /><br />
« Tant qu’il y a des gens derrière le ministère, notre plan échouera toujours. Potter et ses amis doivent disparaître ! » Je devais admettre qu’il était allé trop loin sur ce coup là, comment faire disparaître celui qui a tué le seigneur des ténèbres. On avait regroupé en effet plus d’une vingtaine de sorciers autour de nous, tous aussi décidés à nous aider. Vladlen pour sa part ne se montrait plus, il voulait à tout point affaiblir le ministère en faisant disparaître Potter et les autres. Marc et moi cherchions plus de sorciers pour notre cause, et nous finissions toujours par les trouver.<br /></justify>
<font size=1><a href="http://old-poudlard.forumgratuit.org/t28-one-world-one-end-contexte">Lire en entier</a>
</div>
</div></center>
</span></td>
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
<div style="margin:auto;text-align:center;width:100%"><a href="lien" target="blank">texte</a> <br/>
<a href="URL DU LIEN" target="blank">texte</a> <br/>
<a href="URL DU LIEN" target="blank">texte</a> <br/>
<a href="URL DU LIEN" target="blank">texte</a> <br/>
<a href="URL DU LIEN" target="blank">texte</a> </div>
</span></td>
<tr><th class="thTop forabg" colspan="1" rowspan="1">Top Sites</th>
<th class="thTop forabg" colspan="1" rowspan="1">Postes vacants
<br></th><th class="thTop forabg" colspan="1" rowspan="1">Top Affiliates
<br></th></tr>
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div style="margin:auto;text-align:center;width:100%"><a href="URL"><img src="LIEN DE L'IMAGE" border="0"></a> <a href="URL"><img src="LIEN DE L'IMAGE" border="0"></a> <a href="URL"><img src="LIEN DE L'IMAGE" border="0"></a></div>
</span></td>
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
<form name="MenuderoulantselonDark" method="POST">
<select name="wxlmenu" size=1 style="font-family: verdana; color: #COULEUR DU TEXTE; border: double; font-size: 12; background: #COULEUR DU FOND;">
<option value="URL DU SITE WEB">NOM DU SITE</option>
<option value="URL DU SITE WEB">NOM DU SITE</option>
<option value="URL DU SITE WEB">NOM DU SITE</option>
<option value="URL DU SITE WEB">NOM DU SITE</option>
<option value="URL DU SITE WEB">NOM DU SITE</option>
<option value="URL DU SITE WEB">NOM DU SITE</option>
</select>
<input type="button" style="font-family: verdana; color: #COULEUR DU CADRE; border: double; font-size: 12; background: #COULEUR DU FOND;" onClick="location =
document.MenuderoulantselonDark.wxlmenu.options
[document.MenuderoulantselonDark.wxlmenu.selectedIndex].value;"value="Go">
</form>
</span></td>
</table>
<title>Dentesaugmento</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/smiley.ico" /><meta name="language" content="fr" /><meta name="description" content="forum HP " /><meta name="keywords" content="rpg, hp, harry potter rpg" lang="fr" /><meta name="robots" content="index, follow, noodp" /><link rel="alternate" type="application/rss+xml" href="/feed/?f=119" title="old" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=123" title=" ¤ The beginning" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=2" title=" ♥ The beginning" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=3" title=" ♥ Have you seen this wizzard?" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=4" title=" ♥ We R' Wo We R'" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=9" title=" ♥ Panneau D'Affichage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=102" title=" ♥ Chocogrenouille" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=106" title=" ♥ Sweet Dreams" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=108" title=" ♥ Les Sabliers" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=15" title=" ♥ Extérieur" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=13" title=" ♥ Cachots et Sous-sols" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=14" title=" ♥ Rez-de-Chaussée" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=16" title=" ♥ Premier Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=17" title=" ♥ Deuxième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=18" title=" ♥ Troisième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=19" title=" ♥ Quatrième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=20" title=" ♥ Cinquième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=21" title=" ♥ Sixième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=22" title=" ♥ Septième Etage" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=57" title=" ♥ Tours" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=58" title=" ♥ Autres Pièces" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=71" title=" ♥ Pré-au-Lard" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=79" title=" ♥ Chemin de Traverse" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=84" title=" ♥ Sainte Mangouste" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=91" title=" ♥ Ministère de la Magie" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=23" title=" ♥ Flood Party" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=25" title=" ♥ Partenariat" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=26" title=" ♥ Archives" />
<link rel="alternate" type="application/rss+xml" title="Derniers sujets (RSS 2.0)" href="http://dentesaugmento.forumactif.com/feed/" />
<link rel="alternate" type="application/atom+xml" title="Derniers sujets (ATOM)" href="http://dentesaugmento.forumactif.com/feed/?type=atom" />
<meta name="title" content="Dentesaugmento" /><link rel="stylesheet" href="/49-ltr.css" type="text/css" /><link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="" /><link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/fr/search/improvedsearch.xml" title="Rechercher des forums" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/17/frm/lang/fr.js" type="text/javascript"></script><link type="text/css" rel="stylesheet" href="http://illiweb.com/rs3/17/frm/jquery/ticker/ticker.css" /><script src="http://illiweb.com/rs3/17/frm/jquery/ticker/ticker.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
$(document).ready(function(){ticker_start(0, 100, 100, 'left', 4000);});//]]></script>
Sujets similaires
» Je ne vois plus les petites images de lieux
» petites images devants les catégories
» Images en 1024 pixels, apparaissent très petites
» Plusieurs images servimg ne s'affichent plus + impossible d'uploader de nouvelles images
» [Administration] Images récentes: pouvoir choisir dans quels forums les images sont sélectionnées
» petites images devants les catégories
» Images en 1024 pixels, apparaissent très petites
» Plusieurs images servimg ne s'affichent plus + impossible d'uploader de nouvelles images
» [Administration] Images récentes: pouvoir choisir dans quels forums les images sont sélectionnées
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum