Probleme Profil Bouton_activeProbleme Profil Bouton_hoverProbleme Profil Fb-hoverProbleme Profil Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Probleme Profil EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Probleme Profil EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Probleme Profil EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Probleme Profil EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Probleme Profil EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Probleme Profil EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Probleme Profil EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Probleme Profil EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Probleme Profil

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Bonsoir o/ j'ai un petit soucis avec mon profil j'ai quelque chose comme ceci:

https://2img.net/r/hpimg11/pics/174120preuve1.png

Le profil ne débordent pas du bodyline et l'image est au dessus de tout.
j'aurais aimé quelque chose comme ceci:

https://2img.net/r/hpimg11/pics/844056preuve2.png

voici les codages:  

CSS:

Code:

.postdetails.poster-profile a img{
  margin-top: 0px;
  margin-left: 21px;
  width: 300px;
  height: 300px;
}

.profilinfo{
  width: 189px;
  height: 79px;
  margin-left: 21px;
  overflow: auto;
  z-index: 1;
}

.pseudop{
  text-align: center;
  margin-top: -6px;
  z-index: 1;
}

TEMPLATE:

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

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
        
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
    
   return false;
};

//]]>
</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}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&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&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}&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="238px" height="26" style="min-width:238px;">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="238" style="background-image: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png); background-repeat:no-repeat; min-width:300px; z-index: 5;">
            <span class="postdetails poster-profile">
                                  {postrow.displayed.POSTER_AVATAR}<br /><br />
            <div class="profilinfo"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
                                  {postrow.displayed.POSTER_RPG}</div>
                  </span><br />
                  <div class="pseudop"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span></div>
                  <br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  </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}" alt="" />

                                 <!-- 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>
                     <!-- BEGIN switch_signature -->
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>
                     <!-- END switch_signature -->

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <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>
<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 -->
   <!-- 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}" alt="" />
                  </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>
MessageSujet: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 15:58
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Pourrais tu me fournir un lien vers un sujet de ton forum où je pourrai constater le problème s'il te plait ? Car là même en récupérant template + CSS, mon résultat est vraiment très différent ^^'
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 17:08
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Oh pardon je te donne ceci tout de suite o/

http://forum-test-fuyu.forumactif.org/t3-ma-propre-fiche

voici =3
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 17:33
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Questions :
1/ Tu vas garder la colonne "Auteur" ?
2/ Tu vas déplacer aussi les informations de profil ou pas ? (car elles ne sont pas dans l'image d'explication, donc je sais pas où elles devraient êtres)
3/ Tu ne déplaces pas la zone de texte du message, c'est ça ?
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 17:52
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Et bien :

1/ Je ne sais pas peut être qu'il n'est pas utile si je déplace le profil
2/ Information du profil je voulais faire en infobulle quand on passe sur l'image sa apparaît ^^
3/ Je n'ai pas très bien compris 'o'
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 18:05
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Ce que tu pourrais faire c'est créer une div où tu mets à l'intérieur tout ton bloc de profil.
Ensuite dans le css tu ajoutes ceci :
Code:
.profil-container {
    position: relative;
    left: -150px;
}

En remplaçant "-150px" ainsi que ".profil-container" par tes propres valeurs Smile


Dernière édition par Nihil le Sam 05 Avr 2014, 18:25, édité 1 fois
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 18:19
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Je laisse les autres codes et j'ajoute celui qui recouvre tout dans le tremplate?
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 18:22
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Dans ton template tu trouves tout ce qui correspond à ton profil (juste ce qui est pour le profil, pas le reste ^^). Tu mets autour une div :

Code:
<div class="profil-container">
    <!-- Ici tu mets le code de ton profil --> 
</div>

