<style type="text/css">
body { background-color:#3C3D3A; }
.navigation { cursor:crosshair; }
#en_tete{
width:682px;
font-size:14px;
height:auto;
color:#f0f0f0;
margin:auto;
}
#en_tete tr{
vertical-align:top;
}
#en_tete img{
border:0;
}
span.onglet{
float:left;
}
span.onglet img:hover{
}
#en_tete .bloc_texte{
position:absolute;
margin-top:0;
width:800px;
margin-left:50%;
left:-400px;
}
/** Onglet 1 **/
/** Onglet 2 **/
/** Onglet 3 **/
</style>
<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>
<div align="center">
<div style="color:#f0f0f0; text-shadow:0px 0px 5px #000;">
<div style="font-size:20px; font-style:italic;">"NOM & PRÉNOMS COMPLETS" <b style="font-size:24px;">”</b><div>
<div style="font-size:13px; font-style:italic;">« Votre citation favorite »</div>
</div><br>
<div id="en_tete">
<span class="onglet">
<div class="navigation"><img src="http://img40.imageshack.us/img40/7241/32491869.png" style="height:77px;width:206px" alt="Mon onglet 1" onMouseOver="this.src ='http://img840.imageshack.us/img840/8215/73292760.png';" onMouseOut="this.src = 'this.src = 'http://img40.imageshack.us/img40/7241/32491869.png';" /></div>
<div class="bloc_texte" id="onglet1">
<div class="contenu">
<div style="width:682px; height:483px; background-image:url('http://img90.imageshack.us/img90/3769/backgroundv.png');">
<div align="left"> <img class="avatar" src="http://img89.imageshack.us/img89/7893/sansavatar.png" style="margin-top:56px; margin-left:38px; border:2px solid #F5F5F3; box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 */
-webkit-box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 pour Firefox */
-moz-box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 pour navigateurs Webkit */
background-color: #f8f8f8\9; /* Hack pour cibler IE8, IE7, IE6 */ float:left;"> </div>
<div style=""></div>
<div style="text-align:left; width:364px; height:281px; float:left; margin-left:37px; margin-top:80px; padding:10px;">
<div style="margin-top:13px; margin-left:40px; margin-bottom:20px;">
Personnage sur l'avatar: <br>
Date Anniversaire: <br>
Nationalité: <br>
Groupe: <br>
Rang: <br>
Orientation sexueller: <br>
</div>
</div>
</div>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img155.imageshack.us/img155/9904/79679093.png" style="height:77px;width:217px" alt="Mon onglet 2" onMouseOver="this.src ='http://img31.imageshack.us/img31/9800/84636655.png';" onMouseOut="this.src= 'http://img155.imageshack.us/img155/9904/79679093.png';" /></div>
<div class="bloc_texte" id="onglet2">
<div class="contenu">
<img src="http://img845.imageshack.us/img845/7066/topq.png" />
<div style="width:682px; background-image:url('http://img651.imageshack.us/img651/3135/font02.png');">
<div align="center">
<div style="width:520px; text-align:justify; margin-top:-20px; margin-bottom:30px;">
MAXIMUM 15 LIGNES
</div>
</div>
<img src="http://img651.imageshack.us/img651/50/histoires.png" />
<div align="center">
<div style="width:520px; text-align:justify; margin-top:-20px; margin-bottom:30px;">
ENTRE 20 & 30 LIGNS
</div>
<img src="http://img855.imageshack.us/img855/6503/caractre.png" />
<div align="center">
<div style="width:520px; text-align:justify; margin-top:-20px;">
15 LIGNES MAXIMUM
</div>
</div>
</div>
<img src="http://img717.imageshack.us/img717/9098/bottomv.png" />
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img831.imageshack.us/img831/2601/84599159.png" style="height:77px;width:259px" alt="Mon onglet 3" onMouseOver="this.src ='http://img812.imageshack.us/img812/9480/21582148.png';" onMouseOut="this.src = 'http://img831.imageshack.us/img831/2601/84599159.png';" /></div>
<div class="bloc_texte" id="onglet3">
<div class="contenu">
<div style=" padding-top:60px; width:682px; height:422px; background-image:url('http://img94.imageshack.us/img94/1497/fond3u.png');">
<div style=" background-color: rgba(53, 54, 49, 0.3); -moz-border-radius-topleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px; width:500px; height:330px; border:1px #5B5B55 solid; padding-top:7px; text-align:left; box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 */
-webkit-box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 pour Firefox */
-moz-box-shadow: 0px 0px 4px #000000; /* Propriété CSS3 pour navigateurs Webkit */
background-color: #f8f8f8\9; /* Hack pour cibler IE8, IE7, IE6 */">
<div style="margin-left:40px; margin-top:40px;">
Où avez-vous trouvé le forum ?<br>
Des idées pour l'améliorer ?<br>
</dIv>
<div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
