Qui est en ligne en tableau

Qui est en ligne «Art Sport»

Voir ce que ça donne

- La version du forum doit être PhpBB2.
- Les catégories ont une largeur d'environ 800 pixels.

Le template 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></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> </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="whosonline">
  <table width="100%">
    <tr>
      <td rowspan="2">
        <div class="majcredi"><table class="DeBug">{L_CONNECTED_MEMBERS}</table></div>
      </td>
      <td>
        <div class="qeelusers">
          {LOGGED_IN_USER_LIST}
        </div>
      </td>
      <td>
        <div class="qeelused">
          <span id="totalUsersOnline">{TOTAL_USERS_ONLINE}</span><br/>
          {RECORD_USERS}<br />
          {NEWEST_USER}<br/>
          <span id="kumao">{TOTAL_POSTS}</span><br/>
          <span id="matt">{TOTAL_USERS}</span>
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="qeelstat">
          <a class="groupes" href="/g24-gerante"> <span style="color: #750505;">Gêrante</span></a> |
          <a class="groupes" href="/g1-administrateurs"> <span style="color: #BE71D1;">Administrateurs</span></a> |
          <a class="groupes" href="/g13-moderatrices"> <span style="color: #A110A1;">Modérateurs</span></a> |
          <a class="groupes" href="/g11-toilettage"> <span style="color: #047C80;">Toilettage</span></a> |
          <a class="groupes" href="/g15-pet-sitter"> <span style="color: #A87BA3;">Pet Sitter</span></a> |
          <a class="groupes" href="/g22-animalerie"> <span style="color: #95D6AA;">Animalerie</span></a>  |
          <a class="groupes" href="/g6-asa"> <span style="color: #FA7319;">Auxiliaires de santé animales</span></a> |
          <a class="groupes" href="/g23-education-elevage"> <span style="color: #949E0E;">Education et élevage</span></a> |
          <a class="groupes" href="/g18-membres-presentes"> <span style="color: #0D49A3;">Autre</span></a><br/>
        </div>
      </td>
    </tr>
    <!-- BEGIN switch_chatbox_activate -->
    <tr>
      <td colspan="3">
        <div class="qeelchat">
          <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <span id="chatbox_popup"></span>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
          </span>
        </div>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
  </table>
</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;</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 -->

Le CSS :::

Code:

/* QEEL*/
.majcredi {
  width: 200px;
  height: 210px;
  background-color:#E3E0E0;
  border:1px solid #D4D4D4;
  font-size: 10px;
  padding: 10px;
  overflow: auto;
  text-align: justify;
}
.majcredi .row1 {
  background: transparent;
  font-size: 10px;
}
.majcredi .gensmall {
  background: transparent;
  font-size: 10px;
  color:#555555;
}
.qeelchat {
  width: 723px;
  height: 20px;
  background-color:#E3E0E0;
  border:1px solid #D4D4D4;
  font-size: 10px;
  padding: 10px;
  overflow: auto;
  text-align: justify;
}
.qeelusers {
  width: 240px;
  height: 150px;
  background-color:#E3E0E0;
  border:1px solid #D4D4D4;
  font-size: 10px;
  padding: 10px;
  overflow: auto;
  text-align: justify;
}
.qeelstat {
  width: 490px;
  height: 30px;
  background-color:#E3E0E0;
  border:1px solid #D4D4D4;
  font-size: 10px;
  padding: 10px;
  overflow: auto;
  text-align: justify;
}
.qeelused {
  width: 220px;
  height: 150px;
  background-color:#E3E0E0;
  border:1px solid #D4D4D4;
  font-size: 10px;
  padding: 10px;
  overflow: auto;
  text-align: justify;
}
.newuser {
  font-size : 11px;
  border-width: 1px 1px 0px 0px;
}
.ongletqeel {
  width: 100px;
  font-size: 11px;
  background-color: #E3E0E0;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 1px 1px 2px #888;
}
.whosonline {
  margin: 5px auto;
  text-align: center;
  width: 750px;
  font-size: 11px;
  background-color:#5ead58;
  border:2px solid #D4D4D4;
  box-shadow:0 0 5px #615B5A;
  color:#555555;
}
.lienpa {
  font-family: 'Verdana';
  font-size: 12px;
  text-transform: uppercase;
  font-style: strong;
}
.groupes {
  display:inline-block;
  font-family: 'Courier New';
  font-size: 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

Pensez à me créditer (Fait par Asphodèle sur Never Utopia.)

code (c) crackle bones

Je te fais les mêmes remarques qu'ici !

Hello! ^^
En plus des remarques d'Alice, il y a quelques soucis avec ton code!

Tout d'abord, dans le template, il y a des balises qui ne sont pas fermées. Notamment une div ouverte.
Tu utilises également la balise dépréciée center, il faudrait la remplacer par un text-align: center ou par un margin: auto et une largeur donnée selon ce que tu voulais faire. Tu utilises aussi une autre balise dépréciée: font. Pense à utiliser plutôt le CSS avec color: #tacouleur;

Comme sur ton autre LS, il faudrait également aérer ton CSS en mettant un retour à la ligne après chaque point-virgule et accolade.

Il manque ici aussi une impression d'écran pour donner un aperçu du code! ^^

Merci pour le partage !

N'ayant pas de retour, j'ai effectué les modifications. Je valide donc le code.

Merci du partage !

Merci

Merci.

Merci

Merci !

Merci du partage !!