<div style="width: 100%; ">
   <table>
      <tr>
         <td style="width: 21%; padding-left: 2%; padding-right: 2%;">
            <h9>Avant tout<h9>

            <a href="LIEN_REGLEMENT">Règlement</a>

            <a href="LIEN_CONTEXTE">Contexte</a>

            <a href="LIEN_FAQ">FAQ</a>
         </td>
         <td style="width: 21%; padding-left: 2%; padding-right: 2%;">
            <h9>Choisir son personnage<h9>

            <a href="LIEN_PERSONNAGES_JOUABLES">Personnages jouables</a>

            <a href="LIEN_AVATARS_PRIS">Avatars pris</a>
         </td>
         <td style="width: 21%; padding-left: 2%; padding-right: 2%;">
            <h9>Personnage<h9>

            <a href="LIEN_PV">Postes vacants</a>

            <a href="LIEN_SCENARIO">Scénario</a>

            <a href="LIEN_PRESENTATIONS">Modèle de présentation</a>
         </td>
         <td style="width: 21%; padding-left: 2%; padding-right: 2%;">
            <h9>Gestion générale<h9>

            <a href="LIEN_LIER_VOTRE_PERSO">Lier votre personnage</a>

            <a href="LIEN__VOS_SUJETS">Vos sujets</a>

            <a href="LIEN_DEMANDES_DIVERSES">Demandes diverses</a>
         </td>
      </tr>
      <tr>
         <td colspan="4" align="center">
            Barre de navigation
         </td>
      </tr>
   </table>
</div>
<div style="width: 100%; ">
   <div style="width: 30%; margin: 2%; float: left;">
      Contexte
      <div style="border: black 1px solid; width: 96%; padding: 2%;">
         Ici sera placé le contexte
      </div>
   </div>
   <div style="width: 62%; margin: 2%; float: left;">
      <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">News</span>
            <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Staff</span>
            <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Our Friends</span>
            <span class="onglet_0 onglet" id="onglet_pour" onclick="javascript:change_onglet('pour');">Crédits</span>
        </div>
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_quoi">
                Contenu des News.
            </div>
            <div class="contenu_onglet" id="contenu_onglet_qui">
            Contenu du Staff.
            </div>
            <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                Contenu de "Our friends".
            </div>
         <div class="contenu_onglet" id="contenu_onglet_pour">
                Contenu des crédits.
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
   </div>
</div>

.onglet
{
display: inline-block;
cursor: pointer;
}
.onglet_0
{
}
.onglet_1
{
}
.contenu_onglet
{
border: 1px black solid;
padding:5px;
display:none;
}
h9
{
color: pink;
}

<script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
</script>