Infobulle sur l'avatar

[CryingToYourHeart]

Bonjour,

J'ai récemment installé un système d'infobulle sur mon forum seulement ça ne donne pas l'effet que je souhaiterais. En effet les icônes sont 10 fois trop grande par rapport à ce qu'elles devraient êtres, comme vous pouvez le voir ci dessous:

Spoiler:

De plus le cadre autour de mon avatar est décalé, comme ci dessous:

Spoiler:

Es-ce que quelqu'un pourrait m'aider pour que dans l'infobulle les icônes soient moins petites.
De plus j'aimerais que l'infobulle puisse si possible apparaitre progressivement, j'ai cherché sur plusieurs sites mais je n'ai pas vraiment trouvé ce que je voulais. De plus je n'arrive pas à l'adapter à celle déjà présente.

Voici ci dessous mon code css concernant cette infobulle:

Code:

/*----- INFOBULLES ------*/
 
 
 
.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 2px;
  padding-right : 2px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 0px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 3px groove #C91010;
  border-radius: 5px;
  background-color: #ffffff;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
width: 200px;
height: 320px;
}
.lock:hover .lock-hidden {
  display: block;
}
 

Merci à tous ceux qui voudront bien m'aider

[Matriochka]

Coucou,

Pfiou, difficile de faire charger une page de ton forum avec tous ces gifs !

Pour ton souci d'images trop larges, ça provient de ceci :

Code:

.postdetails.poster-profile img {
border-radius: 10px 10px 10px 10px;
width: 200px;
display: block;}

Au niveau de la ligne width:200px; et display:block;. Essaye de la retirer, et ça devrait fonctionner.

[CryingToYourHeart]

Bonjour,

Merci beaucoup pour votre réponse, alors les images sont de taille normale désormais, en revanche elles sont en plusieurs fois et je ne sais pas pourquoi :s

[Matriochka]

Est-ce que tu pourrais copier ici ton template viewtopic_body sous balises code, stp ?

[CryingToYourHeart]

Oui bien sûre le voici:

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
   _atc.cwait = 0;
   $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
         addthis_close();
         addthis_close();
      }
   });
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>
      <td align="left" valign="middle" nowrap="nowrap">
         <!-- BEGIN switch_twitter_btn -->
         <span id="twitter_btn" style="margin-left: 6px; ">
         <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
         </span>
         <!-- END switch_twitter_btn -->
         <!-- BEGIN switch_fb_likebtn -->
         <span id="fb_likebtn" style="margin-left: 6px; ">
            <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
         </span>
         <!-- END switch_fb_likebtn -->
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
             | 
            <script type="text/javascript">//<![CDATA[
               var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
               var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
               var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
               var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
               var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
               var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
               insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
            <!-- END switch_plus_menu -->
         </span>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
   <tr align="right">
      <td class="catHead" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title">
                  <h1 class="cattitle"> {TOPIC_TITLE}</h1>
               </td>
               <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN displayed -->
   <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><div class="fondprofil">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}"><div class="fond"><br><span class="postdetails poster-profile">
                          <center>{postrow.displayed.RANK_IMAGE}</center>
            <br>
              <center><div class="nom_du_div">
               
                <table>
    <tr>
      <td>
    <span class="gensmall"> <div class="lock"> {postrow.displayed.POSTER_AVATAR}<span class="lock-hidden">
<!-- BEGIN profile_field -->
      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}</span>
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div></span>
      </td>
    </tr>
</table>
               
                </div></center>
                <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><center>Hello guys i'm
                  <div class="texteprofil">{postrow.displayed.POSTER_NAME}</div></center></strong></span>
             
              {postrow.displayed.ONLINE_IMG}
              <br><br>
                <div class="fond2"><div class="profiltexte"><center>Who i am ?</center></div><!-- BEGIN profile_field -->
          <div class="img_comments"> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            </div></div>
               
           
                   
                <center><div class="mligne"></div></center>
                <div class="profiltexte"><center>Nom du forum</center></div>
               
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="postbody">

                     <div><div class="message"><div class="texteprofil">{postrow.displayed.POSTER_NAME} secret is:</div>{postrow.displayed.MESSAGE}</div></div>
                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   
   <tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->

