28172 sujets

CSS et mise en forme, CSS3

Identifier et styler element de menu correspondant a la page en cours

Bonjour -

j'ai un problème avec un menu (liste avec CSS). Le menu s'affiche bien, les liens fonctionnent, les hover et focus fonctionnent sans problème.
Je voudrais aussi que l'élément de menu correspondant à la page en cours s'affiche différemment (dans l'exemple ci joint, je le repère avec un id 'courant' et j'essaie d'appliquer dans le CSS le style du survol à l'élément 'courant'. Bien sur, pour chaque page, j'appliquerai le id 'courant' à une balise a diférente. Ca ne marche pas, je ne comprends pas bien pourquoi. Si la solution saute aux yeux de l'un d'entre vous, je suis preneur !

Merci d'avance
Olivier

HTML
<body>
<div id="conteneur">
	<h1 id="header">Credit Risk and Credit Ratings</h1>
	<div id="barregauche">
		<ul id="menu"> 
    		<li><a href="#" title="Home" id="courant">Home</a></li> 
    		<li><a href="#" title="Module 1">Module 1</a></li> 
 		    <li><a href="#" title="Module 2">Module 2</a></li> 
    		<li><a href="#" title="Module 3">Module 3</a></li> 
   			<li><a href="#" title="Module 4">Module 4</a></li>
   			<li><a href="#" title="Module 5">Module 5</a></li>  			 
 		    <li><a href="#" title="Final Test">Final Test</a></li> 
		</ul>
	</div>
	<div id="contenu">
	</div>
	<div id="barredroite">
	</div>
	<div id="footer">
	  	<img id="validator" alt="" src="validw3c.png"/>
		<h6>Copyright @2010 - Olivier Delfour - All Rights Reserved</h6>
	</div>
</div>


</body>


CSS
html,body {
	height:100%;
	font-family:"Century Gothic", Verdana, Geneva, Tahoma, sans-serif;
}
body {
	overflow:auto;
}
#conteneur {
	padding:0;
	position:relative;
	top:0;
	width:90%;
	min-width:800px;
	max-width:1200px;
	margin:0 auto;
	min-height:95%;
	background-image:url('fond_degrade.jpg');
	text-align:justify;
}
#header {
	width:100%;
	height:100px;
	top:0;
}
h1 {
	line-height:3em;
	text-align:center;
	vertical-align:bottom;
	font-family:"Segoe Script","Comic Sans MS", Arial,Verdana,serif;
	color:navy;
}
#barregauche {
	width:15%;
	float:left;
	height:80%;
}
#menu { 
    width: 100%; 
    list-style: none ; 
    margin: 0 ; 
    padding: 0 ; 
    }
#menu li a {
	display: block;
	background: #CC0000 ;
	color: #fff;
	font-size: 1.2em;
	font-family: "Segoe Script", "Comic Sans MS", Arial, Verdana, serif;
	line-height: 2em;
	text-align: center;
	text-decoration: none;
	padding: 4px 0;
}
#menu li a:hover, #menu li a:focus {
	background: #FFFFFF ;
	text-decoration: underline;
	font-weight:bold;
	color:#C00;
}
#courant {
	background: #FFFFFF ;
	text-decoration: underline;
	font-weight:bold;
	color:#C00;	
}
#contenu {
	width:73%;
	padding-left:3%;
	padding-right:1%;
	height:80%;
	float:left;
	overflow:auto;
}
#barredroite {
	width:8%;
	margin-right:2%;
	float:left;
	height:80%;
}
#validator {
	position:absolute;
	bottom:1em;
	right:1em;
	border:0;
}

#footer {
	position:relative;
	width:100%;
	min-height:10%;
	clear:both;
	bottom:0;
	text-align:center;
	padding-top:25px;
	font-size:1.5em;
	color:navy;
}
h6 {
	font-family: "Segoe Script", "Comic Sans MS", Arial, Verdana, serif;
}

Modifié par odel (26 Feb 2010 - 15:10)
Salut,

pour commencer l'élément DIV #barregauche ne sert à rien : tu devrais faire flotter directement l'élément UL #menu

Pour ce qui est de ta question c'est un problème de priorité de sélecteurs :
#menu li a:hover, #menu li a:focus, #menu li a:active, #menu #courant { 
    background: #fff ; 
    text-decoration: underline; 
    font-weight:bold; 
    color: #c00; 
}
La pseudo-classe :active permet à IE < 8 de réagir à la navigation clavier (tabulations)
Sujet clos
Aller à