28172 sujets

CSS et mise en forme, CSS3

Menu à onglet

Bonjour
J'ai utilisé le code ci-dessous trouvé sur alsacréations pour faire mon menu à onglet.
Je souhaiterai y ajouter le fait que par exemple en cliquant sur onglet 2 celui ci reste sur fond blanc quand je suis sur la page correspondante et ainsi de suite pour chaque onglet.
Je n'arrive pas à le faire, j'ai essayé une class différente pour chaque onglet, mais je ne trouve pas.
Merci pour votre aide
Domwlp
---------------------------------------HTML
<ul id="menu">
<li><a href="*">onglet 1</a></li>
<li><a href="*">onglet 2</a></li>
<li><a href="*">onglet 3</a></li>
<li><a href="*">onglet 4</a></li>
<li><a href="*">onglet 5</a></li>
</ul>
----------------------------------------CSS
#menu {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 5px 20px;
margin: 0;
background: #98B924;
color: #fff;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */

}
#menu li a:hover, #menu li a:focus {
background: #b8da40;
color: #000;
}
--------------------------------------------------------------------------
Hello,

Bien longtemps que je ne suis pas plongé dans le code, mais peut être une petite piste qui t'aideras.

Après d'autres seront surement plus capable de répondre à taa question c'est juste une suggestion.

Bon courage

---------------------------------------HTML
<ul id="menu">
<li class="allume"><a href="*">onglet 1</a></li>
<li><a href="*">onglet 2</a></li>
<li><a href="*">onglet 3</a></li>
<li><a href="*">onglet 4</a></li>
<li><a href="*">onglet 5</a></li>
</ul>
----------------------------------------CSS
#menu {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 5px 20px;
margin: 0;
background: #98B924;
color: #fff;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */

}
#menu li a:hover, #menu li a:focus,#menu li a.allume {
background: #b8da40;
color: #000;
}
Bonjour,

@fizuli

#menu li a:hover, #menu li a:focus,#menu li a.allume {

background: #b8da40;

color: #000;

}


Dans ce cas il faut corrigé ton html en faisant porter la classe sur le <a> Smiley cligne 
<li><a href="*" class="allume">onglet 1</a></li>
Sujet clos
Aller à