écart entre header et bordures après modification du index_body

[mzwdaily]

Détails techniques

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

Spoiler:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Le problème est apparu lorsque j'ai modifié index_body pour changer le QEEL. J'ai pourtant diminué la largeur de tout le QEEL qui est en effet réduit, mais l'écart observé entre le header et les bords du forum reste.
Lien du forum : http://whatsuprosehill.forumactif.com

Description du problème

Bonjour,

Comme observé dans la capture d'écart partagée, j'observe un écart entre le header et les bordures de mon forum et ce, depuis la modification de mon index_body . Je pensais qu'il s'agissait de modifier simplement la largeur du QEEL. J'ai tenté en obtenant cela:

Cependant, même quand le QEEL est plus 'étroit', l'espace entre le header et les bordures est resté. Je n'arrive donc pas à comprendre l'origine de mon problème.


Je vous joins TOUT le css du forum :

Spoiler:

ainsi que mon index_body :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400|Montserrat:900|Roboto" rel="stylesheet">
<div id="qeel">
  <div id="qeel-titre"><h2>Qui se promène en ville?</h2></div>
  <div id="qeel-connectes24"><table>{L_CONNECTED_MEMBERS}</table></div>
  <div id="qeel-mid">
  <div id="qeel-dernier"><h3>Bienvenue à Rosehill</h3><div>{NEWEST_USER}</div></div>
  <div id="qeel-groupes">
    <div><a href="https://whatsuprosehill.forumactif.com/g4-dahlia">DAHLIA</a></div>
    <div><a href="https://whatsuprosehill.forumactif.com/g3-daisy">DAISY</a></div>
      <div><a href="https://whatsuprosehill.forumactif.com/g5-lily">LILY</a></div>
    <div><a href="https://whatsuprosehill.forumactif.com/g6-poppy">POPPY</a></div>
    <div><a href="https://whatsuprosehill.forumactif.com/g7-rose">ROSE</a></div>
  </div>
  </div>
  <div id="qeel-right">
  <div id="qeel-stats">{TOTAL_USERS_ONLINE}</div>
  <div id="qeel-connectes">{LOGGED_IN_USER_LIST}</div>
  <div id="qeel-stats2"><div>{TOTAL_POSTS}</div><div>{TOTAL_USERS}</div></div>
  
    <div id="qeel-credits">Crédits : what's up rosehill - codage by <a href="http://terrible.forumactif.org/" target="_blank">awful</a></div>
  </div>
</div>
<div id="index-links">
  <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 <a href="/?mode=delete_cookies" rel="nofollow">Supprimer les cookies du forum</a>
</div>
<script type="text/javascript">
  $('#qeel-stats2').html($('#qeel-stats2').html().replace(/Nos membres ont posté un total de|Nous avons /ig," ").replace(/membre enregistré/,"membre").replace(/membres enregistrés/,"membres"));
  $('#qeel-dernier').html($('#qeel-dernier').html().replace(/L'utilisateur enregistré le plus récent est/ig," "));
  $('#qeel-connectes').html($('#qeel-connectes').html().replace(/Utilisateurs enregistrés : /ig," "));
  $('#qeel-connectes24').html($('#qeel-connectes24').html().replace(/Membres connectés au cours des 24 dernières heures : /ig," "));
  $('#qeel-stats').html($('#qeel-stats').html().replace(/Il y a en tout| :: /ig," ").replace(/utilisateur en ligne/,"<i>utilisateur en ligne</i> <u>>></u>").replace(/utilisateurs en ligne/,"<i>utilisateurs en ligne</i> <u>>></u>").replace(/Enregistré,/,"<i>Enregistré</i> <u>|</u>").replace(/Enregistrés,/,"<i>Enregistrés</i> <u>|</u>").replace(/Invisible et/,"<i>Invisible</i> <u>|</u>").replace(/Invisibles et /,"<i>Invisibles</i> <u>|</u>").replace(/Invité/,"<i>Invité</i>").replace(/Invités/,"<i>Invités</i>"));
</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
 <tr>
 <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NEW_POSTS}</span></td>
 <td></td>
 <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
 <td>&nbsp;&nbsp;</td>
 <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
 <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
 </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

À noter que je ne sais absolument pas coder et que je fais tout à partir de codes libre service et qu'après ça, je tâtonne un peu...


Merci beaucoup de votre aide!

[MlleAlys]

Bonjour,
ça vient de ces liens là, ce sont eux qui élargissent le forum :



Localisez le code css suivant :

Code:

#index-links {
  display: flex;
  justify-content: space-between;
  margin: 10px auto auto;
  width: 900px;
}

Et supprimez la ligne  width: 900px;
Enregistrez.

[mzwdaily]

Ah, j'ai loupé cette valeur!! Merci beaucoup!!!!!