Et ensuite dans le CSS tu rajoutes ceci :
Code:
.profil-container {
    position: relative;
    left: -150px;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 18:25
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
comme ceci? (pardon j'ai un peu de mal à comprendre >o<)

Code:
 <!-- BEGIN displayed -->
<div class="profil-container">
    <!-- Ici tu mets le code de ton profil -->
</div>
  <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="238" style="background-image: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png); background-repeat:no-repeat; min-width:300px; z-index: 5;">
            <span class="postdetails poster-profile">
                                  {postrow.displayed.POSTER_AVATAR}<br /><br />
            <div class="profilinfo"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
                                  {postrow.displayed.POSTER_RPG}</div>
                  </span><br />
                  <div class="pseudop"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span></div>
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 18:32
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Aouch, tu as quelques petites choses un peu maladroites dans ton HTML, qui vont te ralentir plus tard, voici une analyse rapide :

Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="238" style="background-image: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png); background-repeat:no-repeat; min-width:300px; z-index: 5;">

Je ne sais pas trop ce que vient faire là le {postrow.displayed.THANK_BGCOLOR}, je crois qu'il faudrait l'enlever.
Code:
style="background-image: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png); background-repeat:no-repeat; min-width:300px; z-index: 5;"
Pour ce qui est de la partie du style, il faut le mettre dans le CSS, pas dans le HTML. Essaye toujours de séparer au maximum l'HTML et le CSS, c'est plus propre Smile!

Code:
<span class="postdetails poster-profile">
    {postrow.displayed.POSTER_AVATAR}<br/><br/>
    <div class="profilinfo">
        <!-- BEGIN profile_field -->
         {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
       <!-- END profile_field -->
         {postrow.displayed.POSTER_RPG}
    </div>
</span>
1ère chose : une balise span est une balise de type "inline", elle ne peut normalement contenir que des balises de type inline aussi, hors tu as dedans du contenu de type "block" (la div par exemple), ce qui n'est pas "propre". N'hésite pas à faire une recherche sur les balises inline et les balises block sur Google pour mieux comprendre ce que je viens de dire. Il faudrait donc remplacer cette span par une div.

Code:
{postrow.displayed.POSTER_AVATAR}<br/><br/>
Tu n'as pas besoin des balises br Smile. Elles servent à faire des retours à la ligne, mais avec le nettoyage du CSS que nous allons faire, tu n'en auras plus besoin. En général, évite d'utiliser br pour faire des espaces entre les 2 éléments, utilise plutôt le CSS en rajoutant une marge là où cela est nécessaire.

Code:
<div class="pseudop"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span></div>
Ce code ci peut être un peu simplifié.
D'abord au tout début tu as :
Code:
<div class="pseudop"><span class="name">
Tu n'as pas besoin de la span supplémentaire, tu peux remplacer cela par ce code (j'ai rajouter la class de la span à la première div) :
Code:
<div class="pseudop name">

Ensuite tu as ceci :
Code:
<a name="{postrow.displayed.U_POST_ID}"></a>
Ce code sert d'ancre pour dire au navigateur où aller quand on clique sur un lien vers un message précis. Dans l'exemple que tu m'as donné, voici comment cela rend : http://forum-test-fuyu.forumactif.org/t3-ma-propre-fiche#3
Normalement le lien amène vers tout en haut du message, mais comme pour toi il est mal placé, cela crée un bug et par défaut la vision est mise au mauvais endroit.

Par "mettre à l'intérieur", j'entendais déplacer ton code à toi pour le mettre entre les balises de la nouvelle div que tu as créée, à la place du commentaire que j'ai mis Wink
Je t'ai fait une explication un peu longue, et je suis surement passée vite sur certains points, n'hésite pas à me poser plus de questions, ne t'inquiète pas tu ne m'embêtes pas du tout ^^.
Pour te simplifier la vie, j'ai essayé de te poster une version plus "propre" :

Code:
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="238">
        <a name="{postrow.displayed.U_POST_ID}"></a> <!-- ancre pour chaque message -->
        <!-- début du profil décalé -->
        <div class="profil-container">
            <div class="postdetails poster-profile">
                <div class="avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profilinfo">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
            </div>
            <div class="pseudop name">{postrow.displayed.POSTER_NAME}</div>
        </div>
        <!-- fin du profil décalé -->

Rajoute dans ton CSS ceci :
Code:
.profil-container {
    position: relative;
    left: -150px; /* profil décalé sur la gauche*/
}

Normalement en faisant comme cela, le seul gros bug que tu dois connaitre est la disparition de l'image de fond + un rapprochement de certains éléments en raison de la disparition des br.
Je code un peu à l'aveugle vu que sur mon forum test le résultat est très différent, donc j'ai pu omettre quelque chose d'important.
Dis moi si cela fonctionne bien. Il est important de nettoyer souvent son code HTML, car après sinon cela devient totalement impossible de s'en sortir, on y comprends plus rien Very Happy
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 19:06
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Oh d'accord 'o' je commence à comprendre un peu mieux.
C'est sois des span sois des div mais faut éviter de mélanger les deux 'o'
Du coup sa marche bien =) je me retrouve donc avec mon profil décalé sur la gauche =D
Du coup le seule soucis me reste l'image du profil a mettre a l'intérieur de mon image.
Du coup j'ai placer le HTML comme ceci:

Code:
.profil-container {
    position: relative;
    left: -150px;
    background-image: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png);
  background-repeat:no-repeat;
  min-width:300px;
  z-index: 5;
}

.postdetails.poster-profile a img{
  margin-top: 0px;
  margin-left: 21px;
  width: 300px;
  height: 300px;
}

