QEEL deux colonnes

[Cramby']

Bonjour tout le monde !

Alors voila, je voudrais faire ce genre de QEEL :


J'ai reussi à en faire une bonne partie grace aux sujets déjà postés sur le forum.
Il reste cependant des détails que je n'arrive pas à résoudre.
Voila ce que j'ai réussi à faire :


- Dans la partie de droite, je n'arrive pas à faire apparaitre les membres connectés au cours des XX heures, j'ai poutant mit le bon code dans le template ...
- Ensuite je n'arrive pas à mettre une scrollbar pour les membres connectés au cour des XX heures...
- Pour finir, le nom des groupes sont en gras, mais je n'arrive pas à enlever cette effet ...

Voila mon template:

Code:

<!-- BEGIN disable_viewonline -->

<div class="tableauqueel">
<center><span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span></center>
<table style="width: 100%; border-collapse:collapse;">
<td width="50%"><div class="partiegauche"><br>
  {TOTAL_POSTS}<br>{TOTAL_USERS}<br>{NEWEST_USER}<br>{LOGGED_IN_USER_LIST}
</font></div></td>

  <td width="50%"><div class="partiedroite"><br><div class="gensmall">
    <table>{L_CONNECTED_MEMBERS}</table>
<br></div><br>
<br></div></td>
</tr>
</table><br>
</div></center>
<br>
<!-- END disable_viewonline -->

Et mon CSS:

Code:

/*qeel*/
.partiegauche{
  border-right: 1px solid #999999;
  font-size: 12px;
  font-family: 'Time New Roman';
}
.groupes{
  font-family: 'Petit Formal Script';
}
.tableauqueel{
  border: 1px solid #999999;
}


Merci d'avance pour votre aide ! :3

[Anzu]

Bonjour,

Pour les membres connectés au cours des dernières 24h, vous n'activez pas l'option dans le PA
PA > Affichage > Page d'accueil > Généralités > Afficher la liste des membres connectés au cours des 24* dernières heures.

Pour l'effet "gras" sur les groupes, je ne vois rien dans les codes. Avez vous d'autres codes css dans votre feuille css ?

Edit: pour le scrollbar, mettez ceci dans votre css:

Code:

.partiedroite {
height: 150px;
overflow: auto;
}

Cordialement.

[Cramby']

Bonjour et merci de votre réponse ! =D
Alors merci pour l'affichage des membres connectés au cour des XX heures, j'peut être bête defois XDD
Pour ce qui est de la scrollbar, ça ne marche pas, cela à juste déplacé quelques trucs... A moins qu'elle aparaisse quand il le faut ...?
En tout les cas voila le résultat:

Pour ce qui est du texte en gras, oui j'en est même une tonne dans mon CSS :

Code:

/** Fiche Chevaux **/
.cadre
{
-moz-border-radius : 5px 10px;
background-color: #EFD7AD;
border: solid #6F6D3C 2px;
margin: 0px 15px
}


.nom
{
color: #6F6D3C;
text-shadow: #806C51 0px 0px 5px;
font-size: 28px;
font-variant: small-caps;
text-align: center;
letter-spacing: 3px
}


.boite
{
-moz-border-radius : 5px 10px;
background-image:url(http://i42.servimg.com/u/f42/16/22/30/24/wood_t11.jpg);
border: solid #A39F58 1px;
width: 400px;
}


.boite2
{
-moz-border-radius : 5px 10px;
background-color: #F5E6C7;
width: 300px;
}


.stitre
{
-moz-border-radius-topleft : 5px 10px;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 16px;
color: #61513c;
background-color: #F5E6C7;
}


/**Fiche Chevaux**/


/**Fiche 2**/
.boitee
{
-moz-border-radius : 5px 10px;
background-color: #F5E6C7;
border: dashed #A39F58 1px;
width: 400px;
}


.titre
{
-moz-border-radius-topleft : 5px 10px;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 16px;
color: #61513c;
background-color: #ab906d;
}



/**Fiche 2**/



.explication
{
border: dashed 1px #A9A65F;
width: 500px;
margin: 5px 80px;
background-color: #F5E6C7;
}



/**Formulaire**/
.boiteg
{
float: right;
width: 260px;
margin-right: 8px;
overflow: auto;
height: 150px;
-moz-border-radius : 5px 10px;
background-image:url(http://i42.servimg.com/u/f42/16/22/30/24/wood_t11.jpg);
border: solid #A39F58 1px;
}


.boited
{
width: 260px;
margin-left: 8px;
overflow: auto;
height: 150px;
-moz-border-radius : 5px 10px;
background-image:url(http://i42.servimg.com/u/f42/16/22/30/24/wood_t11.jpg);
border: solid #A39F58 1px;
}

.boitef
{
-moz-border-radius : 5px 10px;
background-color: #F5E6C7;
margin: 0px 2px
}



.stitreg
{
font-size: 18px;
font-weight: 300;
text-variant: small-caps;
letter-spacing: -1px;
world-spacing: 0px;
text-align: right;
-moz-border-radius: 5px 5px;
background-color: #CCB79F;
color: #3C2C17
}


.stitred
{
font-size: 18px;
font-weight: 300;
text-variant: small-caps;
letter-spacing: -1px;
world-spacing: 0px;
-moz-border-radius: 5px 5px;
background-color: #CCB79F;
color: #3C2C17
}



i
{
color: #A69173;
}

a, a:link
{
text-decoration: none!important
}

a:hover
{
color: #6F6D3C;
text-shadow: 0px 0px 1px #806C51;
text-decoration: none;
}

/*police*/

@font-face {
  font-family: 'Petit Formal Script';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/petitformalscript/v1/OEZwr2-ovBsq2n3ACCKoEkSDOKi2giJNWAsNCynEuSk.eot);
  src: local('Petit Formal Script'), local('PetitFormalScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/petitformalscript/v1/OEZwr2-ovBsq2n3ACCKoEkSDOKi2giJNWAsNCynEuSk.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/petitformalscript/v1/OEZwr2-ovBsq2n3ACCKoEtgdb3q9Ts3XkY9bkaxM24g.woff) format('woff');
}

/*catégorie*/
.forumlink {
font-size: 15px;
font-family: 'Petit Formal Script'
}

/*PA*/
.cadre {
  height: 140px;
  border: 3px solid #E3E3E3;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    text-align:justify;
  line-height: 12px;
  background-color: #F2F2F2;
  box-shadow:0px 0px 3px #fff;
}

/*qeel*/
.partiegauche{
  border-right: 1px solid #999999;
  font-size: 12px;
  font-family: 'Time New Roman';
}
.groupes{
  font-family: 'Petit Formal Script';
}
.tableauqueel{
  border: 1px solid #999999;
}

.partiedroite {
height: 150px;
overflow: auto;
}

Parcontre il y à certaine chose que je ne sais pas à quoi elles servent ... XD

[Anzu]

Pour ce qui est de la scrollbar, ça ne marche pas, cela à juste déplacé quelques trucs... A moins qu'elle aparaisse quand il le faut ...?

Exactement

Pour la partie de gauche qui est "descendue", rajoutez un valign top dans le td concerné:

Code:

<td valign="top"

Pour le "gras", il y a un

Code:

font-weight

qui se balade dans votre css, retirez le.

Cordialement.

[Cramby']

Pour le texte en gras j'ai tout enlever mais sa reste en gras, donc tant pis, je laisse comme sa ^^

Voila le resultat:


Comment faire pour que le trait du milieu soit un peut plus espacer des groupes ? :3

Après tout sa, je pense que ce sera bon ! ^^

[Anzu]

Pour le gras, essayez:

Code:

a {
font-weight: normal;
}


Remplacez votre template par:

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 -->
       
        <div class="tableauqueel">
        <center><span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
        <span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
        <span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span>
          <span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="3"><b>Groupe</b></font></a></span></center><br /><br />
        <table style="width: 100%; border-collapse:collapse;">
        <td valign="top" width="50%"><div class="partiegauche"><br>
          {TOTAL_POSTS}<br>{TOTAL_USERS}<br>{NEWEST_USER}<br>{LOGGED_IN_USER_LIST}
        </font></div></td>
       
          <td width="50%"><div class="partiedroite"><br><div class="gensmall">
            <table>{L_CONNECTED_MEMBERS}</table>
        <br></div><br>
        <br></div></td>
        </tr>
        </table><br>
        </div></center>
        <br>
        <!-- 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,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

j'ai simplement rajouté des br.

Cordialement.

[Cramby']

Merci pour le template, c'est parfait !
Le "a" de

Code:

a {
font-weight: normal;
}

Par quoi faut-il que je le remplasse ? ^^' Parce que j'ai mit ".groupe{" Mais sa ne fonctionne toujours pas ...

[Anzu]

Bah pas rien puisque je vous l'ai donné tel quel, je l'aurais précisé sinon

Pourrais-je avoir le lien du forum concerné ? Parce que pour moi, il n'y a pas cet effet de "gras" donc difficile de faire quelque chose ^^" (par mp ou sous balises hide si vous préférez)

[Cramby']

Ah ok ^^' J'ai essayer aussi et sa ne fonctionne pas :/
Voila l'adresse: http://testrpg.forumactif.org/
C'est une écriture télécharger, mais sur le site, ce n'est pas si gras :s

[Anzu]

Han suis-je bête !

Dans votre template, vous avez ceci autour de l'intitulé "groupes":

Code:

<b>Groupe</b>

Retirez les balises, c'est pour le "gras"

Cela devrait atténuer l'effet de la police.

Cordialement.

[Cramby']

Pffff j'aurais du y voir aussi ! XD
Et bien c'est parfait maintenant ! =D Un énorme merci ! ^^