<!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"/>
<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-scrollbar { width:10px; }
::-webkit-scrollbar-track { background-color:#000000; }
::-webkit-scrollbar-thumb { background-color:white; }
::-webkit-scrollbar-button { background-color:#125390; }
::-webkit-scrollbar-corner { background-color:#000000; }
.onglet,
.onglet_0 {display:inline-block;
width: 97px;
height:50px;
background-color:#1D1D1D;
border-radius:10px 0 20px 0;
box-shadow:0 0 5px white inset;
margin:auto;
margin-top:30px;
margin-bottom:10px;
margin-left:50px;
margin-right:50px;
line-height: 50px;
font-family : Impact;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
color:white;
}
.onglet:hover{
background-color:white;
-webkit-transition: 500ms;
-moz-transition: 500ms;
transition:500ms;
}
.item1{
margin-top:50px;
}
.item2{
margin-top:50px;
width:500px;
}
.contenu_onglet{
font-size : 14px ;
width:500px;
height:350px;
background-color:#1D1D1D;
border-radius:10px 0 20px 0;
box-shadow:0 0 15px white inset;
display:none;
height : 360px;
width : 600px;
overflow : auto;
color: #1f5873;
font-family:Trebuchet MS
}
.cadre {
width: 400px;
height: 177px;
margin: auto;
margin-right: 97px;
margin-top: 70px;
}
.contact {border: 1px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
background: rgba(238, 120, 55, 0.6);
padding: 5px;
margin-top: 10px;
color: black
}
a {color: black;
text-decoration: none;
text-shadow: none;
font-weight:bold;
}
</style>
</head>
<body>
<div class="onglets">
<center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Cadeaux</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Team</span>
</center>
</div>
<center> <div class="contenu_onglet" id="contenu_onglet_1er"><div class="item1">
blablablabla
</div>
</div>
<center> <div class="contenu_onglet" id="contenu_onglet_2eme">
<div class="item2">
BLABLABLABLA
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Sujet: Un ptit codage tout simple 
Ven 24 Avr - 21:58
