<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/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">
body{
overflow:hidden;}
::-webkit-scrollbar{width: 6px;height:6px} /*taille pour la barre de défilement a gauche et en bas*/
::-webkit-scrollbar-thumb{background: white; border-radius: 2px;border:1px solid #b8477b;}/*couleur de la barre permettant de défilé*/
.onglet
{
display:inline-block;
width:50px;
height:50px;
font-size:40px;
text-align:center;
position:relative;
left:-0px;
border-radius:100%;
background:url(http://img15.hostingpics.net/pics/5784756032.jpg);
margin-left:40px;
z-index:999;
border:1px solid white;
transition: 0.70s linear;
}
.onglet:hover{
transition: 0.70s linear;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg)}
.onglet_1{
color:grey;}
.contenu_onglet
{
background:#b8477b;
position:relative;
top:-5px;
display:none;
height:300px;
width:500px;
BORDER:1px solid White;
}
.bloc
{
position:relative;
height:300px;
width:500px;
overflow:auto;
text-align:center;
color:#aaadbc;
}
.rubrique{
width:510px;
height:70px;
color:#b8477b;
margin-top:-2px;
text-align:center;
font-family:Lobster;
font-size:40px;
text-shadow:0px 2px white;0px 2px white;0px 2px white;0px 2px white;
}
.code{
position:relative;
top:45px;
left:135px;
font-family:'Arial', sans-serif;
color:#b8477b;
font-size:10px;
letter-spacing:1px;
text-shadow:-1px 0 white, 0 1px white,
1px 0 white, 0 -1px white;}
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1" onclick="javascript:change_onglet('1');"></span>
<span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('2');"></span>
<span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('3');"></span>
<span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('4');"></span>
<span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('5');"></span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_1">
<div class="bloc">Onglet signatureLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris mi, pretium quis lorem at, tincidunt vulputate odio. Phasellus ex enim, eleifend molestie congue id, condimentum ut neque. Phasellus rhoncus interdum purus, ac mollis turpis ultricies at. Aliquam molestie euismod elit sed imperdiet. Fusce lacus ipsum, rhoncus ac lacinia eu, maximus sed arcu. Ut malesuada urna non ligula vulputate pulvinar. Nunc elit leo, mattis quis fermentum id, pulvinar a ligula. Duis congue sed dolor eget condimentum. Curabitur tortor massa, mollis imperdiet accumsan eu, maximus eleifend ex. Curabitur placerat consectetur elementum. Sed venenatis eget nisi eu maximus. Sed iaculis, ligula ut placerat pretium, magna purus pretium dui, non faucibus libero sapien eget elit. Vivamus eget mauris a metus consectetur convallis et nec neque. Nam pulvinar justo massa, vel ullamcorper nisl cursus eget.
Nullam risus eros, sodales vitae leo in, congue volutpat nisi. Proin vitae porta mi. Praesent id odio cursus, interdum lectus ac, rhoncus tortor. Nam congue ultricies sapien sit amet blandit. In a eleifend ante, eu rutrum urna. Aenean commodo arcu non dictum tincidunt. Etiam interdum tristique lacus non pharetra. Nam id nulla molestie magna elementum volutpat vel ut ipsum. Fusce mollis elit eu risus bibendum consectetur. Proin venenatis ex neque, ac gravida felis feugiat quis. Nulla eu luctus nunc. Proin eget hendrerit urna. Aliquam erat volutpat. Pellentesque ut diam mollis, semper velit at, efficitur orci. Morbi libero ligula, porta nec cursus at, bibendum elementum lectus.
Ut at ligula et neque scelerisque placerat nec sed felis. Aenean eget ornare nisi, vitae molestie lorem. Ut ut lorem eget orci blandit lacinia. Donec ornare ante id odio vehicula fringilla vitae sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae eros metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
<div class="rubrique">Signature</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_2">
<div class="bloc">Onglet QSJ</div>
<div class="rubrique">Qui suis-je?</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_3">
<div class="bloc">Onglet Cadeaux</div>
<div class="rubrique">Cadeaux</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_4">
<div class="bloc">Cette Teams</div>
<div class="rubrique">Team</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_5">
<div class="bloc">Famille</div>
<div class="rubrique">Famille</div>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1';
change_onglet(anc_onglet);
//-->
</script>
<div class="code">©Codage fait par Caroline. pour livelovegirl</div>
</body>
</html>
Accueil 
Sujet: Code signature à onglets 1 
Ven 3 Juil - 15:53
