28221 sujets

CSS et mise en forme, CSS3

Onglet

Bonjour à tous!
j'aimerai réaliser un menu à onglet avec CSS.
Beaucoup de site en proposent mais je voudrais savoir s'il était possible de spécifier un style pour chaque onglet (couleur différente en l'occurence)?
Merci de vos réponses
ouai c'est vrai Smiley confused
bon voici mon code:
<html>
<head>
<title>Annuaire</title>
<style type="text/css">

.conteneur_onglet {
list-style-type: none;
border-bottom: 1px solid black;
padding-bottom: 29px;
margin: 0;
}

#Etudiant {
float: left;
margin: 1px 1px 0 0px;
border: 1px solid black;
background-color: #FF0000;
}

#Enseignant {
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #0000FF;
}

#MaitreA {
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #00FF00;
}

#Entreprise{
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #FE6625;
border-bottom: 1px solid #FE6625;
}

#Personnel{
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #0f0f0f;
}

#Cours{
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #FF1CAE;
}

#Classe{
float: left;
margin: 1px 1px 0 1px;
border: 1px solid black;
background-color: #FFF000;
}

.active {
font: bold 15px;
border-color: red;
padding: 1px;
}

a {
display: block;
color: white;
text-decoration: none;
padding: 4px;
}

a:hover {
background: white;
color: #000000;
text-decoration: underline;
}
</style>
</head>

<body>

<ul class="conteneur_onglet">
<li id=Etudiant><a href="#">Etudiant</a></li>
<li id=Enseignant><a href="#">Enseignant</a></li>
<li id=MaitreA><a href="#">Maître d'apprentissage</a></li>
<li id=Entreprise class="active"><a href="#">Entreprise</a></li>
<li id=Personnel><a href="#">Personnel</a></li>
<li id=Classe><a href="#">Classe</a></li>
<li id=Cours><a href="#">Cours</a></li>
</ul>
<div width="100%" style="background-color: #FE6625;border: 1px solid black;border-top: 1px solid #FE6625;">
partie centrale
<br/>
partie avec du contenu occupant le reste de la largeur
<br/>
partie avec du contenu occupant le reste de la largeur
<br/>
partie avec du contenu occupant le reste de la largeur
<br/>
partie avec du contenu occupant le reste de la largeur
<br/>
</div>
</body>
</html>

je voudrais que l'onglet actif ne soit plus cliquable... (pas d'intéret puisqu'il est actif!)
Auriez vous une solution svp?
Ps: l'actif ici est l'onglet Entreprise

Merci d'avance
Sujet clos
Aller à