Remonter l'affichage du profil

[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

Bonjour o/

Comme vous pouvez le voir sur la capture d'écran, j'ai un espace énooooooorme entre la PA et l'affichage du profil, que je ne comprends pas trop... Je ne trouve rien dans le template qui pourrait arranger ça, je sais pas trop quoi faire ? Pour afficher la PA en haut du forum j'avais déplacé des scripts et tout mais ici le code du profil est le premier élément du template donc je sais pas trop quoi faire ;;

Voilà le template en question :

Code:

<table class="forumline" border="0" cellspacing="1" cellpadding="0" align="center">
<div class="profilebyYU">
  <table>
  <tr><td><div class="profile-ava">
    {AVATAR_IMG}
    </div>
    </td>
    <td><div class="profile-cadre">
      <div class="profile-pseudo">{USERNAME}
      </div>
      <div class="profile-img">
      </div>
      <div class="profile-rank" id="profile-rank"><div class="rank">{POSTER_RANK}</div></div>
      </div>
      <div class="profile-links">
      </div>
      <div class="profile-deco"></div>
            <div class="infos-profile">
        <!-- BEGIN profile_field -->
        <dl id="field_id{profile_field.ID}"><span>{profile_field.LABEL}</span>{profile_field.CONTENT}</dl>
        <!-- END profile_field -->
      </div>
    </td>
    <td><div class="profile-topics"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
      <div class="profile-msg"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div>
      <div class="profile-co"><div><span>{L_LAST_VISITED} :</span><br />{LAST_VISIT_TIME}</div></div>
      <div class="profile-illu">
      </div>
    </td></tr>
  </table>
  </div> 
</table>
<br />

 <script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.profile-rank').css("background-color", color);});});//]]></script>


<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
      $('[id^=field_id]').each(function(){
        if ( $(this).find('.field_editable').is('span, div') )
        {
            $(this).hover(function()
            {
              if( $(this).find('.field_editable.invisible').is('span, div') )
              {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                    }).click(function(){
                    $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                    $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                    }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                          var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                          if ( (type_special && $(this).is(':checked')) || !type_special )
                          {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                          }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                          "{U_AJAX_PROFILE}",
                          {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                          function(data){
                              $.each(data, function(i, item){
                                $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                          },
                          "json"
                        );
                    });
                    $(this).remove();
                  });
              }
            },function()
            {
              if( $(this).find('.field_editable.invisible').is('span, div') )
              {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
              }
            });
        }
      });
  });
//]]>
</script>

