Espace indésirable sous le panneau d'administration

[londonfreak]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : plusieurs mois. Depuis le changements de design en Janvier
Lien du forum : http://everymonstertest.forum-canada.com/

Description du problème

Bonjour,

J'ai tenté à maintes reprise de corriger le problème par moi-même mais je n'ai pas réussi. Je viens donc à vous pour de l'aide.

Comme vous pouvez le constater il y a un espacement énorme entre le fin de mon forum et le bas de la page.

À savoir que je travaille sur mon forum de test. Donc n'aller pas sur mon forum en lien dans mon profil (bien qu'il ait le même problème. Après mettre renseigné dans les différentes questions ayant étées résolues, je me suis assurer d'avoir ceci dans mon CSS :

Code:

        body{
      margin-bottom: 0px ;
padding-bottom: 0px;
        margin-top: 0px;
padding-top: 0px;

        }

Mais cela ne change rien du tout.

J'espère bien que quelqu'un pourra m'aider (en fait, je sais que quelqu'un trouvera)

Merci d'avance

[MlleAlys]

Bonjour,

En tant qu'invité sur le forum http://everymonsters.forum-canada.com je ne vois pas l'espace sous les liens de bas de page, juste un espace entre le qeel et les liens, qui est dû au codage du qeel.
Voyez vous l'espace seulement lorsque vous êtes connecté ?

[londonfreak]

Bonjour !

Comme mentionné dans mon premier message - le problème se retrouve sur mon forum de test http://everymonstertest.forum-canada.com/ & non sur le forum mentionné dans mon profil (puisque je change mon design) (:

[MlleAlys]

oh désolée, je pensais que le lien donné dans le message (et non dans le profil) était celui du forum test en question du coup (ce qui aurait été assez logique mais apparemment non ^^")

Je vois cette fois bien le problème avec firefox en tout cas, et le problème semble encore une fois venir du queel, vous pouvez essayer de remettre le qeel par défaut le temps de voir si c'est bien l'origine du problème, et si c'est bien ça fournir le code pour voir d'où ça vient si vous souhaitez ? (surement des histoires de positionnement relatif ?)

[londonfreak]

Bonjour !

Je viens de remarquer que j'avais effectivement mis le mauvais lien (C'est ce qui arrive lorsqu'on a 60 onglets d'ouverts) XD Donc c'est mon erreur à moi, je m'en excuse.

J'ai remis le Qeel régulier et le problème n'y ait pas. J'imagine que c'est à cause du positionnement de mes divers éléments de Qeel. Cependant, je ne peux pas vraiment les positionner autrement...

Voici mon template :

Code:

{JAVASCRIPT}
        <!-- BEGIN message_admin_index -->
        <table 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 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">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <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>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <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>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</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">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <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>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <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>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->


