<meta content="text/html;charset=utf8" http-equiv="Content-Type" /> <link rel="stylesheet" href="http://keylha.esy.es/stylesheetphantom.css" />
<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>
<style type="text/css">
* {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;}
.bann{
width: 520px;
height: 276px;
overflow: hidden;}
.intro{
margin-top: 16px;
margin-bottom: 16px;
width: 520px;
background: #eceeeb;
height: 108px;}
.introc{
height: 80px;
margin-left: 117px;
position: absolute;
margin-top: 3px;
width: 390px;
text-align: justify;
font-size: 10px;
font-family: Verdana;
padding-bottom: 10px;
overflow: auto;
padding-top: 10px;
border: 1px solid #4f483f;}
.icon{
width: 100px;
float: left;
height: 100px;
border: 4px solid #3faca9;}
.contenu_onglet{
padding-top: 14px;
text-align: center;
height: 564px;
width: 520px;
background: #eceeeb;
display:none;}
.onglet{
display: inline-block;
background-position: 30% 60%;
width: 100px;
height: 18px;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
color: #655d55;
font-family: Verdana;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 10px;}
.onglet_1{
color: #3fa8a9;}
.onglet:hover{
color: #7ad7d7;}
.cadre{
width: 490px;
border: 1px solid #f5f7f1;
height: 546px;
overflow: auto;
margin: auto;}
.img{
width: 98%;}
*::selection {
background: #655d55;
color:#f5f6f6; }
*::-moz-selection {
background: #655d55;
color:#f5f6f6; }
*::-webkit-selection {
background: #8cdbde;
color:#f5f6f6; }
::-webkit-scrollbar {
width: 7px; }
html > ::-webkit-scrollbar {
width: 9px;}
::-webkit-scrollbar-thumb {
background: #3faca9;}
::-webkit-scrollbar-track-piece {
background-color: #f4f5f6;}
h2{
font-family: 'phantomregular';
letter-spacing: 5px;
font-size : 26px;
color: #4f483f;
text-transform: uppercase;
}
h2:hover{
color: #0c9894;
letter-spacing: 8px;}
.comm{
border: 1px solid #655d55;
color: #655d55;
font-family: Tahoma;
font-size: 9px;
letter-spacing: 1px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
width: 461px;}
.titre{
color: #655d55;
font-size: 40px;
letter-spacing: 4px;
text-transform: uppercase;
font-family: phantomregular;}
.titrebloc{
text-align: center;
position: absolute;
width: 520px;
margin-top: -5px;
height: 50px;}
</style>
<center>
<div class="bann"><img src="https://image.noelshack.com/fichiers/2017/16/1492455815-galerie-yuu-bann.png"/></div>
<div class="titrebloc">
<span class="titre">Galerie d'Atol</span>
</div>
<div class="intro">
<div class="icon"><img src="https://image.noelshack.com/fichiers/2017/16/1492460001-9ycf53j.png"/></div>
<div class="introc">Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; </div>
</div>
<div id="contenu_onglet_1er" class="contenu_onglet">
<div class="cadre">
<h2>Kits</h2>
<a href="" target="blank">
<img src=""/class="img"/></a>
<div class="comm">Eius latens et vicissim nec sex latens delectabatur aliquotiens nec hoc ut ingentia vetitis</div>
<a href="" target="blank">
<img src=""/class="img"/>
</a>
<div class="comm">Eius latens et vicissim nec sex latens delectabatur aliquotiens nec hoc ut ingentia vetitis</div>
</div>
</div>
<div id="contenu_onglet_2eme" class="contenu_onglet">
<div class="cadre">
<h2>200 x 400</h2>
<img src=""/>
<img src=""/>
</div>
</div>
<div id="contenu_onglet_3eme" class="contenu_onglet">
<div class="cadre">
<h2>Larges Pièces</h2>
<a href="" target="blank">
<img src=""/class="img"/>
</a>
<div class="comm">Eius latens et vicissim nec sex latens delectabatur aliquotiens nec hoc ut ingentia vetitis</div>
<a href="" target="blank">
<img src=""/class="img"/>
</a>
<div class="comm">Eius latens et vicissim nec sex latens delectabatur aliquotiens nec hoc ut ingentia vetitis</div>
</div>
</div>
<div id="contenu_onglet_4eme" class="contenu_onglet">
<div class="cadre">
<h2>Autre</h2>
<a href="" target="blank">
<img src=""/class="img"/>
</a>
<div class="comm">Eius latens et vicissim nec sex latens delectabatur aliquotiens nec hoc ut ingentia vetitis</div>
</div>
</div>
<span onmouseover="javascript:change_onglet('1er');" id="onglet_1er" class="onglet_0 onglet">Sign/Bann</span>
<span onmouseover="javascript:change_onglet('2eme');" id="onglet_2eme" class="onglet_0 onglet">Avatars</span>
<span onmouseover="javascript:change_onglet('3eme');" id="onglet_3eme" class="onglet_0 onglet">LP</span>
<span onmouseover="javascript:change_onglet('4eme');" id="onglet_4eme" class="onglet_0 onglet">Autre </span>
<br /> <br /><span style="font-size: 10px; color: lightgrey; letter-spacing: 8px;">(c) Code par Keylha</span>
</center>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
Accueil
Désoléeee 
Si tu veux que je fasse des modif hésite pas à demander c:
MDR non pas du tout, c'est juste que j'ai bidouillé de manière sale avec un position absolute 
J'fais ça de suite 
