<div class="systeme_onglets">
<img class="imgpa" src="http://img15.hostingpics.net/pics/458556bienvenue.png">
        <table class="onglets">
            <tr>
<td><span class="onglet_0 onglet" id="onglet_staff_1" onclick="javascript:change_onglet('staff_1');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td>
<td rowspan="2"> <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_staff_1"><table><tr>
<td colspan="2" class="titrepa">Bienvenue sur Le Forum!</td></tr>
<tr><td><div class="box1">CSSxHTML est un forum d'entraide au codage et programmation. Nous vous proposons divers services tels que les commandes, les tutoriels, le Libre Service et un espace pour les questions. Si vous avez des problèmes avec vos codes, n'hésitez pas à venir demander, nos codeurs ainsi que nous, les Administratrices, vous répondrons et aiderons dans les plus bref délais. Une petite partie pour le graphisme est là si jamais vous avez besoin d'un avatar ! </div></td>
<td><div class="box2">Mais aussi pour nous montrer que vous n'êtes pas doué que dans le codage ! =3 Pour vous divertir, nos Animateurs proposent des concours divers ! Enfin, nous avons trois types : Ceux de Codage, ceux de Graphisme et des concours Jeux tels que des "Enigmages" et "Devinettes". Vous pouvez même aller joué ou raconter votre vie dans les sections adéquates ! Enfin, c'est le paradis pour vous, mais aussi pour votre forum ! ^^</div></td>
</tr></table></div>

            <div class="contenu_onglet" id="contenu_onglet_staff_2"><table>
<td colspan="2" class="titrepa">Annonce</td></tr>
<tr><td><div class="box1"><div class="minititre">Recrutement</div> Nous recrutons : <br />
Des modérateurs - Des animateurs - Des Graphistes.</div></td>
<td><div class="box2"><div class="minititre">Nouveautés</div> JJ/MM/AAAA : Ouverture du forum.
<br />JJ/MM/AAAA : Nouveau dans le staff.
<br /></td>
</div></tr></table></div>

            <div class="contenu_onglet" id="contenu_onglet_staff_3"><table><tr>
<td colspan="2" class="titrepa">Staff</td></tr>
<tr><td><div class="box3"><table><tr><td><div id="cf">
<a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" />
<img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td>
<td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td>
<td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td>
<td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td></tr></table></div></td>
</tr></table></div>

            <div class="contenu_onglet" id="contenu_onglet_staff_4"><table><tr>
<td colspan="2" class="titrepa">Partenariat</td></tr>
<tr><td><div class="box3">
<img src="http://img11.hostingpics.net/pics/390345avaparten.png" /> <img src="http://img11.hostingpics.net/pics/390345avaparten.png" /> <img src="http://img11.hostingpics.net/pics/390345avaparten.png" />
</div></td>
</tr></table></div>
        </div>
</td>
  <td><span class="onglet_0 onglet" id="onglet_staff_2" onclick="javascript:change_onglet('staff_2');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span>
</td></tr>
  <tr><td><span class="onglet_0 onglet" id="onglet_staff_3" onclick="javascript:change_onglet('staff_3');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td>
    <td><span class="onglet_0 onglet" id="onglet_staff_4" onclick="javascript:change_onglet('staff_4');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td>
</tr> </table><div class="navpa">
<a href="#" class="lien">Règlement</a> - <a href="#" class="lien">Présentation</a> - <a href="#" class="lien">Nouveautées</a> - <a href="#" class="lien">Annonces</a><div class="credit">Crédit: PA by kimel de <a href="http://www.cssxhtml.org/">CSSxHTML</a></div>
        </div>
 

 
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'staff_1';
                change_onglet(anc_onglet);
        //-->
        </script>

/* PAGE D ACCUEIL */
.onglet{
display:inline-block;
margin-left:0px;
margin-right:0px;
padding:3px;
}
.onglet_0{
opacity: 0.5;
transition: 1s;
 -moz-transition: 1s;
 -o-transition: 1s;
 -htm-transition: 1s;
 -webkit-transition: 1s;
}
.onglet_0:hover{
opacity: 1;
}
.onglet_1{
opacity: 1;
}
.contenu_onglet{
heigth: 300px;
margin-top:-1px;
padding:5px;
 display:none;
}

.systeme_onglets {
  background: url(http://i46.servimg.com/u/f46/17/26/74/77/fond10.png);
  width:700px;
  border-radius: 20px;
}

.imgpa {
  border-radius: 20px 20px 0px 0px;
}

.titrepa {
  Border: 1px solid black;
  border-radius: 0px 0px 5px 5px;
  background: #2F7E76;
  box-shadow: 0px 0px 5px black;
  width: 300px;
  color: white;
  text-shadow: 1px 1px 0 white;
  text-align: center;
  position: relative;
  margin-bottom: -20px;
}

.minititre {
 font-variant:small-caps;
 font-style:italic;
 text-align: center;
 border-bottom : 1px dotted white;

}

.box1 {
  background : #75BDB7;
  width: 250px;
  height: 100px;
  border: 1px solid black;
  padding-top:10px;
  padding-right:10px;
  padding-left:30px;
  padding-bottom: 10px;
  margin-right: -5px;
  margin-top: -10px;
  overflow: auto;
  border-radius: 80px 0px 0px 80px;
}


.box2 {
  background : #75BDB7;
  width: 250px;
  height: 100px;
  border: 1px solid black;
  padding-top:10px;
  padding-right:10px;
  padding-left:5px;
  padding-bottom: 10px;
  margin-top: -10px;
  overflow: auto;
  border-radius: 0px 0px 0px 0px;
}
.box3 {
  background : #75BDB7;
  padding-top:10px;
  padding-right:10px;
  padding-left:30px;
  padding-bottom: 10px;
  width: 515px;
  height: 100px;
  border: 1px solid black;
  border-radius: 80px 0px 0px 80px;
  margin-top: -10px;
}

.boxcontenue {
  width: 480px;
}

.navpa{
width: 548px;
Border: 1px solid black;
font-weight: normal;
font-family:Georgia;
font-size: 16px;
text-align: center;
border-radius: 0px 0px 5px 5px;
background: #2F7E76;
box-shadow: 0px 0px 5px black;
color:#fff;
position: relative;
margin-top: -13px;
}

.credit {
  font-size: 5px;
  text-align: right;
}

#cf {
position:relative;
height:85px;
width:100px;
margin:0px;   
}
#cf img {
border-radius:5px;
border-top: 3px double white;
border: 1px solid white;
margin-bottom: 2px;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;   
transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
opacity:0;
}

//<!--
                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;
                }
        //-->