<center>
                                                                        
                                                                                                                                  
<div class="queel">  <div class="qeelback">
     <script type="text/javascript">
            //<!--
                    function change_qeelonglet(name)
                    {
                            document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                            document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                            document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                            document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                            anc_qeelonglet = name;
                    }
            //-->
          </script>

            <div class="contenu_qeelonglets"><center>
            <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe3"><div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://31.media.tumblr.com/c2fe202157c262fcc6de3fb80320b6e3/tumblr_naj1x8infl1tjeclto2_250.gif" style="width:50px; border-radius: 100px;" />
                  </div>Plusieurs créatures mythologiques ont capturées l'attention de plusieurs auteurs, évidemment les lecteurs pensent ces diverses créatures comme étant fictives, mais elles sont bel et bien réelles. Parmi ces créatures, nous retrouvons les Kanima, les banshees et plusieurs autres monstres surnaturels, comme les wendigos. C'est créatures de mythologie vivent une courte vie, comme la plupart des humains régulier de cette planète, mais elles ont des capacités dignes des plus grands films de magie de l'univers, qui les distingue des simples mortels.  </div>
           
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe2">­<div style="float: left; padding-left: 10px; padding-right:10px;">
                  <img src="https://38.media.tumblr.com/aa6e1a2ae99a763f92a491207cf5940a/tumblr_n80nfq5EQL1shsenao4_250.gif" style="width:50px; border-radius: 100px;" /> </div>Ce groupe regroupe toute les créatures du même type que les loup-garou fonctionnant de la même façon. Il existe sur cette terre, des coyotte-garou, des chat-garou ou alors des chien-garou. Ce sont des créatures généralement de meutes et qui ont une certaines hiérarchies, au top de cette hiérarchie nous retrouvons les Alphas. Il est possible pour des béta de type were-creatures de vouer une allégeance à un Alpha d'un autre type</div>

              <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe1"><center><img src="http://img11.hostingpics.net/pics/890776lesgroupes.png" style="width: 180px;"></center></div>
           
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe4"><div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://24.media.tumblr.com/17439f0b49de62a7cd7b3df1a928d917/tumblr_mnunulUSQw1qkwee2o2_250.gif" style="width:50px; border-radius: 100px;" />
                  </div> Les Alphas peuvent prendre une forme animal en arrivant à contrôler une très grosse puissance qui provient de leur étincelle d'Alpha. Plus ils arrivent à "gérer" une grosse partie de cette puissance, plus ils sont fort. Si ils n'arrivent pas à la contrôler, ils restent transformé. Il y a différents types de modifications d'apparence qui dépend de la puissance qu'ils puisent dans cette étincelle. Il y a plusieurs type d'Alpha, les loup-démon, les tyrans, les Alpha voltron ainsi que les vrais Alpha.</div>

                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe5"><div style="float: left; padding-left: 10px; padding-right:10px;"><img src="http://31.media.tumblr.com/89b9e04d0f580878826b8c46c93094a9/tumblr_mwaotnKbin1qbngkjo2_250.gif" style="width:50px; border-radius: 100px;" />
                     </div>Qui aurait cru qu’une créature telle que l’être humain aurait survécu dans ce monde dangereux ? En effet, la civilisation telle que nous la connaissons ne serait rien sans ces êtres intelligents et débrouillards. Bien que souvent guidés par la vengeance, les hommes sont travaillant et surtout étaient autrefois réputés pour leur instinct de survie. Aujourd’hui, très peu d’êtres humains croient à l’existence des créatures surnaturelles. </div>
           
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe6">   <div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://25.media.tumblr.com/773483042bf281f63b4f9c85ab1f7b34/tumblr_mhaouxr2HK1r8y3aso1_250.gif" style="width:50px; border-radius: 100px;" />
                     </div>Il existe dans ce monde, au moins deux types de chasseurs. Il y a les chasseurs qui, depuis des générations transmettent leurs connaissances et leurs vécus à leurs descendants afin qu’ils deviennent à leurs tours, des chasseurs et nous avons aussi, ceux qui le deviennent suite à une mauvaise expérience avec les créatures surnaturelles.</div>

                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe7">   <div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://indipepper.com/wp-content/uploads/2014/07/blog.gif" style="width:50px; border-radius: 100px;" />
                     </div>
