Problème avec mes onglets profil (javascript)

[Yunie16]

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
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir !

J'avais posté la semaine passée pour créer des onglets sous le profil dans l'affichage des messages et je pensais que c'était bon mais... pas tout à fait TT

Je m'essplik : le Javascript qu'on m'a donné fonctionne dans le sens où les onglets changent quand je clique sur les boutons, mais deux problèmes se sont présentés après que j'aie mis le sujet en résolu :

1 - Le premier onglet ne veut pas prendre d'overflow. Je pense que c'est la class "active" qui fait conflit et j'ai un Javascript sur un autre forum où l'overflow est directement dans le script, mais je n'arrive pas à le reproduire ici

2 - Les onglets ne fonctionnent que pour le premier posteur du sujet... Si on essaie de cliquer sur les onglets des personnes qui répondent, les onglets disparaissent totalement, comme sur la capture d'écran

Voici mon template pour la zone, avec CSS entre balises style en bas :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
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>

<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script>
   //<![CDATA[
   $(document).ready(function() {
      $('#push-answer').jqm({toTop: true});

      $('#push-bell').click(function () {
         return sendWebPush({TOPIC_ID});
      });

      function sendWebPush(tId) {
         $.get("/ajax_push.php?topicID=" + tId).done(showPushAnswer);
      }

      function showPushAnswer(data) {
         $('#push-answer').html(data).jqmShow();
         $('.jqmOverlay').bgiframe();
         $('#push-answer').bgiframe();
      }
   });
   //]]>
</script>
<!-- END switch_push_direct_send -->

<table class="forumline" border="0" cellspacing="2" cellpadding="0" style="margin:auto;">
   <tr>
          <td><div class="title-top">{TOPIC_TITLE}</div>
         <span class="nav-liens-top">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>
      <td>
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
                          <div class="bttNYU" style="margin-left:270px;margin-top:-60px;"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow" title="{T_POST_NEW_TOPIC}" alt="{L_POST_NEW_TOPIC}">Poster un nouveau sujet</a></div>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
                          <div class="bttNYU" style="margin-left:82px;margin-top:-73px;"><a href="{U_POST_REPLY_TOPIC}" accesskey="r" title="{T_POST_REPLY_TOPIC" alt="{L_POST_REPLY_TOPIC}">Répondre au sujet</a></div>
         <!-- END switch_user_authreply -->
         </span>
                  <!-- BEGIN topicpagination -->
   <div class="pagination-sujet">{PAGINATION}</div>
   <!-- END topicpagination -->
      </td>
      </tr>
</table>

<table class="forumline" border="0" cellspacing="1" cellpadding="0" style="margin:auto;">
   <tr>
          <div class="title-mid"><div class="title">{TOPIC_TITLE}</div><span class="ti-posteur" id="p{postrow.displayed.U_POST_ID}">{postrow.displayed.POSTER_NAME}</span>
                  </div>
      </tr>
      
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
  <tr class="post">
      <td valign="top">
                      <div class="profil_posteur">
                        <div class="pseudo_sujet">
                          {postrow.displayed.POSTER_NAME}
                        </div>
                        <div class="rang-sujet" id="profile-rank">
                          <div class="rank">
                            <div class="rank-img">{postrow.displayed.RANK_IMAGE}</div> {postrow.displayed.POSTER_RANK}
                          </div>
                            </div>
                      <div class="avatar-sujet">
                                      {postrow.displayed.POSTER_AVATAR}
                                    </div>
                                   
                                        <div class="contact" style="margin-top:410px;display:inline;width:200px;height:auto;position:absolute;items-align:center;text-align:center;"> <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>
                        </div>
        <div class="container">
              <div class="container-onglets">
  <div class="onglets active" data-anim="1">Personnage</div>
  <div class="onglets" data-anim="2" style="margin-left:103px;">IRL</div>
</div>
    <div id="contenu1" class="contenu activeContenu">
  <!-- BEGIN profile_field --><dl>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</dl><!-- END profile_field -->