<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="row2 postbody" valign="top">
         <!-- BEGIN link -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
   <tbody>
      <tr>
         <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td valign="top">
                        <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td class="row1 clearfix">
            <table>
               <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                     <img src="{RULE_IMG_URL}" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                     {RULE_MSG}
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

[Matriochka]

<!-- BEGIN profile_field -->
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
<!-- END profile_field -->

Retire les parties en rouge, et ça devrait aller

[CryingToYourHeart]

Ah merci beaucoup ça marche maintenant
Seriez-vous comment faire pour que l'infobulle ne soit pas décalée mais qu'elle soit vraiment sur l'image, et que l'avatar lui même ne soit pas décalé vis à vis de son contour:

Spoiler:

[Matriochka]

Alors, pour le décalage de l’avatar, tu as :

Code:

.nom_du_div {width:200px}

Remplace 200px par 206px.

Ensuite, pour ton infobulle, je pense que tu peux régler ça ainsi :

Code:

.lock {margin-left:-5px;margin-top:-5px;}

[CryingToYourHeart]

La balise nom_du_div correspond au contour de l'avatar en réalité, donc si je change ça ne sera pas pareil.
L'infobulle est bien callé sur l'avatar mais l'avatar est décalé fasse à sa bordure :s

[Matriochka]

As-tu quand même essayé pour nom_du_div ? J’ai testé sur ton forum et ça fonctionne.

Je ne comprends pas le problème. Tu peux faire une capture d’écran ?

[CryingToYourHeart]

Oui j'ai essayé mais l'avatar ne change pas de place, avant ça ne le faisait pas, c'est quand l'infobulle a été installé.
Voilà ce que ça donne:

Spoiler:

[Matriochka]

Ah, je vois ! Alors, mets plutôt les marges sur l’élément lock-hidden Comme ceci :

Code:

.lock:hover .lock-hidden {margin-left:-5px;margin-top:-5px;}

[CryingToYourHeart]

Non ça ne change rien et l'onfobulle est légèrement décallée de l'avatar avec ceci :s

[CryingToYourHeart]

up

[CryingToYourHeart]

up

[Invité]

Salut CryingToYourHeart,

tu peux donner ta C.S.S complète stp .

La balise nom_du_div correspond au contour de l'avatar en réalité

Si tu veux un contour réel pour l'avatar il faut fermer la balise div sinon tu n'as pas d'effet .

Code:


<div class="nom_du_div">
                 
                    <table>
        <tr>
          <td>
        <span class="gensmall"> <div class="lock"> {postrow.displayed.POSTER_AVATAR}
          <span class="lock-hidden">


C'est un peu barbare ton html .

Essayes sur cette class:
.lock-hidden
de modifier le left:0;

avec un -3px;

La largeur de la colonne est définie sur 150px

Code:

 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

et la largeur de ton bloc est sur width: 200px;
Est ce normal ?
a++

[CryingToYourHeart]

Bonjour,

Merci beaucoup j'ai fais les réglages nécessaire, en fait tout venait de la balise "nom_du_div" qui n'était pas placée au bon endroit.
Maintenant ça marche très bien
Par contre seriez-vous comment faire pour que l'infobulle apparaisse progressivement ?

[Invité]

Re,
afin d'obtenir un effet progressif, j'aurais besoin de:
du contenu complet de ta feuille de style et le template modifié stp.
Si tu as aussi le lien de l'avatar de ce post:
http://thewerewolfpack.forumgratuit.org/t57-codes-pour-forum#110

Merci

[CryingToYourHeart]

D'accord,
Alors voici tout d'abord mon CSS:

[CryingToYourHeart]

mon template:



Et voici le lien de l'avatar comme demandé: https://2img.net/r/ihimizer/img338/1001/12932404.png

Merci beaucoup de m'aider
dsl du double post, mais tout ne passait pas :s

[Invité]

Salut CryingToYourHeart,
désolé je n'ai pas pu me libérer avant ;




supprimes et remplaces simplement ces class:
.lock .lock-hidden
et
.lock:hover .lock-hidden

Par :

Code:


