/**
        * Fonction qui se déclenche lorsque tous les éléments de la page ont étés créés
        * Comme nous allons effectuer des actions sur les onglets, nous voulons être sûr qu'ils existent
        * Sinon ça ne servirait à rien
        */
        $('document').ready(function()
        {
          /**
            * Pour ne pas afficher les onglets dans les sous catégories
            * Et pour ne pas gêner les utilisateurs qui n'activent pas Javascript,
            * Les onglets sont invisibles par défaut.
            * On commence donc par les rendre visibles.
            */
          $('#conteneur_onglets').css( 'display' , 'block' );
      
          /**
            * On indique que l'on change de catégorie lorsque l'on clique sur un onglet
            * Si vous souhaitez changer de catégorie lors du survol (ce que je déconseille)
            * Il vous suffit de remplacer "click" par "hover"
            */
          $('#conteneur_onglets .onglet').click(function()
          {
              /**
                * Fonction à exécuter lors du click, ici il s'agit de changer de catégorie.
                * On passe en argument l'index de l'onglet.
                * L'index est le numéro de l'onglet en commençant par 0
                * Pour l'onglet 1, il s'agit du première onglet, l'index vaut 0
                * Pour l'onglet 2, il s'agit du seconde onglet, l'index vaut 1
                * ...
                * Pour l'onglet 5, il s'agit du cinquième onglet, l'index vaut 4
                */
              change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
          });
      
          /**
            * On choisit quelle catégorie afficher en premier.
            * Par défaut, il s'agit de la première (index 0).
            * Si vous souhaitez en afficher une autre, il vous suffit de remplacer le 0
            * par l'index de la catégorie désirée.
            * Si vous voulez toutes les afficher, supprimez cette ligne.
            */
          $('.onglet:eq(0)').click();
        });

        /**
        * Fonction qui se déclenche à chaque fois que l'on souhaite changer de catégorie
        */
        function change_categorie( index )
        {
          /**
            * On vérifie que la catégorie demandée existe
            */
          if( $('.categorie:eq(' + index + ')').size() != 0 )
          {
              /**
              * Si vous vous en souvenez, dans la partie HTML, on avait ajouté
              * Un conteneur autour des catégories et l'on ne savait pas à quoi il servait.
              * Ici, nous lui donnons la même hauteur que la catégorie qui sera affichée.
              * Je vous explique pourquoi en dessous du code.
              */
            
            /* Ligne commentée : crée un bug
            $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );
            
              /**
              * On masque toutes les catégories
              */
              $('.categorie').css( 'display' , 'none' );
          
              /**
              * On affiche avec un petit effet la catégorie demandée
              */
              $('.categorie:eq(' + index + ')').fadeIn( 500 );
          
              /**
              * On enlève la classe "actif" de l'ancien onglet actif
              */
              $('.onglet.actif').removeClass('actif');
          
              /**
              * On ajoute la classe "actif" à l'onglet de la catégorie affichée
              */
              $('.onglet:eq('+ index +')').addClass('actif');
          }
          /**
            * Si la catégorie n'existe pas, on affiche un message
            */
          else alert('Vous ne pouvez pas accéder à cette catégorie');
        }

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<div id="conteneur_onglets">
  <div class="onglet">Chazam</div>
  <div class="onglet">Je manque de créativité</div>
</div>
<div id="conteneur_categories"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie"><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --></div></div><!-- END catrow -->

/*ZONE DE TESTS*/

.secondarytitle h2 {
    color:crimson;
    font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
}

/*ONGLETS*/
.onglet {
    background-color: #f3f3f3;
    border-radius: 20px 20px 20px 20px;
    color: #4682b4;
    font-family: Georgia;
   text-transform: uppercase;
    display: inline-block; /* pour qu'ils se mettent à côté*/
    margin: 5px;
    padding: 5px;
}

/*FORUM DANS SON ENSEMBLE*/

body, td.bodyline{margin-top: 0px!important;
   padding-top: 0px!important;
  margin-right:0px!important;
  margin-left:0px!important;
margin-bottom: 0px!important;
}

.bodyline
{
  width: 950px;
  padding: 0;
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-bottom: -10px;
  background-color:#FFFFFF;
  border-left: 2px solid #4f3a39;
  border-right: 2px solid #4f3a39;
  box-shadow: 0px 0px 2px #000000;
}

/*FORUM DANS SON ENSEMBLE ENDS*/

/*NAVIGATION*/

.navig {
    position:relative;
  z-index:999;
  width:950px;
  height:30px;
   margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  font-size:14px;
  text-align: center;
  background-color: #4f3a39;
  border-right:2px solid #4f3a39;
  border-left:2px solid #4f3a39;
   box-shadow: 0px 0px 2px #000000;

}

.navig a{
  font-weight: bold;
  color: #d2d2d2 !important;
  text-shadow: 1px 1px 0px #3a3a3a;
  font-size: 10px;
  font-family: georgia;
  font-size:14px;
}
.navig a:hover{
  color: #efefef !important;
  font-size:14px;
}

