Besoin d'aide pour Coder QEEL

[Leyaa]

Hellow, encore moi ! ^^
Je viens vous demander de l'aide pour l’installation d'un QEEL un peu particulier. Enfaite, ca serait pour mettre une image en fond dans le qeel, cette image contient déja les cadres et tout, et il faudrait déplacer le texte au bon endroit, mais je n'y arrive pas du tout! J'ai vu que mon projet était réalisable en regardant d'autres sujet ^^
Voici l'image en question, ca sera surement plus clair en la voyant ^^ : https://2img.net/r/hpimg11/pics/350048versionfinale.png

Donc comme l'indique les petits titres chaques fois, j'aurais aimé avoir:
Dans le cadre du haut, les groupes
Dans le cadre gauche au milieu, les statistiques (dernier membre inscrits, total de messages, etc)
Dans le cadre droit au milieu, les membres en ligne,
et puis tout en bas les connectés ces 24H.

Voila, merci beaucoup d'avance pour votre aide!

[Leyaa]

Petit Up ^^

[Leyaa]

Up ?

[Leyaa]

Up du jour!

[Leyaa]

Up s'il-vous-plait..

[Leyaa]

Up

[Leyaa]

Up du jour, s'il-vous-plait..

[Leyaa]

Bonsoir,
Comme je ne suis pas du genre à rester sans rien faire & attendre, j'ai essayé, avec plusieurs tutoriels, de faire le QEEL moi même. Le soucis est quand j'arrive au cadre "who is here ?" de mon image, le texte que je n'arrive pas à introduire à l’intérieur. Idem pour le "Présents ces dernières 24H". Voyez par vous même:
De plus, mon QEEL n'est pas très centré.

S'il-vous-plait, quelqu'un peut m'aider à tout bien placer ?


Ah et donc voici le CSS que j'ai ajouté:

Spoiler:

& ma template:

Spoiler:

Merci énormément à celui qui viendra me répondre

[Leyaa]

up

[Leyaa]

Vraiment personne? S'il-vous-plait, je n'y arrives pas!

[Leyaa]

Up

[Leyaa]

Up du jour..

[Leyaa]

S'il vous plait, j'ai vraiment besoin d'aide ><

[Lixyr]

Bonsoir.

Voilà votre template modifié :

Code:

        {JAVASCRIPT}
        <!-- BEGIN message_admin_index -->
    <div class="accueil">
        <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></div>
        <!-- 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" perms="{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>
                <!-- END switch_user_logged_in -->
                <!-- BEGIN switch_delete_cookies -->
           
        <a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
                <!-- END switch_delete_cookies -->
                </span>
              </td>
              <td width="50%" align="right">
                <span class="gensmall">
                    <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>

                    <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

                    <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
                    <!-- BEGIN switch_on_index -->
                      <!-- BEGIN switch_delete_cookies -->
                 
        <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" perms="{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 -->
    <div class="qeel_ombre">
      <center><table class="qeel" width="100%" border="1" cellspacing="0" cellpadding="0">

      <tr>
          <td colspan="2"> <div class="qeelgroupe"><span class="gensmall">


                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g8-clan-du-lion"><font color="#BD2222">Clan du Lion</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g5-clan-du-renard"><font color="#F58625">Clan du Renard</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g9-clan-de-l-aigle"><font color="#66A839">Clan de l'Aigle</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g6-clan-de-l-ours"><font color="#69431B">Clan de l'Ours</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g7-clan-du-loup"><font color="#B8B8B8">Clan du Loup</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g10-clan-du-rat"><font color="#A130D9">Clan du Rat</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g3-clan-du-cerf"><font color="#E6B86A">Clan du Cerf</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g4-clan-de-la-loutre"><font color="#5CB3DB">Clan de la Loutre</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g11-les-sans-totem"><font color="#1A1A17">Sans-Totem</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g1-admins"><font color="#FFFAFA">Fondatrices</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">
                <span class="groupes"><a href="http://silverwood-rpg.bb-fr.com/g2-modos"><font color="#2C2CAB">Modos</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif">

    </span></div></td></tr><br>

    <tr><td align="left" width="25%"> <div class="qeelstats" style="text-align:center;"><span class="gensmall">{TOTAL_POSTS}<br>
              {TOTAL_USERS}<br>
              {NEWEST_USER}<br>
    {TOTAL_USERS_ONLINE}</span></div>
    </td>
    <td style="padding-left:25px;" valign="top"> <div class="gensmall" style="width:52%; height:150px !important;">{LOGGED_IN_USER_LIST}</div>

    </td></tr>

    <tr><td colspan="2" valign="top"><div class="qeel24h">
          <table class="trans" style="margin-top:15px;">{L_CONNECTED_MEMBERS}</table> </div>
    </td></tr></table></center>


        <!-- 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>  </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
        });
        //]]>
        </script>
        <!-- END switch_fb_index_login -->


