Mise en forme du QEEL

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Mise en forme du QEEL

Message par Leyaa le Lun 29 Juil 2013 - 3:27

Bonjour, Bonsoir !
Décidément ce soir, je ne m'en sors vraiment pas ! Alors voilà. J'ai réalisé un QEEL par mes propres soins, et dont je suis satisfaite. Mais pas tout à fait. Car voilà, une colonne s'affiche mal, et il s'agit de la colonne des derniers connectés. Comme je n'arrive pas très bien a m'expliquer, je vous donne quelques aperçus. Voici mon QEEL actuellement: ici et voilà a quoi je voudrais que la disposition ressemble: ici. Je voudrais donc que le cadre aille jusqu'au bout, et non qu'il s'arrête dans la même colonne que le blabla des statistiques. J'espère avoir été compréhensible ^^

Voici donc mon forum: http://moonlight-rises.forumactif.org/

Voici donc 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">
 <!-- 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>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><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><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><img src="" /></center>
<table width="100%" border="0" cellspacing="5" cellpadding="5" align="center" class="catqeel">
  <tr>
    <td colspan="2" align="center"><img src="http://img11.hostingpics.net/pics/90296765p.png"/>
    <br />
    <a href="http://moonlight-rises.forumactif.org/g4-fairies"><span class="groupes" style="color: #B1D1E8;"> Fairies</span></a>
    <a href="http://moonlight-rises.forumactif.org/g5-mai"><span class="groupes" style="color: #9171B0;"> Maï </span></a>
      <a href="http://moonlight-rises.forumactif.org/g6-vampires"><span class="groupes" style="color: #B04141;"> Vampires</span></a>
      <a href="http://moonlight-rises.forumactif.org/g7-wizards"><span class="groupes" style="color: #A3BF65"> Wizards</span></a>
      <a href="http://moonlight-rises.forumactif.org/g8-werewolves"><span class="groupes" style="color: #7D6740;"> Werewolves</span></a>
        <a href="http://moonlight-rises.forumactif.org/g9-humans"><span class="groupes" style="color: #CCC393;"> Humans</span></a></td>
  </tr>

  <tr>
    <td width="50%" valign="top" align="center" class="statistiques"><span class="gensmall"><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>


      <td width="50%" valign="top" align="center"  class="statistiques"><span class="gensmall"><table cellpadding="0" cellspacing="0"><tr>{LOGGED_IN_USER_LIST}</tr></table>
    </span></td>
      {L_CONNECTED_MEMBERS}



 
<!-- 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 -->