Les fantômes, les extraterrestres, les vampires, les sorciers, les loups-garous et toutes les autres créatures surnaturelles qui font partie de notre littérature et imaginaire collectif, les True Believers croient qu’ils existent tous. Ce sont des humains comme les autres, la seule chose qui les différencie des humains normaux est que certains souhaiteraient devenir une créature surnaturelle, alors que la plupart seraient heureux simplement d’avoir la preuve de l’existence de ces « monstres ». Les plus extrémistes souhaiteraient devenir un loup-garou ou apprendre à faire de la magie, comme les druides, et ce pour les mauvaises raisons (une vengeance personnelle, par exemple). </div>
 <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe8">   <div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://38.media.tumblr.com/aa18722e90e6bbae3bb85dddd9898e26/tumblr_nbe9cqQX0z1qe7736o1_500.gif" style="width:50px; border-radius: 100px;" />
                     </div>Dans ce monde, il y a de tout. Des loup-garou, des chasseurs, de simples humains, mais il y a également des monstres de tout genre. Évidemment, il n'est pas question de vampires buveurs de sang, mais de sirènes et de Pheonix par exemple. Ces gens peuvent être bon ou mauvais ou alors neutres et sont probablement vos voisins ou compagnons de chambrée</div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe9">   <div style="float: left; padding-left: 10px; padding-right:10px;">
                         <img src="http://24.media.tumblr.com/85c3e1b18b0f7c23f97984dddf41dea6/tumblr_mvkdweb4rW1rtaj7po1_250.gif" style="width:50px; border-radius: 100px;" />
                     </div>Les druides sont des humains assez particuliers! La plus grande majorité d'entre eux connaissent le surnaturels et savent se défendre contre la plupart des créatures de ce monde. Les druides sont des guides et agissent comme conseillers dans les meutes de loups-garous, ils peuvent également être émissaires pour les autres créatures. Les druides permettent aux loups de conserver une connexion avec leur humanité. Parfois, leur identité est cachée aux membres de la meute et n'est connue que de l'Alpha. Quand un druide s'égare, le chêne sage devient alors un chêne obscur. En gaélique, il prend alors le nom de Darach.</div>

              </center>
    </div>
  <div class="qeelonglets"><nobr>
              <center>          <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe1" onclick="javascript:change_qeelonglet('groupe1');"><img src="http://img11.hostingpics.net/pics/187866groupe.png" style="width:30px; border-radius: 100px;"></span>
                        <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe3" onclick="javascript:change_qeelonglet('groupe3');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
                                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe9" onclick="javascript:change_qeelonglet('groupe9');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe2" onclick="javascript:change_qeelonglet('groupe2');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
  <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe7" onclick="javascript:change_qeelonglet('groupe7');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
                  </nobr> </div>
                              <div class="qeelonglets"><nobr>
                <center><span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe4" onclick="javascript:change_qeelonglet('groupe4');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe5" onclick="javascript:change_qeelonglet('groupe5');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
                                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe6" onclick="javascript:change_qeelonglet('groupe6');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>
  <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe8" onclick="javascript:change_qeelonglet('groupe8');"><img src="http://illiweb.com/fa/pbucket.gif" style="width:30px; border-radius: 100px;"></span>

                                </center> </nobr> </div>
 
        <script type="text/javascript">
            //<!--
                    var anc_qeelonglet = 'groupe1';
                    change_qeelonglet(anc_qeelonglet);
            //-->
            </script>
                  <div class="infoqeel"><span id="alpha">
      {LOGGED_IN_USER_LIST}</span>
                <script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés :/,"Attention à toi, il y a beaucoup de créature surnaturelle qui rode ici, a ta place je ferais attention, on ne sait jamais! À Beacon hill aujourd'hui tu pourrais croiser :");</script>
               
      </div>
                 
                        <div class="kiqui">
                                  La vie des habitants de Beacon Hills est très mouvementée, mais ils trouvent toujours le temps d'assister au match de Lacrosse du lycée ou de l'université.<div style="width: 480px; height: 200px; overflow: auto;"> <table id="kaboum" style="width: 480px;">{L_CONNECTED_MEMBERS}
                                                                          <br/><script type="text/javascript">
    jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ',' Ceux qui était présent au dernier match de lacrosse qui a eu lieu hier -  donc, depuis 24h, sont  '));
                                  </script></div></table>
               

                  </div>
                                  </div>
                                  <div class="infoqeel2">
               À Beacon Hills ont ne retrouve pas uniquement de licornes et de phénix mais bien de loup-garou et de nogistunes...<span id="bert">{TOTAL_POSTS}
                                          </span>   <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/," Jusqu'a présent ").replace(/message/,"rapports d'incidents ont étés complétés par");
                </script> <span id="matt">{TOTAL_USERS}
                </span>
                    <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"les").replace(/membres enregistrés/," habitants de la petite ville.");
                                          </script><br /><br/><center> {TOTAL_USERS_ONLINE}<br /></center>
                                      <br/>  <br/><center> <span id="yosh">{NEWEST_USER}</span>
                <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La prochaine personne que nous sacrifirons au Nemeton est");
                                          </script></center>
               </div>
      
                                 
         <div class="partqeel"><marquee scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
    <a href="http://img4.hostingpics.net/pics/857897boutoo.png"><img src="http://illiweb.com/fa/pbucket.gif"></a>    <a href="http://img4.hostingpics.net/pics/857897boutoo.png"><img src="http://illiweb.com/fa/pbucket.gif"></a>    <a href="http://img4.hostingpics.net/pics/857897boutoo.png"><img src="http://illiweb.com/fa/pbucket.gif"></a>    <a href="http://img4.hostingpics.net/pics/857897boutoo.png"><img src="http://illiweb.com/fa/pbucket.gif"></a>    <a href="http://illiweb.com/fa/pbucket.gif"><img src="http://illiweb.com/fa/pbucket.gif"></a>    </marquee>
      <br/><center><a href="http://everymonsters.forum-canada.com/f40-every-king-needs-a-queen">Nos partenaires</a><d2>➳</d2> <a href="http://everymonsters.forum-canada.com/t70-instruction-fiche">Vous ?</a></center>
</div>   
     
      <div class="topqeel"><center>
<a href="http://www.root-top.com/topsite/topsitecranberry/in.php?ID=143"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=22567"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=9267"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/korben/in.php?ID=13756"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><br><a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=11146"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/kissofdeath/in.php?ID=68"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/hoglard/in.php?ID=5167"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a><a href="http://www.root-top.com/topsite/buffy/in.php?ID=2031"><img src="http://img11.hostingpics.net/pics/287437topp.png" style="width: 38px;"></a>
  </center>  </div> </div></div>       
<!-- 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}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

