/**
 * Système d'onglets automatisé
 * Version : 1.0
 * Par Emmanuel "Manumanu" B.
 **/

$(document).ready(function() {
  var ongletActuel = null;
  ongletActuel = $('.tabs-onglets a:first').attr('href');

  // Ajout de classe au premier onglet
  $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');

  // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
  $(ongletActuel).show().siblings().hide();

  // Gestion de l'événement clic
  $('.tabs-onglets a').click(function(e) {
      idOnglet = $(this).attr('href');

      // Si l'élément est déjà sélectionné, ne rien faire
      if (idOnglet == ongletActuel)
        e.preventDefault();
      else {
        // Afficher le contenu demandé et masquer le contenu restant
        $(idOnglet).fadeIn().siblings().hide();

        // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
        $(this).addClass('selected').siblings().removeClass('selected');
        ongletActuel = idOnglet;
      }

      // Empêche le déclenchement du lien
      e.preventDefault();
  });
});

<center><div class="titrep">THE BLACK DOOR</div><div class="lienn"><a href="#">bottin des avatars</a> - <a href="#">groupes</a> - <a href="#">postes vacants</a> - <a href="#">espaces invités</a></div><div id="contenu"><div id="premier_onglet">
      <h1><div class="fond"> <table><tr><td><div class="cd1">Mon nom est Perceval Rose et j’ai crée la Division. Qu’est-ce donc ? La Divison est un programme illégal crée afin de donner une seconde chance aux condamnés par la justice. Le but était de donner à des personnes l’occasion de servir leur nation avec bravoure. Cette idée aux allures héroïques fut ensuite pervertie. Manquant terriblement de fonds pour continuer de faire vivre le programme, j’ai dû vendre mes services aux plus offrants. A présent, la Division est répertoriée comme agence gouvernementale clandestine, même si elle l’a toujours été. Nous n’existons pas.</div>
