affichage de l'infobulle dans le profil

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

Résolu affichage de l'infobulle dans le profil

Message par Asorane le Mar 15 Nov 2011 - 13:51

Bonjour =)

En cherchant à afficher les informations du profil dans une infobulle, je me suis retrouvée confrontée à un problème d'affichage. Je crois qu'il ne s'agit que d'un tout petit détail à modifier, mais je ne vois pas lequel, et je n'ai pas réussi à trouver la réponse dans les questions résolues. Est-ce que quelqu'un pourrait m'indiquer où se situe le problème ?

l'illustration du problème:

Normalement, le profil est supposé s'afficher dans l'espace qui se retrouve sous l'image. Voici ce que cela donne : au lieu d'avoir une seule infobulle contenant toutes les informations du profil, j'en ai plusieurs qui se superposent.

Voici mon template modifié :
viewtopic_body:
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>
             | 
            <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>
         </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="profils"><span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}

                                <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>


                                  {postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
            <a class="info"><img src="http://img12.imageshack.us/img12/9468/imageprofil.png" alt="afficher le profil"><span><div class="champs_profil"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div></span></a>
            {postrow.displayed.POSTER_RPG}
         </span>

         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  </div></td>
      <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>{postrow.displayed.MESSAGE}</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>
   <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>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>


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

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

         <!-- 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">
{S_TOPIC_ADMIN}

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

et voici également ma feuille de CSS, au cas où il s'agisse de quelque chose que je doive y enlever.
CSS:
Code:
/* CATEGORIES */

.bodyline {
  width: 800px;
}

.H-cat {
  height:150px;
  margin-top: 30px;
  width:800px;
  margin-bottom:-100px;
  align: center;
  margin-left: 21px;
}

.H-cat2 {
  height:133px;
  width:800px;
  margin-bottom:-80px;
  align: center;
}

td.catHead, th.thHead {
    border-width: 1px 1px 0;
    font-size: 11px;
}

.topictitle, h1, h2 {
  text-align: center;
  padding-top: 30px;
}

.forumdesc {
  margin-left: 30px;
  padding: 5px;
  background-image: url("http://img339.imageshack.us/img339/1263/patterntest.png");
  border-color: #CCC686 #CCC686 white;
  border-style: solid;
  border-width: 1px 1px 0;
  opacity: 0.6;
}

.liensousfow {
  margin-left: 10px;
  padding-left: 25px;
  width: 100px;
  text-transform: uppercase;
}

.sujetsmess {
  text-align: left;
  font-family: small fonts;
  line-height: 10px;
  color: #969696;
  font-size: 7px;
  font-weight: lighter;
  text-transform: uppercase;
}

.forumlink {
  font-size: 20px;
  letter-spacing: -1px;
  text-align: left;
  text-decoration: none !important;
  text-transform: uppercase;
}

/* LIENS GÉNÉRAUX */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none!important;
}

.mainmenu {
  image-display: none;
  font-weight: bold;
  font-variant: small-caps;
  color: #D9BA73;
}


/* APPARENCE GENERALE */

.postbody {
  padding: 10px;
  text-align: justify;
  font-size: 11px;
  line-height: 11px;
}

.forumline {
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 15px 15px 15px 15px;
  -border-radius: 15px 15px 15px 15px;
}



.gensmall {
  font-size: 9px;
}

/* MISE EN PAGE SUJETS */



tr.post span.gensmall { display: none; }

.admin {
  border-left: 3px solid #594C2D;
  padding-left: 8px;
}