et voici mon CSS (Je ne suis pas un experte en css et html - d'ailleurs ça se voit bien avec mon qeel plein de rouge....)

Code:

.qeelback{
     background-image: url('http://img11.hostingpics.net/pics/973353FONDQUEEL.png');
   width: 860px;
   height: 680px;
   background-repeat:no-repeat;
  margin-top: 0px;
}



.qeelonglet
   {
   padding: 6px;
   cursor: pointer;
   font-family: 'Shadows Into Light Two', cursive;
   font-size: 13px;
   color: #c2ae91;
   top: 100px;
   position: relative;
   }

.qeelonglet_1
   {
   color: #c2ae91;
   }
         
.contenu_qeelonglet
   {
   display: none;
   height: 140px;
  position: relative;
  top: 90px;
   width: 220px;
   overflow: auto;
   text-align: justify;
   font-family: arial;
   font-size: 11px;
  color: #c2ae91;
   }


.infoqeel
   {
width: 205px;
   height: 200px;
   left: 260px;
   top: -130px;
   font-size: 10px;
     position: relative;
   text-align: justify;
   overflow: auto;

   }

.kiqui{
   width: 480px;
   height: 260px;
   position: relative;
   right: -120px;
   top: -60px;
   font-size: 10px;
   text-align: justify;
   overflow: auto;}
   
.infoqeel2{   width: 205px;
   height: 220px;
   position: relative;
     left: -295px;
     top: -590px;
     font-size: 10px;
     text-align: justify;
   }

#kaboum.row1
   {
   background-color : transparent;
   color: #c2ae91 !important;
     width: 480px;
   }



.partqeel {
   width: 460px;
     height:100px;
  position: relative;
  top: -300px;
  left: -30px;
  font-size: 9px;
}

   
.topqeel{
width: 200px;
height: 250px;
  color: #556672;
  font-size: 25px;
  position: relative;
  top: -600px;
  right: 300px;
}


Encore une fois désolée, je vais aller éditer mon message pour mettre la bonne adresse.

[MlleAlys]

les positionnements relatifs ne servent sauf exceptions qu'à décaler légèrement un élément de sa position d'origine, et non le changer complètement de place ^^" Donc des 600px ou -300px de déplacement en position relatives (ou en marges aussi d'ailleurs ^^) doivent interpeller tout de suite ^^

Dans votre cas ici, vous pourriez soit coder un tableau afin que les éléments soient déjà presque à leur place, et ensuite préciser avec des marges et padding, puis si besoin seulement décaler légèrement leur affichage avec des positions relatives.

Ou alors, deuxième solution possible, bien fixer les dimensions du cadre avec le fond, ce qui est fait ici, et dimensionner et positionner tous les cadres intérieurs par rapport à celui-ci avec des positions absolues (et non relatives).

A retenir en tout cas : si l'élément est (presque) à sa place dès le début, ou le plus simple possible, ça facilite grandement les choses et l'affichage par les différents navigateurs à d'autant moins de chances de différer ! ^^

Si vous n'avez pas le courage de reprendre le codage du qeel, on peut ici éviter l'espace en dessous du cadre en ajoutant "overflow:hidden;" dans le css de .qeelback (ce qui dépasse du cadre est "caché"), ce qui donne le css :

Code:

.qeelback {
  background-image: url('http://img11.hostingpics.net/pics/973353FONDQUEEL.png');
  width: 860px;
  height: 680px;
  background-repeat:no-repeat;
  margin-top: 0px;
  overflow: hidden;
}
.qeelonglet {
  padding: 6px;
  cursor: pointer;
  font-family:'Shadows Into Light Two', cursive;
  font-size: 13px;
  color: #c2ae91;
  top: 100px;
  position: relative;
}
.qeelonglet_1 {
  color: #c2ae91;
}
.contenu_qeelonglet {
  display: none;
  height: 140px;
  position: relative;
  top: 90px;
  width: 220px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 11px;
  color: #c2ae91;
}
.infoqeel {
  width: 205px;
  height: 200px;
  left: 260px;
  top: -130px;
  font-size: 10px;
  position: relative;
  text-align: justify;
  overflow: auto;
}
.kiqui {
  width: 480px;
  height: 260px;
  position: relative;
  right: -120px;
  top: -60px;
  font-size: 10px;
  text-align: justify;
  overflow: auto;
}
.infoqeel2 {
  width: 205px;
  height: 220px;
  position: relative;
  left: -295px;
  top: -590px;
  font-size: 10px;
  text-align: justify;
}
#kaboum.row1 {
  background-color : transparent;
  color: #c2ae91 !important;
  width: 480px;
}
.partqeel {
  width: 460px;
  height:100px;
  position: relative;
  top: -300px;
  left: -30px;
  font-size: 9px;
}
.topqeel {
  width: 200px;
  height: 250px;
  color: #556672;
  font-size: 25px;
  position: relative;
  top: -600px;
  right: 300px;
}

[londonfreak]

Oh wow!!
Merci beaucoup avec le overflow hidden tout fonctionne ♥

Je comprends beaucoup mieux la différence entre positionnement relatif et absolue et je crois que je vais refaire mon codage plus tard !

Merci beaucoup & encore une fois désolée d'avoir mis le mauvais lien.