</td><td><div class="cd2"><center><div class="monBloc"><div class="blocVolet"></div><div style="font-family: 'Iceland'; color: black; font-size: 24px;"><center>jules july</center></div><hr><br><div style="color: black; font-size: 11px; margin-top: -15px;">Bavboule.</div><br><div style="font-size: 11px; text-transform: uppercase">Fondatrice</div></div><div class="monBloc"><div class="blocVolet2"></div><div style="font-family: 'Iceland'; color: black; font-size: 24px;"><center>cat parker</center></div><hr><br><div style="color: black; font-size: 11px; font-style:italic; margin-top: -15px;">childish dreams</div><br><div style="font-size: 11px; text-transform: uppercase">ADMINISTRATRICE</div><br></div><div class="monBloc"><div class="blocVolet3"></div><div style="font-family: 'Iceland'; color: black; font-size: 24px;"><center>jules july</center></div><hr><br><div style="color: black; font-size: 11px; margin-top: -15px;">Bavboule.</div><br><div style="font-size: 11px; text-transform: uppercase">Fondatrice</div></div></center>
</div></div></center><center><div class="image"><img src="http://25.media.tumblr.com/tumblr_m3yjp67uxS1r2zae8o1_500.gif" width="214px"></div></center>
</div> </div></center></td><td><br><div class="cd3"> news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news </div><br><div class="cd4">calendrier (ouverture du forum, début de l'intrigue, etc..)</div>
</td>
</tr></table></div></h1>
  </div><div id="deuxieme_onglet">
      <h1><div class="fond"> <table><tr><td><div class="cd5">résumé règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos règlement + infos </div>
<br><div style="margin-top: -8px;"><div class="cd6"> l'ambiance de la division+attentats anonymous, quelque chose comme ça.</div></td>
<td><div style="margin-left: -7px;margin-top:21px; padding: 10px;"> <div class="cd7"><center><a href="http://www.css-actif.com" title="CSSActif"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" alt="obsession" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" alt="CSSActif" /></a><br><div style="margin-top: -2px">N'oubliez pas de voter ♥</div> <br> lien bazzart + pub rpg design</center></div><br><div class="cd8"><center><div class="monBloc"><div class="blocVolet"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 13px;">pseudo amina</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -15px;">FONDATRICE - BAVBOULE</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: -10px; font-style: italic;">DC; aucun.</div></div><div class="monBloc"><div class="blocVolet2"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 13px;">catherine jones</div><br><div style="color: lightgrey; font-size: 13px; margin-top: -15px;">ADMINISTRATRICE - childish dreams</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: -10px; font-style: italic;">DC; aucun.</div></div></center> </div></center></td>
<td><br><div class="cd9"> crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits crédits </div><br><div class="cd10">
<center><div class="cssactif_tableaupartenaire">
<!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><!--
--><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a>
</div><div style="font-size: 10px";> <a href="http://nightworld.weshforum.com/t39-demande-de-partenariat" class="postlink">Devenir partenaires ?</a>  ◐ <a href="http://nightworld.weshforum.com/t38-friends" class="postlink">Nos partenaires. </a></div> </div></center>
</div>
</td>
</tr></table></div></h1>
  </div>
</div><div class="tabs-onglets">
  <a href="#premier_onglet"><img src="http://i.imgur.com/1OH321r.png"></a>
  <a href="#deuxieme_onglet"><img src="http://i.imgur.com/rEvMcNM.png"></a>
</div></center></div>

/*START PAGE D'ACCUEIL*/
/* INFOBULLES STAFF PA */
/* Bloc principal */
.monBloc {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 55px;
  background: #E9E4E4;;}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute;
  width: 200px;
  height: 55px;
  top: 0;
  left: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background-image: url('http://i41.tinypic.com/2prgp6t.png');}

.blocVolet2 {
  position: absolute;
  width: 200px;
  height: 55px;
  top: 0;
  left: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background-image: url('http://i41.tinypic.com/rr6y55.png');}

.blocVolet3 {
  position: absolute;
  width: 200px;
  height: 55px;
  top: 0;
  left: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background-image: url('http://i42.tinypic.com/2u3wg2a.png');}

.blocVolet4 {
  position: absolute;
  width: 100px;
  height: 160px;
  top: 0;
  left: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background-image: url('http://i.imgur.com/1nTdNtU.png');}

/* Changement au survol */
.monBloc:hover > .blocVolet  {
  top: 160px;}
.monBloc:hover > .blocVolet2 {
  top: 160px;}
.monBloc:hover > .blocVolet3 {
  top: 160px;}
.monBloc:hover > .blocVolet4 {
  top: 160px;}

.bodyline
{width: 800px;
  padding: 0px;}

.titrep {font-family: 'Quantico', sans-serif;
  font-size: 32px;
  letter-spacing: -2px;
  text-shadow: -2px 0px 0px #3d2d2a;
  color: #bd9b54 !important;}

.lienn {font-size: 11px;
  font-family: courier new;
  letter-spacing: -1px;
  text-transform: uppercase;}

.fond {background-color: none;width: 750px; padding: 15px;}

.cd1 {width:245px;
  margin-top: -8px;
  height:272px;
  text-align: justify;
  padding: 7px;
  border-right: 2px #d1ac5e solid;
  border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4; font-weight: 500;}

.cd2 {width: 210px;
  margin-top:-8px;
  overflow:auto;
  height:166px;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  font-weight: 500;
  background-color: #E9E4E4;}

.cd3 {font-weight: 500;
  width:240px;
  margin-top: -21px;
  padding: 10px;
  height:132px;
  overflow:auto;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;
  text-align:justify;}

.cd4 {width:240px;
  margin-top: -12px;
  font-weight: 500;
  text-align:justify;
  padding: 10px;
  height:112px;
  overflow:auto; 
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;}

.cd5 {width:255px;
  margin-top: -14px;
  font-weight: 500;
  height:165px;
  overflow:auto;
  padding: 5px;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;}

.cd6 {font-weight: 500;
  width:255px;
  height:90px;
  padding: 5px;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;}

.cd7 {width:190px;
  overflow:auto;
  font-weight: 500;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;
  padding:10px;
  margin-top:-35px;
  height:90px;}

.cd8 {width:210px;
  overflow:auto;
  padding:0px;
  margin-top:-10px;
  height:166px;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;}

.cd9 {width:245px;
  margin-top: -25px;
  padding: 5px;
  height:180px;
  overflow:auto;
  text-align:justify;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;
  font-weight: 500;}

.cd10 {width:245px;
  margin-top: -12px;
  border-right: 2px #d1ac5e solid; border-left: 2px #d1ac5e solid;
  background-color: #E9E4E4;
  padding: 5px;
  height:75px;
  overflow:auto;}

/*END PAGE D'ACCUEIL*/

div.cssactif_tableaupartenaire {
  width: 208px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */
  line-height: 0; /* À ne pas modifier */
}
div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img {
  height: 18px; /* Hauteur initiale */
  width: 50px; /* Largeur initiale */
}
div.cssactif_tableaupartenaire a {
  display: inline-block; /* À ne pas modifier */
  position: relative; /* À ne pas modifier */
  margin: 1px; /* MARGE entre les images */
}

div.cssactif_tableaupartenaire a img {
  display: block; /* À ne pas modifier */
  position: absolute; /* À ne pas modifier */
  left: 0; /* À ne pas modifier */
  top: 0; /* À ne pas modifier */
 
  /* Transitions pour différents navigateurs */
  /* navigateur: toutes_transitions durée type */
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

div.cssactif_tableaupartenaire a:hover img {
  height: 31px; /* Hauteur finale */
  width: 88px; /* Largeur finale */
  z-index: 99; /* Place l'image au-dessus des autres */
 
  /* Positionne le logo de pleine taille au centre - À adapter */
  left: -50%;
  top: -50%;
}