.lock-hidden
{

visibility:hidden;
position: absolute;
padding: 2px;
top: 0px;
left: 0px;
background-color: #ffffff;
-moz-border-radius: 5px;
text-align: center;
width: 100px;
height: 160px;
-moz-transition-duration: 1s ,1s;
-moz-transition-property:  width, height;
-moz-transition-timing-function:  ease-in-out;
-webkit-transition-property: width, height;
-webkit-transition-duration:1s ,1s;
-webkit-transition-timing-function:  ease-in-out;
-o-transition-property: width, height;
-o-transition-duration: 1s ,1s;
-o-transition-timing-function: ease-in-out;
}
.lock:hover .lock-hidden
{
visibility:visible;
width: 200px;
height: 320px;
}


Pour avoir un effet il faut paramétrer dans la class qui est cachée (.lock_hidden)
des propriétés comme une largeur et une hauteur :

Code:


width: 100px;
height: 160px;


Puis dans (.lock:hover .lock-hidden )
on donne la taille réelle:

Code:

width: 200px;
height: 320px;

Explication sur les transitions :
-moz-transition-property: width, height;
on demande une transition sur la largeur et la hauteur du bloc .
-moz-transition-duration: 1s ,1s;
L'effet sera de 1 seconde pour afficher la largeur
et de 1 seconde pour afficher la hauteur: 1s , 1s

Code:


/*Pour Firefox*/
-moz-transition-duration: 1s ,1s;
-moz-transition-property:  width, height;
-moz-transition-timing-function:  ease-in-out;
/*Pour navigateur webkit: */
-webkit-transition-property: width, height;
-webkit-transition-duration:1s ,1s;
-webkit-transition-timing-function:  ease-in-out;
/*Pour Opera*/
-o-transition-property: width, height;
-o-transition-duration: 1s ,1s;
-o-transition-timing-function: ease-in-out;


Tu peux bien sûre ajouter d'autre fonction :
comme des bordures avec un affichage de 2 secondes:
La procédure pour le rajout:
Dans

Code:


.lock-hidden


border:1px solid black;
Dans

Code:


.lock:hover .lock-hidden


border: 3px solid red;

et les transitions seront:
/*Pour Firefox*/
-moz-transition-duration: 1s ,1s, 2s;
-moz-transition-property: width, height, border;
-moz-transition-timing-function: ease-in-out;
/*Pour navigateur webkit: */
-webkit-transition-property: width, height, border;
-webkit-transition-duration:1s ,1s,2s;
-webkit-transition-timing-function: ease-in-out;
/*Pour Opera*/
-o-transition-property: width, height,border;
-o-transition-duration: 1s ,1s,2s;
-o-transition-timing-function: ease-in-out;
[/code]
Voilà mon amie .

a++

[CryingToYourHeart]

D'accord merci beaucoup, vos explications m'ont beaucoup aidées, en revanche j'aimerais savoir comment faire pour que l'infobulle parte directement du haut de l'avatar et glisse progressivement tout en ayant une opacité légèrement atténuée. Dois-je changer la partie "visibility" ?

[Invité]

Salut CryingToYourHeart,

en revanche j'aimerais savoir comment faire pour
que l'infobulle parte directement du haut de l'avatar

voilà pour le code:

Code:

     
 .lock-hidden
        {
        visibility:hidden;
        position: absolute;
        padding: 2px;
        top: 0px;
        left: 0px;
        background-color: #ffffff;
        -moz-border-radius: 5px;
        text-align: center;
        width:200px;
        height:0;
        -webkit-opacity: 0.3;
        -moz-opacity: 0.3;
        opacity: 0.3;
        -moz-transition-duration: 1s ,1s,2s;
        -moz-transition-property:  width, height,opacity;
        -moz-transition-timing-function:  ease-in-out;
        -webkit-transition-property: width, height,opacity;
        -webkit-transition-duration:1s ,1s,2s;
        -webkit-transition-timing-function:  ease-in-out;
        -o-transition-property: width, height,opacity;
        -o-transition-duration: 1s ,1s,2s;
        -o-transition-timing-function: ease-in-out;
        }
        .lock:hover .lock-hidden
        {
        visibility:visible;
        width: 200px;
        height: 320px;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        }


Tu peux aussi mettre l'infobulle avec un width à 0 dans cette class:
.lock-hidden
De cette façon elle commencera a se déployer en haut à gauche.
Je n'ai pas déposer ce dernier car tu as des images et elles apparaitront aussitôt
avant que ton infobulle soit complétement dépliée .

a++

[CryingToYourHeart]

Merci beaucoup pour votre aide, c'est exactement ce que je souhaitais faire
Merci encore