</div>
<div id="contenu2" class="contenu">
    </div>
    </div>
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%">
         <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <td colspan="2"><tr height="100%" valign="top">
                                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -70px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                                  <div class="postbody">
                                      <span class="postdetails">{postrow.displayed.POST_DATE}</span>
                                    <div class="postboutons"><!-- BEGIN switch_likes_active -->
            <div class="fa_like_div">
                  
               <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                  
                  <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
               </button>
               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">

                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->
            </div>
            <!-- END switch_likes_active -->
               <div class="boutons-sujet">
                  {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}
                                      </div></div>
                     <div style="margin-top:45px;">{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>
                  </td>
            </tr>
            
         </table>
      </td>
   </tr>
   
   <!-- BEGIN first_post_br -->
</table>
<hr />
<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="2" 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;">
   <tr>
      <!-- BEGIN topicpagination -->
      <div class="pagination-sujet" style="margin-top:0px;margin-left:700px;">{PAGINATION}</div>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <div class="bttYU" style="margin-left:650px;margin-top:20px;"><span class="gensmall">{S_WATCH_TOPIC}</span></div>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>



<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
   <tbody>
      <tr>
         <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td valign="top">
                        <div class="cattitle">&nbsp;{L_FORUM_RULES}</div>
                     </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="noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:30px;">
<tr>
      <td colspan="2">
         <div class="nav-liens-top" style="margin-left:0px;padding: 0;margin-top:-80px;">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </div>
      </td>
   </tr>   
  <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>
   
</table>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="80%" 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}&nbsp;<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>
function setRankColor() {
    let posts = document.querySelectorAll('.post');
    posts.forEach(post => {
        let coloredElement = post.querySelector('.pseudo_sujet [style^="color:"]');
        if(!!coloredElement){
            let rank = post.querySelector('.rang-sujet');
            rank.style.setProperty("--groupColor", coloredElement.style.color);
        }   
    });
}
setRankColor();
</script>

