Coucou Zomega :)
J'ai fait un essai, dis moi si c'est ce que tu cherches à faire (^-^).
Voici les parties à remplacer, la liste des onglets :
- Code:
<td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
<a target="_blank" class="linknav" href="">Titre 1</a><a target="_blank" class="linknav" href="">Titre2</a><a target="_blank" class="linknav" href="">Titre 3</a><a target="_blank" class="linknav" href="">Titre 4</a><a target="_blank" class="linknav" href="">Titre 5</a>
</td>
A la place j'ai mis :
- Code:
<td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
<label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
</td>
Ensuite, pour l'affichage du contenu, anciennement c'était ceci :
- Code:
<div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.
</div>
Maintenant avec les 5 contenus :
- Code:
<div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
<input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 1 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 2 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 3 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 4 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 5 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
</div>
Ensuite, le CSS supplémentaire pour que ça fonctionne :
- Code:
/* par défaut on masque le conenu de l.onglet */
.contenu-onglet, .radio-onglet {
display: none;
}
/* on affiche l.onglet sélectionné */
.radio-onglet:checked + .contenu-onglet {
display: block;
}
Voici l'ensemble de ta page HTML avec juste les modifications dont je parlais :
- Code:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>The Herald Sun</title><style type="text/css">
<style type="text/css">
.banana{color: #2DB38F; font-family: Oswald;}
.peach{color: #B51F8C; font-family: Oswald;}
.b1 { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: bold; color: #e07059; }
/*Tableau du mag */
.tab {width:500px !important;
height: 600px :important!;
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
background-color: #fff;
border: 5px solid #fff;}
.tab0 {width:500px !important;
margin:auto;}
/*Colonnes colorées en haut du tableau*/
.tab1 {width: 25%, display:block;
background-color: #ffc22c;}
.tab2 {width: 25%, display:block;
background-color: #f79037;}
.tab3 {width: 25%, display:block;
background-color: #13ada6;}
.tab4 {width: 25%, display:block;
background-color: #b6d552;}
.tab5 {width: 25%, display:block;
background-color: #ffc22c;
height:25px;}
.tab6 {width: 25%, display:block;
background-color: #f79037;}
.tab7 {width: 25%, display:block;
background-color: #13ada6;}
.tab8 {width: 25%, display:block;
background-color: #b6d552;}
/*Titres*/
.headlight { width: 100%;
background-color: #fff;
height:100px;
font-family: oswald;
color: #414142 !important;
text-align: center;
text-transform: uppercase;
font-size: 50px;
font-weight: 700;}
.bottomlight { width: 100%;
background-color: #fff;
height:60px;
font-family: oswald;
color: #414142 !important;
text-align: justify;
text-transform: italic;
font-size: 14px;
font-weight: 500;
line-height: 12px;
font-style:italic;
padding: 10px;}
.sub {color:#b6d552;
display:block;
font-family: 'Roboto', sans-serif;
font-size:10px;
margin-left: auto;
margin-right: auto;
text-align:center;
width:90%;
text-transform: uppercase;
padding-top:-150px;
border-bottom:1px solid #13ada6;}
.cimg{
opacity: 0.7;
transition-duration: 0.7s;}
.cimg:hover{
opacity: 1;
transition-duration: 0.7s;}
/*Tableau à onglets*/
.linknav {
display:block;
background-color: #c9d852;
margin:5px;
padding:5px;
color: #eeeeec !important;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-family: 'Questrial', sans-serif;
font-size: 14px;
font-weight: bold;
}
.linknav:hover {
display:block;
background-color: #ededea;
border-bottom: #e1755d 2px solid;
margin:5px;
padding:5px;
color: #e1755d !important;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-family: 'Questrial', sans-serif;
font-size: 14px;
font-weight: bold;
}
/* par défaut on masque le conenu de l.onglet */
.contenu-onglet, .radio-onglet {
display: none;
}
/* on affiche l.onglet sélectionné */
.radio-onglet:checked + .contenu-onglet {
display: block;
}
</style>
<center><div class="tab">
<table class="tab0" style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;">
<tr>
<td class="tab5">
</td><td class="tab6">
</td><td class="tab7">
</td><td class="tab8">
</td>
</tr>
<tr> <table style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;" > <tr><td class="headlight">The Herald Sun <br /> <span class="sub">slogan de la mort qui tue en vrai</span></td>
<tr><td><table class="tab0" style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;">
<tr>
<td class="tab1">
</td><td class="tab2">
</td><td class="tab3">
</td><td class="tab4">
</td>
</tr></table><img src="http://img15.hostingpics.net/pics/750110melbournecityscape.png" class="cimg" width="500px"/><table class="tab0" style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;">
<tr>
<td class="tab1">
</td><td class="tab2">
</td><td class="tab3">
</td><td class="tab4">
</td>
</tr></table> </td> </tr>
<tr><td><center>
<div style="vertical-align:top;background-color: #edefec; border-bottom: 2px solid #ee9507;width:500px">
<div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
Edito
</div>
<div align="justify" style="display:block;height:120px;overflow:auto;background-color: #edefec;padding:5px;margin:5px;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id nibh congue, tempor eros ac, vehicula felis. Morbi at lectus quis ligula lobortis fringilla. Nunc in tincidunt ipsum. Nulla facilisi. Fusce vel nunc id metus facilisis aliquam at eget turpis. Quisque ut justo non risus commodo maximus. In hac habitasse platea dictumst. Vivamus nisi nibh, scelerisque vel dolor tempus, facilisis pharetra magna. Sed pulvinar congue dictum. Curabitur nec ligula et mauris placerat volutpat. Fusce sodales id augue sed mollis. Vestibulum mollis ac lorem a pretium. Donec et venenatis mi, volutpat consectetur mauris.
</div>
</div>
</center>
<table>
<tbody>
<tr>
<td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
<label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
</td>
<td align="justify" style="border-bottom: 2px solid #50c6b6; width: 300px; height: 150px;overflow:auto;font-size: 12px;color: #787878;">
<div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
Infos
</div>
<div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
<input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 1 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 2 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 3 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 4 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
<input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche"><div class="contenu-onglet">Contenu 5 - Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
</div>
</td>
</tr>
</tbody>
</table>
</td></tr>
<tr>
<table style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;" > <tr><td class="bottomlight">Maecenas vel libero quis arcu eleifend molestie accumsan eu neque. Suspendisse metus metus, imperdiet vitae turpis vel, semper efficitur velit </td></tr></table>
<table class="tab0" style="cellspacing=0; border-spacing : 0;
border-collapse : collapse;">
<tr>
<td class="tab5">
</td><td class="tab6">
</td><td class="tab7">
</td><td class="tab8">
</td>
</tr></table>
</tr></table></div>
