[Résolu] Onglet séléctionné

Salut à tous,

j'ai actuellement un menu à onglet qui marche bien (merci à ceux qui m'ont aider ).
j'entreprends maintenant d'ajouter une classe "selected" qui permet de voir l'onglet actif.
Ainsi si je clic sur l'onglet 1 il gardera son aspect de roll-hover.

Coté HTML j'ai ceci :

<div id="onglet_enchere" class="titre_enchere"><span style="float:left;width:70%; padding-top:2px;">ENCHERES</span><span style="float:right;width:30%;padding-top:2px;">
						<ul>
							<li class="selected"><a href="javascript:onglet_encheres(1)"><span>1</span></a></li>
							<li><a href="javascript:onglet_encheres(2)"><span>2</span></a></li>
							<li><a href="javascript:onglet_encheres(3)"><span>3</span></a></li>
						</ul></span>
						</div>

J'ai donc rajouté une class selected à l'onglet que je veux séléctionner.

De base mon css est celui ci :

#onglet_enchere ul {
	list-style-type: none;
	width: 100%;
}
#onglet_enchere li {
	float: left;
	display:inline;
}
#onglet_enchere li a {
	float: left;
	margin:0px 5px 0px 5px;
	padding-left:3px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold; 
	font-family: arial; 
	font-size: 8.5pt;
	background-position:0 0;
	background-repeat:no-repeat;
}
#onglet_enchere li a span {
	display:block;
	padding-left:2px;
	padding-right:3px;
	float:left;
	font-size: 8.5pt;
	text-align:center;
	text-decoration:none;
	color:#fff;
	background-position:100% 0;
	height:18px;
	cursor:pointer;
}
#onglet_enchere li a:hover {
	color:#B20902;
	background-position:0 -82px;
	background-repeat:no-repeat;
	
}
.titre_enchere a{background-image:url(struct/color/onglet_video_gauche.gif);}
.titre_enchere a span{background-image:url(struct/color/onglet_video_droit.gif);}

Le but étant d'appliquer le style des hover à ma classe j'ai fait ceci :

#onglet_enchere.selected a
{
	color:#B20902;
	background-position:0 -82px;
	background-repeat:no-repeat;
}
#onglet_enchere.selected  a span
{
	background-position:100% -82px;
	background-repeat:no-repeat;
	color:#B20902;
}

Mais l'onglet reste désespérément identique à un onglet n'ayant pas la classe "selected"
Auriez vous quelques idées pour m'aider ?

Merci
Modifié par GrUnK (12 Sep 2007 - 17:54)

Salut,
je crois avoir ta solution :

/* precise :link et :visited */
#onglet_enchere li a:link, #onglet_enchere li a:visited {
	float: left;
	margin:0 5px; /* <- pluys simple que 0px 5px 0px 5px;*/
	padding-left:3px;
	text-align: center; /* à prioris inutile puisque tu es en float et sans width precisée*/
        /* inutile aussi ... dans le span ca suffit 
        color: #ffffff;
	font-weight: bold; 
	font-family: arial; 
	font-size: 8.5pt;
        */
	text-decoration: none;
	/* background-position:0 0; ...par defaut c'est déjà ca */
	background-repeat:no-repeat;
}
#onglet_enchere li span {
	display:block;
	padding-left:2px;
	padding-right:3px;
	/*float:left; ca sert à rien je pense*/
	color: #ffffff;
	font-weight: bold; 
	font-family: arial; 
	font-size: 8.5pt; /* je sais pas si une valeur non entière sera comprise */
	background-position:right top;
	height:18px;
	cursor:pointer; /* ? */ 
}
#onglet_enchere li a:hover, #onglet_enchere li a:active,
#onglet_enchere li.selected a:link, #onglet_enchere li.selected  a:visited {
	color:#B20902;
	background-position:0 -82px;
	background-repeat:no-repeat;
}

.. test bien sous IE6.

Merci de ta réponse et des quelques modifs apportée
En fait mon premier essai était le bon , sauf que j'avaus pas mis d'espace entre #onglet_enchere et .selected

#onglet_enchere.selected a {}
#onglet_enchere.selected a span {}

Quand les propriétés définies pour un sélecteur ne s'appliquent pas du tout, c'est généralement parce que le sélecteur ne correspond à rien dans le code HTML de la page.

Ici, tu vises (pour le premier sélecteur) tous les éléments a qui sont enfants ou descendants d'un élément qui aurait à la fois pour identifiant "onglet_enchere" et pour classe "selected".

Si je regarde ton code HTML... l'identifiant "onglet_enchere" et la classe "selected" sont attribués à des éléments différents.

Pour rappel, les deux sélecteurs suivants sont équivalents:

élément#identifiant.classe {}
élément.classe#identifiant

Solution dans ton cas: comme l'élément qui porte la classe "selected" est un enfant ou descendant de l'élément qui porte l'identifiant "onglet_enchere", il faut corriger ton sélecteur ainsi:

#onglet_enchere .selected a {}
#onglet_enchere .selected a span {}

(on remarquera bien l'espace entre #onglet_enchere et .selected: l'espace est en effet le sélecteur de descendant.

On peut aussi être plus explicite pour s'y retrouver:

div#onglet_enchere li.selected a {}
div#onglet_enchere li.selected a span {}

Modifié par Florent V. (12 Sep 2007 - 17:54)