<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>En-tête avec onglets</title>
<style>
/****Structure de l'en-tête****/
#en_tete{
width:800px;
min-height:400px;
height:auto;
color:#1a3a2f;
font-family: Verdana;
border:1px solid #dedbc0;
margin:auto;
}
span.onglet{
float:left;
}
span.onglet img:hover{
cursor:pointer;
}
#en_tete .bloc_texte{
position:absolute;
margin-top:0;
width:800px;
margin-left:50%;
left: -400px; /* ceci correspond à la - (largeur / 2) */
}
<!-- Onglet 1 -->
#en_tete #onglet1{
background-image:url("http://i43.servimg.com/u/f43/15/43/48/11/onglet10.jpg");
background-repeat:no-repeat;
background-position:top;
min-height:339px;
}
#en_tete #onglet1 .contenu{
width:296px;
height:auto;
background-image:url("images/fd_texte.png");
border:white 1px solid;
margin-left:497px;
margin-right:9px;
text-align:center;
font-size:12px;
margin-top:10px;
}
#en_tete #onglet1 .contenu p{
padding-left:12px;
padding-right:12px;
padding-top:2px;
padding-bottom:2px;
}
#en_tete #onglet1 .infos{
font-size:10px;
margin-left:220px;
margin-top:-40px;
}
<!-- Onglet 2 -->
#en_tete #onglet2{
background-image:url("http://i43.servimg.com/u/f43/15/43/48/11/onglet11.jpg");
background-repeat:no-repeat;
background-position:top;
min-height:339px;
}
#en_tete #onglet2 .contenu{
width:600px;
height:auto;
margin:auto;
text-align:center;
font-size:14px;
margin-top:10px;
}
#en_tete #onglet2 .infos{
font-size:10px;
margin-left:30px;
margin-top:90px;
}
<!-- Onglet 3 -->
#en_tete #onglet3{
background-image:url("http://i43.servimg.com/u/f43/15/43/48/11/onglet11.jpg");
background-repeat:no-repeat;
background-position:top;
min-height:339px;
}
#en_tete #onglet3 #liste{
width:225px;
height:160px;
margin-left:35px;
background-image:url("images/fd_texte.png");
border:white 1px solid;
font-size:12px;
}
#en_tete #onglet3 #texte{
width:500px;
height:auto;
margin-left:285px;
margin-right:15px;
margin-top:-160px;
background-image:url("images/fd_texte.png");
border:white 1px solid;
text-align:center;
font-size:14px;
}
#en_tete #onglet3 .infos{
font-size:10px;
margin-left:30px;
margin-top:10px;
}
<!-- Onglet 4 -->
#en_tete #onglet4{
background-image:url("http://i43.servimg.com/u/f43/15/43/48/11/onglet11.jpg");
background-repeat:no-repeat;
background-position:top;
min-height:339px;
}
#en_tete #onglet4 .infos{
font-size:14px;
margin-left:50px;
margin-top:50px;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
<body>
<div id="en_tete">
/**onglet1**/
<span class="onglet">
<div class="navigation"><img src="http://i43.servimg.com/u/f43/15/43/48/11/onglet10.png" onMouseOver="this.src ='http://i43.servimg.com/u/f43/15/43/48/11/onglet11.png';" onMouseOut="this.src = 'http://i43.servimg.com/u/f43/15/43/48/11/onglet10.png';" alt="mon onglet" style="les propriétés de l'image" /></div>
<div class="bloc_texte" id="onglet1">Pour commencer bienvenue sur Manga No Paradise, MNP qu'est-ce que c'est ? C'est tous d'abord une communauté qui partage la même passions : les mangas, un forum ouvert à tous autant aux petits qu'aux grands, ont discutent, flood et s'amuse. Mais que vais-je y trouver ? Tu trouvera des animes en ddl et streaming ainsi que des scans à téléchargé, si tu es un /une grapheur/grapheuse tu trouvera des tutoriel pour t'améliorais. Bien sur, il n'y a pas que ça, alors rejoins nous vite, tout le monde t'attend ! </div>
</span>
/**onglet2**/
<span class="onglet">
<div class="navigation"><img src="http://i43.servimg.com/u/f43/15/43/48/11/onglet12.png" onMouseOver="this.src ='http://i43.servimg.com/u/f43/15/43/48/11/onglet13.png';" onMouseOut="this.src = 'http://i43.servimg.com/u/f43/15/43/48/11/onglet12.png';" alt="mon onglet" style="les propriétés de l'image" /></div>
<div class="bloc_texte" id="onglet2">le Staff du forum est à votre disposition en cas de problème veuillez les contacter</div>
</span>
/**onglet3**/
<span class="onglet">
<div class="navigation"><img src="http://i43.servimg.com/u/f43/15/43/48/11/onglet14.png" onMouseOver="this.src ='http://i43.servimg.com/u/f43/15/43/48/11/onglet15.png';" onMouseOut="this.src = 'http://i43.servimg.com/u/f43/15/43/48/11/onglet14.png';" alt="mon onglet" style="les propriétés de l'image" /></div>
<div class="bloc_texte" id="onglet3">Les partenaire de MNP</div>
</span>
/**onglet4**/
<span class="onglet">
<div class="navigation"><img src="http://i43.servimg.com/u/f43/15/43/48/11/onglet16.png" onMouseOver="this.src ='http://i43.servimg.com/u/f43/15/43/48/11/onglet17.png';" onMouseOut="this.src = 'http://i43.servimg.com/u/f43/15/43/48/11/onglet16.png';" alt="mon onglet" style="les propriétés de l'image" /></div>
<div class="bloc_texte" id="onglet4">Quoi de neuf sur MNP ?</div>
</span>
</div>
</body>
</html>
