Problème de Template/QEEL

[Leyaa]

Bonjour, bonsoir !
Je suis entrain de changer entièrement le design de mon forum, et je rencontre pas mal de problèmes au niveau du QEEL.
Voilà enfaite, j'ai changé complètement l'aspect que j'avais avant, et j'ai décidé de mettre une image de fond et de repositionner le texte correctement dessus sauf que BOULETTTE, ca ne marche pas x_x J'ai beau modifier les paddings, les margins, faire des tb, tr et table; rien n'y fait je n'y comprends rien et je m'embrouille !

Voyez par vous-même sur mon forumtest http://spiderfox-forumtest.forumactif.org/, les textes ne sont pas du tout dans les cadres où je veux les mettre et ne sont même pas entiers... Quelqu'un saurait-il par hasard ce qui cloche et pourrait m'aider ?  Je désespère...   

Par la même occasion, voilà le CSS de mon QEEL ainsi que la template !

Code:

        /* --------------------------------- QEEL --------------------------------- */

        /* Fond */
        .fondsgénéraux {
          background-image: url('http://img4.hostingpics.net/pics/606820qeelmrcopie.png');
          border-bottom: 3px #5f1c1c solid;
          border-bottom-left-radius: 30px;
          border-bottom-right-radius: 30px;
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
          background: #1f030a;
          padding-left: 3px;
          padding-right: 3px;
          width: 745px;
          height: 653px;
        }

        .blocqeel {
          width: 220px;
        }

        .blocqeel2 {
          width: 220px;
        }

        .qeel1_description {   
          position: relative;
          z-index: 1;
          width: 270px;
          margin-top: -170px;
          text-align: justify;
          font-size: 11px;
          color: #8c8c8c;
          padding: 15px;
          overflow: auto;
        }

        /* Description des stats */
        .qeel {
        width: 250px;
          height: 173px;
          overflow: hidden;
          color: #767676;
        }

         
        .qeel_description {   
          position: relative;
          z-index: 1;
          width: 220px;
          margin-top: -100px;
          text-align: justify;
          font-size: 11px;
          color: #8c8c8c;
          padding: 15px;
          overflow: auto;
        }


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">
 <!-- 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> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </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> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </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">{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">{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> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </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> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </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="fondsgénéraux"><center><div class="titreqeel1">
</div>
 <br /><br /><table><tr><td><center>
  <div class="qeel"><div class="qeel_description"><br /><span id="bert">{TOTAL_POSTS}
</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont postés un total de/,"Nos membres ont posté un total de").replace(/messages/,"messages.");
</script> <span id="matt">{TOTAL_USERS}
</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Aujourd'hui dans notre monde, nous comptons").replace(/membres enregistrés/,"habitants ");
</script> <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/,"Le dernier a s'être installé ici est");
      </script> <span id="celine">{TOTAL_USERS_ONLINE}.
      </span>
              </div></div><br />
  <div class="blocqeel" style="font-size: 11px; text-align: justify; width: 220px; height: 100px; overflow: auto;"><br />{LOGGED_IN_USER_LIST}
                </div>
  <br />
  </center></td><td width="20px"></td>
  <td><center>><br /><br /><br />
 
    <div class="blocqeel2" style="font-size: 11px; text-align: justify; width: 270px; overflow: auto;"><br />
    {L_CONNECTED_MEMBERS}
    </div>
      <br /></center><br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /></td></tr></table></center></div></center>



<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
{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 -->

Merci énooooormément d'avance !  

[MlleAlys]

Bonjour,
Un autre moyen de positionner des éléments, peut être plus facilement qu'avec des margins et des paddings, est de leur appliquer une position absolue : Appliquez une position:relative; au bloc global qui contiendra les autres, puis utilisez une position:absolute; pour chaque bloc, avec top:$$px: et left:$$px; pour régler la position par rapport au haut et à la bordure gauche du bloc global :

Code:

<!-- BEGIN disable_viewonline -->

<div id="qeel">
   
    <div id="bloc1">
        bloc 1 !
    </div>
   
    <a id="fees" class="groupes" href="LIEN" title="Il m'aime un peu, beaucoup, passionément..."></a>
    <a id="mai" class="groupes" href="LIEN" title="... What's that ? xD"></a>
    <a id="vampires" class="groupes" href="LIEN" title="Sang ! Sang ! Sans trève ni repos !!"></a>
    <a id="sorciers" class="groupes" href="LIEN" title="Abracadabra ! x3"></a>
    <a id="lycans" class="groupes" href="LIEN" title="AHOUUUUUUUUUU Vive la pleine lune !! 8D"></a>
    <a id="humains" class="groupes" href="LIEN" title="Réserve de nouriture, ne pas toucher u.u"></a>
   
    <div id="bloc2">
        bloc 2 !
    </div>
   
    <div id="bloc3">
        bloc 3 !
    </div>
   
</div>

<!-- END disable_viewonline -->

Code:

#qeel {
    height: 653px;
    width: 750px;
    margin:auto;
    background: url(http://img4.hostingpics.net/pics/606820qeelmrcopie.png);
    border-bottom: 3px #5f1c1c solid;
    border-radius: 30px;
    position: relative;
}
#bloc1, #bloc2, #bloc3 {
    position:absolute;
    padding:5px;
    overflow:auto;
    color:white;
}
#bloc1 {
    top: 15px;
    left: 20px;
    width: 190px;
    height: 180px;
}
#bloc2 {
    top: 15px;
    left: 519px;
    width: 190px;
    height: 180px;
}
#bloc3 {
    top: 255px;
    left: 279px;
    width: 293px;
    height: 117px;
}
a.groupes {
    display:block;
    position:absolute;
    height:30px;
    width:115px;
    left:235px;
}
#fees {top:11px;}
#mai {top:46px;}
#vampires {top:78px;}
#sorciers {top:112px;}
#lycans {top:149px;}
#humains {top:185px;}

en image sur l'un des blocs ^^ :


Il reste ensuite à remplir les blocs, et à remplacer "LIEN" pour les groupes par le lien voulu ^^

[Leyaa]

Merci beaucoup, cela a fonctionné ! Problème résolu !