<style>
.profilebyYU {width:900px;height:320px;}
.profile-ava {height:306px;width:200px;}
.profile-ava img {border: 7px solid var(--dark);border-radius:5px;height:306px;width:200px;}
.profile-cadre {height:320px;width:695px;background:var(--dark);border-radius:5px;position:absolute;margin-left:15px;margin-top:-153px;}
.profile-pseudo {font-family: 'Overpass Mono', monospace;width:260px;height:45px;position:absolute;text-transform:uppercase;font-weight:bold;font-size:25px;margin-top:35px;margin-left:30px;text-align:center;}
.profile-img {height:40px;width:70px;border-radius:6px;object-fit:cover;margin-left:290px;position:absolute;margin-top:10px;}
.profile-img img {height:40px;width:70px;border-radius:6px;object-fit:cover;}
#field_id1 {width: 100% !important;}
#field_id1 span{display:none;}
#field_id1 .field_uneditable{display: flex;}
.profile-rank {width:260px;height:60px;border-radius:5px;background-color:#000;overflow:hidden;position:absolute;margin-top:85px;margin-left:30px;padding-top:20px;padding-left:70px;}
.rank {font-family: 'Overpass Mono', monospace;text-transform:uppercase;text-align:center;color:var(--white);font-size:35px;font-weight:300;}
.rank img {width:100px!important;height;auto;object-fit:cover;float:left;margin-left:-60px;margin-top:-70px;}
.infos-profile {box-sizing: border-box;width:375px;height:110px;padding:10px;background-color:#222;border-radius:5px;color:var(--white);overflow:auto;position:absolute;margin-top:25px;margin-left:43px;}
.infos-profile dl {color:var(--white); font-size:12px;height:auto;line-height:12px;flex-wrap: wrap;display: flex;}
.infos-profile dl span {color:var(--yellow);text-transform:uppercase;}
.profile-deco {height:140px;width:20px;background:var(--degrade-vert);border-radius:5px;position:absolute;margin-left:390px;margin-top:-127px;}
.profile-topics {width:125px;height:23px;background:var(--degrade);border-radius:5px;position:absolute;text-align:center;padding-top:7px;margin-left:430px;margin-top:-120px;}
.profile-topics a {color:var(--white);text-transform:uppercase;font-weight:bold;padding:auto;}
.profile-topics a:hover {color:var(--white);}
.profile-msg {width:125px;height:23px;background:var(--degrade);border-radius:5px;position:absolute;text-align:center;padding-top:7px;margin-left:560px;margin-top:-120px;}
.profile-msg a {color:var(--white);text-transform:uppercase;font-weight:bold;padding:auto;}
.profile-msg a:hover {color:var(--white);}
.profile-co {height:85px;width:255px;position:absolute;text-align:center;color:var(--white);margin-left:432px;background:transparent;margin-top:-75px;padding-top:25px;}
.profile-co span {font-size:25px;font-weight:400;text-transform:uppercase;}
.profile-illu {height:110px;width:250px;border-radius:6px;object-fit:cover;position:absolute;margin-top:10px;margin-left:430px;}
.profile-illu img {height:110px;width:250px;border-radius:6px;object-fit:cover;}
#field_id2 {width: 100% !important;}
#field_id2 span{display:none;}
#field_id2 .field_uneditable{display: flex;}
</style>

Merci d'avance

[Toryudo]

Bonjour !

Il n'y a pas d'erreur de structure de le code, mais par contre, il y a quelque chose que le navigateur ne comprend pas dans le HTML.
C'est l'enchainement <table><div><table> qu'il a un peu de mal à avaler, et au rendu, il fait un peu n'importe quoi :



Il fait comme si :
- le div #profilebyYU se ferme tout de suite et est vide (d'où le grand espace vide, puisque l'élément en question a un height:320px;)
- la table .forumline se ferme tout de suite et est vide
- enfin, il fait le rendu du deuxième tableau, qui lui, contient tout

Il vaut mieux éviter ce genre d'enchainement avec les table, préférer une correction comme celle-ci :

Code:

<div class="profilebyYU">
  <table class="forumline" border="0" cellspacing="1" cellpadding="0">
  <tr><td><div class="profile-ava">
    {AVATAR_IMG}
    </div>
    </td>
    <td><div class="profile-cadre">
      <div class="profile-pseudo">{USERNAME}
      </div>
      <div class="profile-img">
      </div>
      <div class="profile-rank" id="profile-rank"><div class="rank">{POSTER_RANK}</div></div>
      </div>
      <div class="profile-links">
      </div>
      <div class="profile-deco"></div>
            <div class="infos-profile">
        <!-- BEGIN profile_field -->
        <dl id="field_id{profile_field.ID}"><span>{profile_field.LABEL}</span>{profile_field.CONTENT}</dl>
        <!-- END profile_field -->
      </div>
    </td>
    <td><div class="profile-topics"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
      <div class="profile-msg"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div>
      <div class="profile-co"><div><span>{L_LAST_VISITED} :</span><br />{LAST_VISIT_TIME}</div></div>
      <div class="profile-illu">
      </div>
    </td></tr>
  </table>
</div>
<br />

[Yunie16]

Re-bonjour

Oooohhh je savais pas du tout que ça faisait ça ! Merci, j'apprends des choses c'est cool, je ferai attention à ça dorénavant !
C'est tout bon du coup, merci beaucoup !