28220 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme avec style pour liens

bonjour les fous du css, j'arrive avec une nouvelle colle que vous allez torcher rapidement j'en suis sur Smiley biggrin

Voila j'ai un menu mis en forme dans une liste comme ceci:

<div id="menu">
	<div id="head_menu">&nbsp;</div>
	
	<ul>
	<li ><a href="#" id="active">Accueil</a></li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Produits</a></li>
	
	</ul>
	
	
	<div id="foot_menu">&nbsp;</div>
	</div>


et voici le css qui s'y applique: 

#menu ul{
		margin: 0;
		padding: 10px 0 0 30px;
		list-style: none;
		text-align: left;
		line-height: 2em;
	}

#menu li a{
		text-decoration: none;
		font-weight: bold;
		color: #28711C;
		padding-left: 20px;
	}
	
#menu li a:hover{
		color: #83B215;
		background:url(images/feuille.gif) .1em .1em no-repeat;
	}
	
#active{
		color: #83B215;
		background:url(images/feuille.gif) .1em .1em no-repeat;
	}


vous pouvez voir que j'ai le lien "Accueil" qui a l'attribut "active", et cet attribut présente le meme aspect que le lien survolé (a:hover). Tout cela pour indiquer au visiteur dans quelle rubrique il se trouve.

La différence entre le lien "au repos" et le lien survolé est l'apparition d'un background et un changement de couleur de police.

Or, cela ne fonctionne pas dans l'attribut "active". Quand mon lien "accueil" a l'attribut "active", il a en effet le background bien présent mais la couleur du texte reste inchangée et reste de la meme couleur que le lien normal.

j'espere que vous comprennez ce que je veux dire. J'aimerais que mon lien, quand il a l'attribut "active" ai la meme couleur que les liens survolés. mais ca n'est pas le cas bizarement...
Modifié par Sk4pis0 (10 Jan 2006 - 08:50)
Bonsoir,

Je ferais qq chose comme cela : 

<html>
<head>
<style type="text/css">
#menu ul{
	margin: 0;
	padding: 10px 0 0 30px;
	list-style: none;
	text-align: left;
	line-height: 2em;
}
#menu li a{
	text-decoration: none;
	font-weight: bold;
	color: #28711C;
	padding-left: 20px;

}
#menu a:hover, #menu #active a{
	color: #83B215;
	background:url(images/feuille.gif) .1em .1em no-repeat;
}
</style>
</head>
<body>
<div id="menu">
	<div id="head_menu">&nbsp;</div>
	<ul>
	<li id="active"><a href="#">Accueil</a></li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Produits</a></li>
	</ul>
	<div id="foot_menu">&nbsp;</div>
</div>
</body>
</html>

Modifié par Alan (09 Jan 2006 - 18:11)
Alan merci bcp tu m'a trouvé une solution propre et efficace, du vrai ccs quoi Smiley biggrin

!!! Attention ce Forum est un repère de cerveaux en puissance Smiley biggol
Sujet clos
Aller à