Et le CSS de mon QEEL si besoin:
Code:

        .statistiques {
           border-radius: 4px;
            background: #0b0e17;
      border: 3px solid #112638;
  box-shadow:0px 0px 3px #fff;
        overflow:auto;
        max-height: 150px;
         -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding:10px;
        margin:10px;
        text-align:justify;
        }
        
       .groupes {
            font-size:16px;
        font-weight:bold;
        font-style:italic;
        text-transform:lowercase;
        text-decoration: none!important;
        margin-left: 20px;
        letter-spacing:1px;
          background-color:#112638;
  background-image: url(http://img11.hostingpics.net/pics/712246o9owe9a4.png);
        }
        
       .catqeel {
         -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
           border-radius: 30px;
          border-left: 8px solid #165e7d;
          border-right: 8px solid #165e7d;
          border-top: 0;
          border-bottom: 0;
            box-shadow: 2px 2px 20px  black;
          padding-left: 3px;
          padding-right: 3px;
        padding:2px;
        background-color:#112638;
  background-image: url(http://img11.hostingpics.net/pics/712246o9owe9a4.png);
        }

Merci beaucoup d'avance à celui qui saura trouver d'où vient mon problème !! I love you


Dernière édition par Leyaa le Lun 29 Juil 2013 - 16:41, édité 1 fois

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme du QEEL

Message par Anzu le Lun 29 Juil 2013 - 13:45

Bonjour,

Il y a des erreurs dans votre tableau Smile 
Gardez en tête que dès que vous ouvrez une balise, elle doit forcément se fermer.
Ex: <td>blabla</td>

Donc vous commencez votre tableau par <table> il doit bien se fermer quelque part et dans votre template, il ne se ferme pas.

Ensuite, le schéma de votre qeel est très simple, il doit avoir cette forme(en gros):

Code:
<table><tr><td>contenu stats 1 blabla</td><td>contenu stats 2 blabla</td></tr>
<tr><td colspan="2">derniers connectés</td></tr></table>

vous n'avez pas grand chose à corriger, vous devriez y arriver.

Il faudra simplement ne pas oublier de rajouter les balises table autour des derniers connectés:

Code:
<table>{L_CONNECTED_MEMBERS}</table>

D'ailleurs, cette variable se baladait toute seule dans votre template Razz

Et au passage, ceci:

Code:
<table cellpadding="0" cellspacing="0"><tr>{LOGGED_IN_USER_LIST}</tr></table>
Il manque le td, toujours sous cette forme: table/tr/td et ici le table est inutile, si vous voulez mettre des cadres etc, utilisez des div.

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme du QEEL

Message par Leyaa le Lun 29 Juil 2013 - 15:00

Bonjour,

Merci beaucoup, grâce à vous tout fonctionne parfaitement !
Cependant, j'aimerais bien laisser de l'espace sous mes tableaux, mais les balises <br> ne marchent pas... j'aurais aussi aimé supprimé le fond bleu plus clair dans le cadre des derniers connectés, comment faire ?

Voilà mon Index Body modifié:
Code:
<!-- BEGIN disable_viewonline -->
<center><img src="" /></center>
<table width="100%" border="0" cellspacing="5" cellpadding="5" align="center" class="catqeel">
  <tr>
    <td colspan="2" align="center"><img src="http://img11.hostingpics.net/pics/90296765p.png"/>
    <br />
    <a href="http://moonlight-rises.forumactif.org/g4-fairies"><span class="groupes" style="color: #B1D1E8;"> Fairies</span></a>
    <a href="http://moonlight-rises.forumactif.org/g5-mai"><span class="groupes" style="color: #9171B0;"> Maï </span></a>
      <a href="http://moonlight-rises.forumactif.org/g6-vampires"><span class="groupes" style="color: #B04141;"> Vampires</span></a>
      <a href="http://moonlight-rises.forumactif.org/g7-wizards"><span class="groupes" style="color: #A3BF65"> Wizards</span></a>
      <a href="http://moonlight-rises.forumactif.org/g8-werewolves"><span class="groupes" style="color: #7D6740;"> Werewolves</span></a>
        <a href="http://moonlight-rises.forumactif.org/g9-humans"><span class="groupes" style="color: #CCC393;"> Humans</span></a></td>
  </tr>

  <tr>
    <td width="50%" valign="top" align="center" class="statistiques"><span class="gensmall"><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>


      <td width="50%" valign="top" align="center"  class="statistiques"><span class="gensmall"><table cellpadding="0" cellspacing="0"><tr><td>{LOGGED_IN_USER_LIST}</td></tr></table>
        </span></td>
      <tr><td colspan="2" width="60%" valign="top" align="center"  class="statistiques"><span class="gensmall"><table cellpadding="0" cellspacing="0">{L_CONNECTED_MEMBERS}</table></span></td></tr>
</table>




 
<!-- END disable_viewonline -->

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme du QEEL

Message par Anzu le Lun 29 Juil 2013 - 15:25


Pour mettre des espaces après votre qeel, dans votre css, vous avez:

Code:
        .catqeel {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                  border-radius: 30px;
                  border-left: 8px solid #165e7d;
                  border-right: 8px solid #165e7d;
                  border-top: 0;
                  border-bottom: 0;
                    box-shadow: 2px 2px 20px  black;
                  padding-left: 3px;
                  padding-right: 3px;
                padding:2px;
                background-color:#112638;
          background-image: url(http://img11.hostingpics.net/pics/712246o9owe9a4.png);
                }

Rajoutez un padding bottom de 50px par exemple:

Code:
  padding-bottom: 50px;

Pour le fond des derniers connectés, rajoutez une id dans le table:
Code:
<table id="blabla" cellpadding="0" cellspacing="0">{L_CONNECTED_MEMBERS}</table>

et rajoutez dans votre css:

Code:
#blabla td.row1{
background: none !important;
}

Cordialement.


Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme du QEEL

Message par Leyaa le Lun 29 Juil 2013 - 16:40

Tout fonctionne parfaitement, merci beaucoup pour votre aide ! Very Happy
Bonne journée !

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum