Feuille de personnage en hover qui se glisse sous le profil suivant

[avya]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la mise en place du code.
Lien du forum : https://therisetest.forumactif.com/

Description du problème

Bonjour à touuuus !

Voilà, je viens solliciter votre aide pour un soucis de code, s'il vous plaît.
Dans l'affichage de mes profils dans les messages, la feuille de personnage est en hover. Lorsqu'on appuie sur "OPEN" pour la faire apparaître, elle se glisse sous l'avatar du membre d'en-dessous plutôt que d'apparaître en entier...
J'aimerai bien que lorsqu'on la déroule elle apparaisse en entier, et que du coup elle agrandisse la longueur du profil selon sa longueur à elle.

Je ne sais pas si je suis assez claire mais en tout cas merci pour votre aide !

Bonne journéééée

[MlleAlys]

Bonjour,
La hauteur n'est pas prise en compte parce que votre bloc profil est en position absolue, donc complètement sorti du flux. C'est ce qui permet cet effet "à côté" du tableau, mais du coup c'est comme s'il ne faisait plus vraiment partie de la structure de la page.
Il faut modifier le css pour éviter cette position absolue.
Pourriez vous fournir votre template et votre css ?

[avya]

Ooooh d'accord je vois !
Merci pour votre réponse !

Voici la partie de mon CSS:

et mon template:

Bonne soirée

[MlleAlys]

Alors il y aura peut être des petits réglages à faire, mais essayez ceci :

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(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
  
    _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%" align="center" border="0" cellspacing="0" cellpadding="0" style="max-width:750px !important;">
<tr><td align="left" valign="bottom"><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="right" valign="middle"><!-- BEGIN switch_user_logged_in --><!-- BEGIN watchtopic --><span class="gensmall">{S_WATCH_TOPIC}</span><!-- END watchtopic --><!-- END switch_user_logged_in --> <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>
<tr><td colspan="2"><div id="tlePOST"><h1 class="cattitle">{TOPIC_TITLE}</h1><span class="navPOST" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->{NAV_CAT_DESC_SECOND}</span></div>
</td></tr>
</table>

<table class="forumline" width="100%" align="center" border="0" cellspacing="0" cellpadding="0" style="max-width:750px !important;">
 <!-- BEGIN topicpagination -->
 <tr><td class="pagination" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td></tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <tr><td class="postdetails" 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 {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <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 style="height:5px;"></div>
</td></tr>
  
<tr><td valign="top">
 <div class="postbody"><a name="{postrow.displayed.U_POST_ID}" style="position:relative; top:30px; width:1px;" id="{postrow.displayed.U_POST_ID}"></a>
<div class="datePOST"><span style="display:inline-block; vertical-align:middle; width:50%;"><img src="{postrow.displayed.MINI_TIME_IMG}" border="0" />{postrow.displayed.POST_DATE}</span><span style="display:inline-block; vertical-align:middle; width:50%; text-align:right; line-height:0;">{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}</span></div>
 <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="signPOST">{postrow.displayed.SIGNATURE}</div>
 <!-- END switch_signature -->
 </div>
 </td></tr>
 
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle">
 <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
 </td>
 </tr></table></td>
 
 <td valign="top">
  
   <!-- début affichage du profil du posteur -->
   <div class="profilPOST">
     <div class="boxPOST">
      
     <div class="namePOST">
       <strong>{postrow.displayed.POSTER_NAME}</strong>
       <span class="rankPOST">{postrow.displayed.POSTER_RANK}</span>
     </div>
     <div class="contentPOST">
       <div class="avaPOST">{postrow.displayed.POSTER_AVATAR}</div>
       <div class="ktactPOST">
         <div style="display:none;">{postrow.displayed.POSTER_NAME}</div>
         {postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}{postrow.displayed.EMAIL_IMG}
         <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
       </div>
       <div class="abtPOST">
         <!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field -->
       </div>
       <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div>
       <div class="rpgPOST" style="display:none;">
         {postrow.displayed.POSTER_RPG}
       </div>
     </div>
     <div class="triPOST">
       <div class="grpPOST">
         <div style="display:none;">{postrow.displayed.POSTER_NAME}</div>
       </div>
       <script type="text/javascript">$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.grpPOST, .ktactPOST').css("background-color", color);});});</script>
     </div>
      
     </div>
   </div>
   <!-- fin affichage du profil du posteur -->
  
 </td>
  
  </tr>
 <!-- BEGIN first_post_br -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center"><td colspan="3" height="28"><span class="genmed">{no_post.L_NO_POST}</span></td></tr>
 <!-- END no_post -->
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:auto; max-width:750px !important;">
<tr>
<td valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination --><td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td><!-- END topicpagination -->
</tr>
</table>

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" width="100%" style="max-width:750px !important;" border="0" cellspacing="0" cellpadding="0">
    <tr><td valign="top" colspan="2"><div class="cattitle">{L_FORUM_RULES}</div></td></tr>
    <tr>
    <td class="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>
    </table>
    <!-- END switch_forum_rules -->

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table width="100%" style="margin-top:5px; max-width:750px !important;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><td align="left" valign="middle" {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>

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

    <!-- 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%" style="max-width:750px !important;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><td colspan="2" align="right" valign="top" nowrap="nowrap"><span style="display:inline-block; vertical-align:middle;">{S_TOPIC_ADMIN}</span>
    <form name="action" method="get" action="{S_FORM_MOD_ACTION}" style="display:inline-block; vertical-align:middle;">
    <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">{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
    </form>
    </td></tr>
    </table>
    <!-- END viewtopic_bottom -->
 
    <table class="forumline noprint" style="max-width:750px !important;" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td 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>
    </table>
 
    <!-- 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>

Code:

/************************************************AFFICHAGE SUJET + PROFILS***************************************************/
/* PRESENTATION DU SUJET */
/* BLOC TITRE SUJET */
#tlePOST {
margin:5px auto; padding:10px 0;
text-transform:uppercase; text-align:center;
background:#373535; /* MODIFIABLE */
}
/* TITRE SUJET */
#tlePOST h1 {
display:block; font-size:32px;
color:#eceaed; /* MODIFIABLE */
}
/* NAVIGATION */
.navPOST {
display:block; margin:5px auto 0; width:98%;
padding:2px 0; font-size:10px;
background:#eceaed; /* MODIFIABLE */
}
/* LIENS NAVIGATION */
.navPOST a {
color:#8c2c2b; /* MODIFIABLE */
}
/* BLOC DATE & OUTILS DE MODERATION */
.datePOST {
margin-bottom:10px; padding:10px; font-size:11px;
background:#373535; color:#eceaed; /* MODIFIABLE */
}
/* APPARENCE MESSAGE */
div.postbody {
  max-width:730px;
  min-height:470px;
  padding:10px;
  background: #eceaed;
  border: 1px solid #c6c6c6; /* MODIFIABLE */
  text-align:justify;
}
div.postbody img {
  max-width:100%;
}
.signPOST br:nth-of-type(1) {
  display:none;
}