.titre {
  color: #594C2D;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}

.quote {
  padding: 5px;
  background-image: url("http://img339.imageshack.us/img339/1263/patterntest.png");
  border-color: #CCC686 #CCC686 white;
  border-left: 3px solid #594C2D;
  border-style: solid;
  border-width: 1px 1px 0;
  opacity: 0.6;
}

.spoiler {
  padding: 5px;
  background-image: url("http://img339.imageshack.us/img339/1263/patterntest.png");
  border-color: #CCC686 #CCC686 white;
  border-left: 3px solid #594C2D;
  border-style: solid;
  border-width: 1px 1px 0;
  opacity: 0.6;
}

/* PROFIL EN INFOBULLE */

* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.info {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

a.info span {
  display: none;
font-size: 12px;

}
a.info:hover {
  background: none;
  z-index: 999;
  cursor: pointer;
}

a.info:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 0px;
  left: 0px;
  background-color: #DEDAAA;
  color: #000000;
  padding: 3px;
  border: 1px solid #000000;
}

En remerciant d'avance tous ceux qui se pencheront sur mon souci ! Merci beaucoup =D


Dernière édition par Asorane le Lun 21 Nov 2011 - 22:20, édité 2 fois

Asorane
***

Féminin
Messages : 119
Inscrit(e) le : 14/01/2010

http://asorane-sw.forum-actif.net/
Asorane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: affichage de l'infobulle dans le profil

Message par Final-Blonde le Mar 15 Nov 2011 - 18:22

B'soir Asorane,

Il me semble que la hiérarchie n'est pas bonne.

Juste pour m'éviter de chercher dans TOUT ton template et TOUTE ta feuille de style, pourrais-tu donner juste les parties concernées:
- Dans le template entre >td<partie profil>/td<
- Dans le CSS idem, juste ce qui concerne TOUT le profil

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: affichage de l'infobulle dans le profil

Message par Asorane le Mar 15 Nov 2011 - 20:46

Bien sûr, toutes mes excuses, j'aurais du y penser.

Voici l'extrait du template concerné :
Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}<br />
                                <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /><br />
                                  {postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
            <a class="info"><img src="http://img12.imageshack.us/img12/9468/imageprofil.png" alt="afficher le profil"><span><div class="champs_profil"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div></span></a>
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  </td>

Et pour le CSS, ce qui concerne le profil
Code:
/* PROFIL EN INFOBULLE */

* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.info {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

a.info span {
  display: none;
font-size: 12px;

}
a.info:hover {
  background: none;
  z-index: 999;
  cursor: pointer;
}

a.info:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 0px;
  left: 0px;
  background-color: #DEDAAA;
  color: #000000;
  padding: 3px;
  border: 1px solid #000000;
}

Merci encore !

Asorane
***

Féminin
Messages : 119
Inscrit(e) le : 14/01/2010

http://asorane-sw.forum-actif.net/
Asorane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: affichage de l'infobulle dans le profil

Message par Final-Blonde le Mar 15 Nov 2011 - 21:32

Il n'y a pas de mal, même si la plupart donne tout leur template et tout leur CSS, c'est parfois pénible de rechercher dans la façon de coder de chacun, surtout dans le CSS.

Je n'ai pas bien compris, l'infobulle s'ouvre sur quoi ?
Sur un champ que tu crée en plus, sur le pseudo, sur l'avatar ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: affichage de l'infobulle dans le profil

Message par Final-Blonde le Mar 15 Nov 2011 - 22:05

Aïe, pas la tête pour le double-post ! Grrr

Je n'avais pas de suite vu, mais je pense avoir saisi (même quand je me l'explique longtemps, je me comprends vite ! Quel boulet !)...

Il y a en effet une erreur de hiérarchie car tu ne peux pas utiliser deux fois la même balises que celles qui sont utiliser pour l'infobulle, sinon ça te crée d'autres "trucs" pas très beaux.
Donc il faut utiliser des balises plus grandes qui peuvent en contenir de plus petites. Pas sûre de bien me faire comprendre là...
Tu comprendras mieux en suivant le cheminement du HTML et du CSS.

Sans parler que la balise de lien <a ...> est pour une url ou une fonction de page, même si on peut y mettre un class.
Pareil pour "nowrap" qui veut dire pas de à la ligne... C'est bien si tes membres n'ont pas le champ commentaires à remplir.

Dans le HTML, je te renvoie ta partie profil corrigée :
Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_AVATAR}<br />
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /><br />
{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</span>
<div class="info"><img src="http://img12.imageshack.us/img12/9468/imageprofil.png" alt="afficher le profil"><div class="champs_profil">
  <!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
  <!-- END profile_field -->
</div></div>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RPG}
</span>
 
<br />
<img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>

Et dans le CSS :
/* PROFIL EN INFOBULLE */
* {
font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
}
div.info {
position: relative;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
div.info:hover {
z-index: 1;
}
div.info div {
display: none;
background-color: #DEDAAA;
color: #000000;
font-size: 12px;
white-space: nowrap;
}
div.info:hover div {
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: auto;
border: 1px solid #000000;
padding: 4px;
z-index: 2;
}
L'intitulé "champs_profil" n'est pas utilisé ici, je suppose que c'est pour le texte...

Rien ne sert d'avoir un z-index élevé, c'est de la vraie gnognotte ! Un seul supérieur suffit pour avoir la priorité sur l'autre.
Si on s'amuse à ça, on peut se retrouver tout à coup avec l'impossibilité de placer un élément par dessus un autre, 999 étant la limite maintenant sur FA (ou en général, je ne sais pas).

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: affichage de l'infobulle dans le profil

Message par Asorane le Lun 21 Nov 2011 - 22:18

De retour de week-end, désolée pour le délai de réponse !

Pour ce qui est de la hiérarchie des balises, j'ai compris ce que tu voulais dire ^^ J'ai beau essayer de me mettre au html, je galère toujours un peu, ce qui explique l'aspect "artisanal" de mes bidouillages et de ce template en particulier '-'

Une fois les modifications effectuées, tout marche, effectivement ! La classe "champs_profil" était placée là au cas où je veuille régler l'affichage du profil via le CSS (au niveau de la mise en page, etc.).

Merci beaucoup pour ton aide ! Je vais me pencher en détail sur ce que j'ai planté pour éviter de faire l'erreur. Merci encore =)


Asorane
***

Féminin
Messages : 119
Inscrit(e) le : 14/01/2010

http://asorane-sw.forum-actif.net/
Asorane 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