<style>
.title-top {width:450px;overflow:hidden;height:15px;font-family: 'Overpass Mono', monospace;color:var(--white);font-size:15px;font-weight:bold;text-transform:uppercase;position:absolute;margin-left:-440px;margin-top:-50px;}
.nav-liens-top {display:flex;margin-left:-440px;position:absolute;margin-top:-20px;}
.nav-liens-top a{color:var(--white);font-size:11px;font-weight:300;font-family: 'Overpass Mono', monospace}
.bttNYU {position:absolute;text-align:center;width:140px;height:25px;font-weight:300;text-transform:uppercase;background:var(--degrade);font-size:10px;padding-top:10px;padding-left:20px;padding-right:20px;border-radius:5px;margin-bottom:20px;}
.bttNYU a {color:var(--white);font-size:10px;}
.bttNYU a:hover {color:var(--white);}
.bttYU {margin-top:10px;width:200px;text-align:center;height:25px;font-weight:300;text-transform:uppercase;background:var(--degrade);font-size:12px;padding-top:10px;padding-left:20px;padding-right:20px;border-radius:5px;}
.bttYU a {color:var(--white);font-size:10px;}
.bttYU a:hover {color:var(--white);}
.pagination-sujet{position:absolute;font-family: 'Overpass Mono', monospace;font-weight: 700;  color: var(--yellow);  font-size: 9px;    border-radius: 10px;margin-top:-20px;margin-left:230px;}
.pagination-sujet a {color:var(--white);}
.title-mid {height:85px;width:885px;margin:auto;background:var(--dark);border-radius:10px;color:var(--white);padding-top:15px;padding-left:15px;}
.title {width:8850px;height:50px;overflow:hidden;font-family: 'Waterfall', cursive;font-size:35px;font-weight:bold;padding-left:15px;}
.ti-posteur {font-size:12px;}
.profil_posteur{width:200px}
.rang-sujet {height:30px;margin-top:35px;width:100px;border-radius:5px;background-color:var(--groupColor);overflow:hidden;position:absolute;padding-top:10px;padding-left:100px;}
.rank {font-family: 'Overpass Mono', monospace;text-transform:uppercase;text-align:center;color:var(--white);font-size:20px;margin-left:-60px;}
.rank-img {width:50px;height;auto;float:left;margin-left:-55px;margin-top:-10px;position:absolute;margin-left:-15px;}
.rank-img img {width:50px;height;auto;object-fit:cover;} 
.avatar-sujet {width:190px;height:310px;border:5px solid var(--dark);border-radius:5px;margin-top:80px;position:absolute;}
.avatar-sujet img {width:190px;height:310px;object-fit:cover;position:absolute;}
.contact img {height:20px;width:auto;background:#222;padding:5px;border-radius:5px;}
.pseudo_sujet {width:200px;position:absolute;text-align:center;text-shadow:1px 1px 3px #f2f2f2;margin-top:5px;}
.pseudo_sujet a {font-family: 'Overpass Mono', monospace;text-transform:uppercase;font-weight:bold;font-size:17px;}
.container {position:absolute;margin-top:450px;}
.container-onglets {display:flex;  } 
.onglets {font-family: 'Overpass Mono', monospace;  width: 95px;  height: 25px;  background: var(--dark);  margin-left: 0px;  font-size: 10px;  font-weight: 300;  padding: 7px 10px;  box-sizing: border-box;  text-transform: uppercase;  color: var(--white);  text-align: center;  border-radius: 6px;  position:absolute;  cursor:pointer;  border:none;  box-shadow:none;}
.onglets.active {background-color:#333;}
.contenu {opacity:0;margin-top:30px;position:absolute;display:block;height:125px;overflow:auto!important;width:180px;background:var(--dark);padding:10px;border-radius:6px;}
#contenu1 {overflow:auto!important;}
.contenu dl {color:var(--white); font-size:12px;height:auto;line-height:12px;flex-wrap: wrap;display: flex;}
.contenu dl span {color:var(--yellow);text-transform:uppercase;padding-right:5px;}
.contenu dl:nth-child(1) span {display:none}
.contenu dl:nth-child(1) img {width:100px;height:auto;margin-left:45px;border-radius:5px;}
.activeContenu {opacity:1;animation:fade 0.5s forwards;overflow:auto!important;}
@keyframe fade {from {opacity:0} to {opcity:1}}
.postbody {width:650px;min-height:700px;background:var(--dark);color:var(--white);border-radius:10px;margin-left:3px;}
.postdetails {margin-top:10px;font-size:15px;color:var(--yellow);text-transform:uppercase;}
.fa_like_div{ }
.fa_like, .fa_liked, .fa_dislike, .fa_disliked {  color: var(--white);  background:var(--degrade);  border:none;}
.rep-button, .rep-button:active, .rep-button:focus {    background: var(--degrade);    border: none;    border-radius: 4px;    box-shadow: none;    font-family: Trebuchet MS;    font-size: 12px;    font-weight: 400;    height: 35px;    text-transform: initial;  padding:10px;  border-radius:10px;  width:80px;text-align:center;}
.postboutons {margin-left:390px;margin-top:-50px;}
.postbody {padding: 20px;}
</style>

Le Javascript :

Code:

$(function(){
  $('.onglets').click(function(){
    $('.onglets').removeClass('active');
    $('.contenu').removeClass('activeContenu');
    $(this).addClass('active');
    $('#contenu' + $(this).data('anim')).addClass('activeContenu');
  });
});

Le Javascript de mon autre forum avec l'overflow :

Code:

$(function() {
  $('body').on('click', '.elt-declencheur', function() {
    $(".elt-declencheur").text("Afficher le profil");
    $(".afficher-masquer").slideUp();
 
    if ($(this).next(".afficher-masquer").is(":hidden")) {
      $(this).text("Masquer le profil");
      $(this).next(".afficher-masquer").slideDown(function() {
        $(this).css('overflow', 'auto');
      })
    }
  });
});

Voilà voilà ;; Merci d'avance

[Yunie16]

Bonjour !

Je viens faire un petit up

[Toryudo]

Bonjour !

Olalalala... il y a des bêtises dans ce que je vous ai fourni la dernière fois, j'ai dû abuser sur le chocolat...
Effectivement, s'il y a plus d'un post par page, pour le point 2, ça ne va plus, il faut faire autrement :

Code:

<div class="container">
  <div class="container-onglets">
    <div class="onglets active" data-anim="1">Personnage</div>
    <div class="onglets" data-anim="2" style="margin-left:103px;">IRL</div>
  </div>

  <div class="contenu contenu1 activeContenu">
  <!-- BEGIN profile_field --><dl>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</dl><!-- END profile_field -->
  </div>
  <div class="contenu contenu2">
  </div>
</div>

contenu1 et contenu2 ne doivent plus être des id, mais des class, puisqu'ils se répètent dans chaque profil des messages.
Et pour pouvoir faire en sorte que les boutons onglets des profils ne ferment pas les boutons onglets des autres profils, il faut adapter le Script également :

Code:

$(function(){
  $('.onglets').click(function(){
    let $profile = $(this).parents('.container');
    $profile.find('.onglets').removeClass('active');
    $profile.find('.contenu').removeClass('activeContenu');
    $(this).addClass('active');
    $profile.find('.contenu' + $(this).data('anim')).addClass('activeContenu');
  });
});

Voilà, pour ce point, ça devrait déjà être mieux !
Par contre, je ne comprends pas ce que vous voulez dire par "ne veut pas prendre d'overflow". De mon côté, je vois bien l'overflow sur le cadre :



Je ne peux pas cliquer dessus parce que le contenu2 invisible se trouve par-dessus le contenu1 visible (il faudrait ajouter un pointer-events: none; sur les .contenu et un pointer-events: auto; sur les .activeContenu pour être tranquille), mais je vois bien l'overflow sinon !

[Yunie16]

Bonjour !

Merci pour les réponses !
Les onglets fonctionnent maintenant bien pour les réponses des sujets, mais les pointer-events ne semblent pas marcher, l'onglet 2 ne s'affiche quand même pas. (J'ai tenté en retirant les mentions d'opacité au cas où mais ça ne fait rien)

Pour l'overflow, je vois aussi la barre de défilement, mais c'est impossible de scroller en fait, rien ne bouge ^^'

[Toryudo]

En théorie, les pointer-events auraient dû marcher, j'y arrive quand je teste en direct, mais à la limite, vous pouvez aussi mettre un "display: none;" sur les .contenu et un "display: block;" sur les .activeContenu, ça devrait le faire aussi (et ça fonctionnera peut-être mieux).

On est d'accord, il n'y a pas de texte dans les .contenu2 actuellement ?
En tout cas, pour l'instant, il n'y a pas de raison qu'il y en ait, ça affiche donc juste le cadre sans texte à l'intérieur !

[Yunie16]

J'essaierai ça tout à l'heure, quand je retournerai sur l'ordi

Par contre si il y a du texte, je pense que vous n'avez accès qu'à des messages de l'Admin ? J'avais rempli tout le profil à fond et l'onglet 2 affiche une image et différents champs (pseudo, avatar, crédits etc...), qui étaient bien visibles avant

EDIT : faudrait que je vérifie mon script pour diviser les champs de profil, peut-être que j'avais mis #contenu2 et il faudrait modifier avec un point du coup, je viens de penser à ça !

[Yunie16]

(pardon pour le double post)

Avec les display c'est parfait, l'overflow veut bien fonctionner **

Et le problème d'affichage du deuxième onglet était bien du au changement de l'id par une class

Par contre maintenant l'onglet 2 prend le dessus sur le premier qui ne veut plus s'afficher TT
J'ai rien dit, mettre un display:none et laisser un display:block dans la même div ça fait pas bon ménage visiblement /sort

Du coup je déclare les onglets ENFIN finis, je vous laisse tranquille avec ça ! Merci beaucoup pour votre aide !
(et attention aux chocolats)