/*NAVIGATION ENDS*/






/*CATEGORIES, LIENS*/

.line{
  line-height: 16px;}

a:link, a:link hover
{
  text-decoration: none !important;
}
.forumline
{
  width: 98%;
  margin: auto;
  background-color: #FFFFFF;
}

.cate_titre
{
  width: 98%;
  margin: auto;
}

.titre2{
  text-align: center;
  color: #ffffff!important;
  font-family: georgia;
  text-transform: lowercase;
  font-size: 19px;
  letter-spacing: -1px;}
  
.categorie
{
  width: 98%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #e9e9e6;
  border-top: 8px solid #4c4b4f;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  box-shadow: 0px 0px 2px #000000;
}
.forum
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #ffffff;
  border: 1px dotted #c0c0c0;
  padding: 2px;
}
.forumlink
{
  display: block;
  width: 98%;
  text-transform: uppercase;
  font-weight: normal;
  font-family: times new roman;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0px #ffffff;
  color: #3a489b!important;
}
.forumlink a
{
  font-size: 16px;
  border-bottom: 2px dotted #c0c0c0;
}
.description
{
  display: block;
  width: 500px;
  margin: auto;
  font-size: 11px;
  text-align: justify;
  color: #a6a6a6;
}
.illu
{
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #c0c0c0;
  background: #e9e9e6;
  padding: 5px;
}

.stats_last
{
  display: block;
  width: 160px;
  margin: auto;
  background-color: #e9e9e6;
  padding: 10px;
  border: 1px dotted #c0c0c0;
}
.stats
{
  display: block;
  text-align: center;
  font-size: 10px;
  color: #a6a6a6;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.last
{
  display: block;
  text-align: center;
  font-size: 11px;
}
.sous_forum
{
  display: block;
  width: 98%;
  margin: auto;
  background-color: #e9e9e6;
  padding: 2px;
  text-align: center;
}
a.nav img
{
width: 100px;
}

/*CATEGORIES, LIENS ENDS*/



/*FOOTER*/

#page-footer
{
  width: 950px;
  height: 142px;
  margin: auto;
  background-image:URL('http://nsm08.casimages.com/img/2014/09/25//1409250303074700212554394.png');
  border-top: 3px solid #4f3a39;
}
#page-footer a
{
  font-size: 15px;
  color: #FFFFFF !important;
  text-shadow:0px 0px 2px #000000;
  font-weight:bold;
}
#page-footer a:hover
{ font-size:15px;
   color: #FFFFFF !important;
  text-shadow:0px 0px 2px #FFFFFF;
   font-weight:bold;
}

/*FOOTER ENDS*/

/*PROFIL*/

.profil
{
  width: 200px;
  margin: autopx;
  padding: 2px;
  background-color: #efefef;
  border: 1px dotted #c0c0c0;
  text-align: center;
}
.name
{
  font: Georgia
  font-size: 16px;
  font-variant: small-caps;
}
.profil_avatar
{
  border: 1px solid #c0c0c0;
  background-color: #efefef ;
  padding: 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 10px;
  
}
.message_contenu
{
  text-align: justify;
  font-size: 11px;
  background-color: #f0f0f0;
  border: 1px dotted #c0c0c0;
  padding: 0px;
}

#page-body
{
  width: 920px;
  margin: auto;
}
.forumline
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #cbd5de;
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}


/*PROFIL ENDS*/

/*QEEL*/

.groupe1, .groupe2, .groupe3, .groupe4, .groupe5
{
  display: block;
  font-weight: bold;
  text-transform: small-caps;
  margin-top: 5px;
  text-align: center;
  font-size: 14px;
}
.groupe1
{
  color: #485991 !important;
}
.groupe2
{
  color: #aa3246 !important;
}
.groupe3
{
  color: #d19656 !important;
}
.groupe4
{
  color: #579c5a !important;
}
.groupe5
{
  color: #545454 !important;
}
.groupe_contenu
{
  display: none;
}
.qeel_infos
{
  width: 98%;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color:none;
  border: 1px dotted #c0c0c0;
  padding: 4px;
  font-size: 11px;
  text-align: justify;
}
.groupe1:hover .groupe_contenu, .groupe2:hover .groupe_contenu, .groupe3:hover .groupe_contenu, .groupe4:hover .groupe_contenu, .groupe5:hover .groupe_contenu
{
  display: block;
  position: absolute;
  margin-left: 50px;
  width: 250px;
  background-color: #cbd5de;
  padding: 4px;
  border: 1px dotted #c0c0c0;
  color: #989898;
  font-size: 11px;
  font-weight: normal;
}
.cadre {
  height: 140px;
  border: 3px solid #E3E3E3;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    text-align:justify;
  line-height: 12px;
  background-color: #cbd5de;
  box-shadow:0px 0px 3px #fff;
}

/*QEEL ENDS*/

/*MISE EN PAGE*/

/*MISE EN PAGE ENDS*/