QEEL en onglets [CSS3, sans javascript]

Code:

<div id="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4">
<br /><br /><br /><br /><br /><br />
<span class="ongl1"><a href="#accueil1">Onglet 1</a></span><span class="ongl2"><a href="#accueil2">Onglet 2</a></span><span class="ongl3"><a href="#accueil3">Onglet 3</a></span><span class="ongl4"><a href="#accueil4">Onglet 4</a></span><div id="content1"><div id="content2"><div class="info_accueil">Ici se trouve le contenu de votre second onglet.</div></div><div id="content3"><div class="info_accueil">Ici se trouve le contenu de votre troisième onglet.</div></div><div id="content4"><div class="info_accueil">Ici se trouve le contenu de votre quatrième onglet.</div></div><div class="info_accueil">Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite. </div></div>
</div></div></div></div><span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>

Code:

.ongl1, .ongl2, .ongl3, .ongl4
{
display: inline-block;
width: 120px;
height: 30px;
margin-left: 20px;
background-color: #abb8cd;
border-top: 1px solid #808489;
border-left: 1px solid #808489;
border-right: 1px solid #808489;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
text-align: center;
}
.ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
{
background-color: #d3dce9;
}
.ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
{
display: block;
padding-top: 2px;
font-weight: bold;
text-decoration: none !important;
color: #8b9cb8 !important;
text-shadow: 1px 1px 0px #eef1f6;
font-size: 18px;
}
.ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
{
color: #446291 !important;
text-shadow: 1px 1px 0px #23334c;
}
#content1
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
border: 1px solid #596b87;
font-size: 11px;
color: #3c506f;
}
#content2, #content3, #content4
{
display: none;
}
#accueil1:target #content1
{
display: block;
height: 300px;
overflow: hidden;
border: 1px solid #596b87;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil2:target #content2
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil3:target #content3
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
}
#accueil4:target #content4
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
}
.info_accueil
{
padding: 10px;
text-align: justify;
}

.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}

Kagami Tsuki a écrit:Merci :)