<script type="text/javascript">
//<!--
// La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
// Le principe est simple. Le cadre g�rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher.
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
body
{
width:800px;
margin:auto;
}
img
{
border:none;
}
.systeme_onglets
{
margin-top:5px;
margin-left:5px;
width:57%;
float:left;
}
.bloc_general_onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_inactif
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_actif
{
background:#eeeeee;
border-top:1px solid #eeeeee;
}
.contenu_onglet
{
background-color:#eeeeee;
border:1px solid black;
margin-top:1px;
padding:5px;
display:none;
-moz-border-radius: 10px 10px 10px 10px ;
height:200px;
}
.titre
{
text-align:center;
text-decoration:underline;
}
/* Le css suivant permet de mettre l'info bulle... */
a.info_bulle
{
text-decoration : none;
padding : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
a.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inf�rieur */
}
/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle
{
position : absolute;
top : -2000em;
left : -2000em;
width : 1px;
height : 1px;
overflow : hidden;
}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
{
top : auto;
left : auto;
height : auto;
overflow : visible;
}
span.contenu
{
display : block;
padding : 0 8px;
}
</style>
<div style="width:800px;margin:auto;height:250px;">
<div class="systeme_onglets">
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_premier">
Contenu du premier onglet !
</div>
<div class="contenu_onglet" id="contenu_onglet_deuxieme">
Contenu du deuxieme onglet !
</div>
<div class="contenu_onglet" id="contenu_onglet_troisieme">
Contenu du troisieme onglet !
</div>
</div>
/* C'est ici que nous allons changer le titre des onglets pour pouvoir g�rer plus facilement la navigation sur la PA ^^ */
<div class="onglets" style="padding-left:10px;">
<span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span>
<span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span>
<span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
change_onglet(anc_onglet);
//-->
</script>
<!-- Ci dessous le cadre du staff -->
<div style="width:39%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
<div class="titre">STAFF</div>
<!-- Pour l'info bulle, copies le code d'ici -->
/* Mettre l'url du l'image ici... */
<span class="info_bulle">
<span class="contenu">
<img src="http://graph-style.forumn.biz/users/2515/81/28/17/avatars/3154-29.png" alt="" />
</span>
</span>
</a>
<!-- Jusqu'a ici !
Attention ! Les deux images (en petit et grand) doivent �tre de la taille que tu souhaites l'infobulle -->
</div>
</div>
<!-- Fin du cadre du staff -->
<!-- Debut du cadre des infos importantes -->
<div style="width:40%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;">
<div class="titre">Contenu...Informations importantes...etc</div>
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
</div>
<!-- Fin informations importantes -->
<!-- D�but cadre en bas � droite -->
<div style="width:58%;border:1px solid black;height:225px;margin-top:-20px;float:right;">
<!-- player de musique (dewplayer pour faire un exemple) -->
<div style="margin-left:10px;margin-top:10px;">
<object type="application/x-shockwave-flash" data="http://
www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="http://
www.alsacreations.fr/flashswf/dewplayer.swf" />
<param name="flashvars" value="mp3=la_musique.mp3&showtime=1" />
</object>
</div>
Image....
</div>
<!-- Fin... -->
Accueil 
