Infobulle sur l'avatar

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

Résolu Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 21:09

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


Dernière édition par CryingToYourHeart le Sam 8 Déc 2012 - 11:01, édité 1 fois

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 21:15

Coucou,

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

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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 21:21

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 21:23

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 21:24

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://illiweb.com/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://illiweb.com/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>

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 21:30

<!-- 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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 21:47

Ah merci beaucoup ça marche maintenant Very Happy
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:

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 21:54

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 22:00

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 22:07

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 ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 22:11

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:

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Matriochka le Dim 2 Déc 2012 - 22:13

Ah, je vois ! Alors, mets plutôt les marges sur l’élément lock-hidden Wink Comme ceci :
Code:
.lock:hover .lock-hidden {margin-left:-5px;margin-top:-5px;}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Dim 2 Déc 2012 - 22:29

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Mar 4 Déc 2012 - 17:56

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Mer 5 Déc 2012 - 22:13

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Milouze14 le Jeu 6 Déc 2012 - 7:39

Salut CryingToYourHeart,

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


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 Very Happy .
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 Very Happy .

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

avec un -3px; Wink

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





Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Jeu 6 Déc 2012 - 9:33

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 Smile
Par contre seriez-vous comment faire pour que l'infobulle apparaisse progressivement ?

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Milouze14 le Jeu 6 Déc 2012 - 10:22

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

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Jeu 6 Déc 2012 - 20:37

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



CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Jeu 6 Déc 2012 - 20:37

mon template:



Et voici le lien de l'avatar comme demandé: http://img338.imageshack.us/img338/1001/12932404.png

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par Milouze14 le Ven 7 Déc 2012 - 6:49

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




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 Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Ven 7 Déc 2012 - 16:28

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" ?

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Infobulle sur l'avatar

Message par Milouze14 le Sam 8 Déc 2012 - 5:47

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 Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle sur l'avatar

Message par CryingToYourHeart le Sam 8 Déc 2012 - 11:01

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart 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