ainsi que le css modifié :

Code:

    .qeel {
    background-image:url("http://img11.hostingpics.net/pics/350048versionfinale.png");
    background-repeat : no-repeat;
    height : 450px;
    width : 900px;
    }

    .trans .row1 {
    background-color : transparent;
    }


    .qeelgroupe {
    height : 87px;
    width : 380px;
    overflow : auto;
    padding-left : 385px;
    padding-right:102px;
    padding-top:20px;
    margin-bottom : 15px;
    }

    .qeelstats {
    height : 150px;
    width : 170px;
    overflow : auto;
    padding : 10 px;
    margin-bottom : 11px;
    padding-left : 390px;
    }


    .qeel24h {
    height : 61px;
    width : 450px;
    overflow : auto;
    padding : 10 px;

    padding-left : 230px;
    padding-right : 19px;
    padding-bottom : 44px;
    }


j'ai essentiellement modifié le css, et surtout retiré cette partie :

.qeel {
background-image:url("https://2img.net/r/hpimg11/pics/350048versionfinale.png");
background-repeat : no-repeat;
height : 450px;
width : 900px;

padding-left : 390px;
padding-right : 2px;
padding-top : 35px;
padding-bottom : 44px;
}

qui décallait tout obligatoirement à 390px du bord gauche. On aurait donc pas pu centrer le contenu des membres connectés les dernières 24h. J'ai donc rajouté ces mesures dans les classes des cellules et/ou div, afin que le résultat reste le même, et modifié quelques valeurs par-ci par-là.


J'ai, dans le template, rajouté des largeur aux div afin qu'elles ne prennent pas trop de place à l'horizontal. Et rajouté quelques hauteur, afin que le contenu ne dépasse pas des cadres (seulement, pour que ça marche, il faudrait rajouter un scroll. Je vous laisse en décider. )

J'ai aussi rajouté des colspan dans vos cellules, puisque dans la première ligne vous n'avez qu'une cellule :
- les groupes

et dans la deuxième ligne, deux cellules :
- les statistiques
- et les membres connectés

et dans la troisième ligne :
- les membres connectés ces dernières 24h,

j'ai donc rajouté un colspan="2" dans la cellule de la première ligne et de la troisième ligne de sorte qu'elle prenne la même place que les deux cellules de la deuxième ligne, et donc que le contenu de la deuxième cellule de la deuxième ligne ne soit pas hors tableau.
C'était une erreur de codage.


J'ai également, à un moment, remis des balises qui n'étaient pas fermées, comme des span et des div, et remis une fermeture de cellule AVANT la fermeture de la ligne (vous aviez fait l'inverse).


Et ensuite, pour ce qui est de la réelle compréhension du code, et bien il suffit de comparer les deux templates et les deux css : le votre et le mien, et de regarder ce qui diffère. Il n'y a pas grand chose, tout est globalement indiqué dans ce que j'ai précisé au dessus.

Voilà.
Bonne continuation.

[Leyaa]

Merci énormément de m'avoir aidé!

Je l'ai donc mis, et cela me donne ca:



Si je vous ai bien suivi, il faut mettre un scroll ? comme m'y prendre ?

Merci!

[Lixyr]

Et bien, déjà, pour les décalages au niveau des deux cellules, repérez les classes concernées, et rajouter les padding dans le css.

Ensuite, pour le scroll, repérez cette ligne :

<td style="padding-left:25px;" valign="top"> <div class="gensmall" style="width:52%; height:150px !important;">{LOGGED_IN_USER_LIST}</div>

</td>

et rajoutez une scroll :

Code:

overflow:hidden;overflow-x: hidden;overflow-y: auto;

comme ceci :

<td style="padding-left:25px;" valign="top"> <div class="gensmall" style="width:52%; height:150px !important;overflow:hidden;overflow-x: hidden;overflow-y: auto;">{LOGGED_IN_USER_LIST}</div>

</td>

et faite de même avec cette cellule :

<div class="qeel24h">
<table class="trans" style="margin-top:15px;">{L_CONNECTED_MEMBERS}</table> </div>

en insérer la scroll-barre soir dans la table soit dans la div.


Cordialement.

[Leyaa]

Merci beaucoup à vous, tout fonctionne parfaitement!
J'aurais fait pas mal d'erreurs au final, merci de m'avoir aidé!

Sujet résolu!