<div id="menu-tab"><!----------------tableau-01---------------------------------->
<div id="page-wrap">
<div class="tabs"><!----------------onglet-01-accueil-------------------------->
<div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">HTML</label>
<div class="content">
<p><a href="#">Retour Acceuil</a></p>
</div>
</div>
<!----------------onglet-02-articles-------------------------->
<div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">CSS</label>
<div class="content">
<p>Exemple, une image, du texte</p>
<br /><p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>
</div></div></div></div></div><p><br /><br /><br /></p>

<style type="text/css"><!--
/*-----------------------------------------*/
* {
margin: 0;
padding: 0;

}
#menu-tab {
/*background: white;*/
font-family: 'trebuchet ms', geneva;
font-size: 11pt;
color:black;
}

#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}

/*--------------Dimensions tableau--------------*/

#page-wrap {
width: 70%;
margin: 10px auto;

}

/*--------------Onglets--------------*/

.tabs {
position: relative;
min-height: 480px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;margin-top:-10px;

}
.tab label {
background: rgba(245, 245, 245, 0.38);
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
border-radius: 10px 10px 0px 0px;
box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
}
.tab [type=radio] {
display: none;
}

/*--------------Contenu article onglet--------------*/
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 0px 10px 10px 10px;
box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
overflow: hidden;
overflow-y: auto;
margin-bottom: -20px;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/*-------------Onglets actifs--------------*/

[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
/*--------------Images--------------*/

.content img {
border:4px solid white;
box-shadow:6px 6px 10px grey;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

.content img:hover {
opacity: 0.8;
-webkit-transform: rotate(7deg);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
--></style>