/* PROFIL JOUEUR */
.profilPOST {
  width: 0;
  overflow: visible;
}
.boxPOST {
  position: relative;
  top: 5px;
  width: fit-content;
  padding: 0 10px;
}

/* PSEUDONYME */
.namePOST {
  position: absolute;
  text-transform: uppercase;
  font-family: Arial;
  transform: rotate(90deg);
  transform-origin: bottom left;
  left: 100%;
  top: 0;
  white-space: nowrap;
}

/* TEXTE RANG */
.rankPOST {
  padding-left: 10px;
  font-size: 12px;
  font-family: calibri;
  color: black;    /*MODIFIABLE*/
}
/* BLOC AVATAR & INFORMATIONS JOUEUR */
.contentPOST {
  width: 210px;
  box-sizing: border-box;
  padding:5px;
  font-size:10px;
  font-family:Arial;
  background:#373535;
  color:#c6c6c6;  /* MODIFIABLE */
}
/*AVATAR */
.avaPOST img {
  width: 100%;
}

/* BLOC IMAGES CONTACT JOUEUR */
.ktactPOST {
  margin: 5px auto;
  padding: 5px 0;
  text-align: center;
  background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */
}
.ktactPOST img {
  margin:0 2px;
  max-height:20px;
  filter:grayscale(1);
}

/* INTITULES INFORMATIONS JOUEUR */
.abtPOST .label {
  text-transform:uppercase;
  font-weight:bold;    
  color: #eceaed;/* MODIFIABLE */
}
/* IMAGES INFORMATIONS JOUEUR */
.abtPOST img {
  margin:auto;
  max-width:100%;
}
/* FEUILLE DE PERSONNAGE */

.rpgPOST a:nth-of-type(1), .rpgPOST br:nth-of-type(1), .rpgPOST br:nth-of-type(2) {
  display:none;
}
/* LOSANGE GROUPE */
.grpPOST {
  position: absolute;
  width: 15px;
  height: 15px;
  background: grey;   /* MODIFIABLE COULEUR PAR DEFAUT */
  transform: rotate(45deg);
  transform-origin: left top;
  bottom: 15px;
}
/* TRIANGLE BAS PROFIL */
.triPOST {
  width:0; height:0; border-style:solid; border-width:30px 105px 0 105px; border-color:transparent;
  border-top-color:#373535; /* MODIFIABLE */
}
 
/* OUVRIR FEUILLE DE PERSONNAGE SUJET */
.openPOST {
  margin: 10px 0;
  cursor: pointer;
  height: 25px;
  color: transparent;
  background: url(https://images2.imgbox.com/d5/4c/WWS5817b_o.png) center center no-repeat;
  background-size: contain;
}
/* FEUILLE DE PERSONNAGE SUJET */
.rpgPOST {
  margin-top: 10px;
  padding: 10px;
  background:#c6c6c6; /* MODIFIABLE */
  font-size:11px;
  text-transform: uppercase;
  font-family: calibri;
  font-weight: bold;
}
 
.rpgPOST textarea {
  width: 100%;
  box-sizing: border-box;
}

[avya]

Ça fonctionne !
Merci beaucoup, vous êtes super

Je vais pouvoir passer mon sujet en résolu, merci encore !