.profilinfo{
  width: 189px;
  height: 79px;
  margin-left: 21px;
  overflow: auto;
  z-index: 1;
}

.pseudop{
  text-align: center;
  margin-top: -6px;
  z-index: 1;
}


pour le résultat il faut juste aller sur le lien =3
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 19:27
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Une première piste :

Dans le css ici, enlever le margin left :
Code:
.postdetails.poster-profile a img {
    height: 300px;
    margin-left: 21px;
    margin-top: 0;
    width: 300px;
}

Rajouter sur le css de profil container ceci :
Code:
background-position: top center;
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 19:45
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Voilà qui est fait =D hmmm
je pense qu'il faudrait que je mette l'image du fond en premier plan (donc l'avatar derrière)
puis je met le fond transparent comme ça, on peut voir le personnage
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 19:49
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Oui c'est ce que je pensais faire au départ, c'est pour cela que j'avais mis une div avec la class "avatar".
Dans ton CSS, enlève le code CSS précédent que tu pouvais avoir pour .avatar Smile

Ensuite rajoutes ceci :
Code:
.avatar {
   position: relative;
}

.avatar::after {
    content: ""; display: block; /* ne pas enlever ! */
    width: 300px; height: 300px;
    background: url(http://img11.hostingpics.net/pics/550472Sanstitre3.png) no-repeat; /* remplacer par le lien avec le fond transparent */
    position: absolute;
    top: 0; left: 0;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 19:55
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
sa ma fait un truc chelou à mon image de profil 'o'

voici le CSS:

Code:
.profil-container {
    position: relative;
    left: -150px; 
  background-repeat:no-repeat;
  min-width:300px;
  z-index: 5;
  background-position: top center;
}

.avatar {
  position: relative;
}

.avatar::after {
content: "";
display: block;
width: 300px;
height: 310px;
background: url(http://img11.hostingpics.net/pics/217895PROFIL.png); /* remplacer par le lien avec le fond transparent */
position: absolute;
top: 0;
 
}

.profilinfo{
  width: 189px;
  height: 79px;
  margin-left: 21px;
  overflow: auto;
  z-index: 1;
}

.pseudop{
  text-align: center;
  margin-top: -6px;
  z-index: 1;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 20:06
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Oui, je te vois galérer depuis toutal' sur ton forum test xD

Nihil a écrit:
Dans ton CSS, enlève le code CSS précédent que tu pouvais avoir pour .avatar Smile
En fait, dans ton CSS à un endroit tu as tout cela que tu dois supprimer :
Code:
.avatar {
background-color: #fff;
border: 1px solid #f5f5f5;
width: 50px;
}

.avatar img {
width: 50px;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 20:15
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Probleme Profil Empty
Oui je suis entrain de bidouiller XD sa rentre mais j'ai toujours se foutu carré blanc qui débarque de je ne sais ou lol

css:
Code:
.profil-container {
    position: relative;
    left: -150px; 
  min-width:300px;
  z-index: 5;
  background-position: top center;
}

.postdetails.poster-profile a img{
  margin-top: 0px;
  margin-left: 0px;
  width: 310px;
  height: 320px;
}

.avatar {
  position: relative;
}

.avatar::after {
content: "";
display: block;
width: 300px;
height: 300px;
background: url(http://img11.hostingpics.net/pics/217895PROFIL.png); /* remplacer par le lien avec le fond transparent */
position: absolute;
top: 0;
  background-repeat:no-repeat;

}

.profilinfo{
  width: 189px;
  height: 79px;
  margin-left: 21px;
  overflow: auto;
  z-index: 1;
}

.pseudop{
  text-align: center;
  margin-top: -6px;
  z-index: 1;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 20:28
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Probleme Profil Empty
Quand je regarde dans l'inspecteur d'élément tu as toujours ceci d'actif dans ton CSS :
Code:
.avatar {
background-color: #fff;
border: 1px solid #f5f5f5;
width: 50px;
}

Si tu n'arrives vraiment pas à le trouver et l'enlever, met ceci dans ton CSS :
Code:
.avatar {
  position: relative;
  background: transparent;
  border: none;
}
MessageSujet: Re: Probleme Profil   Probleme Profil EmptySam 05 Avr 2014, 20:48
Revenir en haut Aller en bas
Contenu sponsorisé




Probleme Profil Empty
MessageSujet: Re: Probleme Profil   Probleme Profil Empty
Revenir en haut Aller en bas
 

Probleme Profil

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème avec le profil .
» problème profil
» Problème de profil.
» Problème de profil
» Problème de profil à masquer

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit