Tableau à onglets - CSS

Code 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(155, 127, 40, 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;
	  }

Code HTML

<div id="menu-tab"><!----------------tableau-01----------------------------------> <div id="page-wrap"> <div class="tabs"><!----------------onglet-01-A-B-C-D--------------------------> <div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">A-B-C-D</label> <div class="content"> <h1>A :</h1> <br /> <p><a href="#">ABONNEMENT, ABONNÉS</a></p> <p><a href="#">Contact</a></p> <p><a href="#">Newsletter</a></p> </div> </div> <!----------------onglet-02-articles--------------------------> <div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">E-F-G-H</label> <div class="content"> <p>Exemple, une image, du texte</p> <br /> <p><img src="https://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p> </div> </div> <!----------------onglet-03-forum--------------------------> <div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label> <div class="content"> <p>Exemple, une image, et une video...</p> <br /> <p><img src="https://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p> <p><iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p> </div> </div> <!----------------onglet-04-libre--------------------------> <div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label> <div class="content"> <p>Une vidéo de Constance..!</p> <br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div> </div> <!----------------onglet-05-libre-------------------------> <div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label> <div class="content"><br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> <!----------------onglet-06-libre-------------------------- <div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label> <div class="content"> <p>Code CSS</p> <br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div> </div> </div>---></div> </div>