Encadré de petites images

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Encadré de petites images

Message par mehdi.elazhary le Mer 6 Juil 2011 - 21:16

Bonjour Very Happy

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

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Mer 6 Juil 2011 - 21:19

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 : http://forum.forumactif.com/t284982-infobulle-boite-de-dialogue?highlight=infobulle

Cordialement

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Mer 6 Juil 2011 - 21:58

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

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Mer 6 Juil 2011 - 22:08

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Mer 6 Juil 2011 - 22:09

Non, ce ne sont pas elles !

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Mer 6 Juil 2011 - 22:13

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Mer 6 Juil 2011 - 22:55

Code:
<table>
<tr>
<td><div class="lock">[img]http://i258.photobucket.com/albums/hh260/pinote20e4/GO%20Icones/IconeTrevorD2.png[/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://i258.photobucket.com/albums/hh260/pinote20e4/GO%20Avatars/AvaTrevorD3.png[/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 :


mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Mer 6 Juil 2011 - 23:03

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Mer 6 Juil 2011 - 23:06

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;
}

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Jeu 7 Juil 2011 - 8:03

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 :

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é


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Jeu 7 Juil 2011 - 16:27

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

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Jeu 7 Juil 2011 - 17:16

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Jeu 7 Juil 2011 - 18:26

Je voudrais l'infobulle sur la PA. Je l'ai pas encore mis, je fais mes tests sur un topic Smile 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' Smile

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par Invité le Jeu 7 Juil 2011 - 18:29

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Encadré de petites images

Message par mehdi.elazhary le Ven 8 Juil 2011 - 20:12

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&amp;#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://i258.photobucket.com/albums/hh260/pinote20e4/GO%20Icones/IconeTrevorD2.png" border="0" alt="" /><div class="lock-hidden">
        <table>
    <tr>
    <td><div class="lock"><img src="http://i258.photobucket.com/albums/hh260/pinote20e4/GO%20Icones/IconeTrevorD2.png" 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://i258.photobucket.com/albums/hh260/pinote20e4/GO%20Avatars/AvaTrevorD3.png" 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>

mehdi.elazhary
**

Messages : 68
Inscrit(e) le : 04/06/2011

http://old-poulard.forumgratuit.org/
mehdi.elazhary a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum