[Resolu] Changement de la largeur d'une cellule sur le menu horizonta

Mince, vous semblez pas inspirés

Faut que je détail plus ?

Bonjour,

yogui a écrit :

Faut que je détail plus ?

C'est çà, tu as tout compris

Bon grosse modo, voilà mon menu (il sera un peu plus complet bien sur...)

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">>INSCRIPTIONS</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">>COURSES</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">PROGRAMME</a></li>
					<li><a href="#">Avenirs</a></li>
					<li><a href="#">Découverte</a></li>
					<li><a href="#">Courte Distance</a></li>
					<li><a href="#">Sprint</a></li>
				
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">>INFOS PRATIQUES</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl class="resultat">	
		<dt onmouseover="javascript:montre('smenu3');" class="resultat">>RESULTATS</dt>
			<dd id="smenu3" class="resultat">
				<ul class="resultat">
					<li><a href="#">2006</a></li>
					<li><a href="#">2005</a></li>
					<li><a href="#">2004</a></li>
				</ul>
			</dd>
	</dl>
<dl>	
		<dt onmouseover="javascript:montre('smenu4');">>PHOTOS</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">2006</a></li>
				</ul>
			</dd>
	</dl>
</div>

Et voilà mon petit CSS

<style type="text/css">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 95px;
margin: 0 0px;

}
#menu dt {
cursor: pointer;
color: #FFF;
text-align: center;
font-weight: bol;
font-size: 10px;
font-family: Verdana, Geneva, Arial, sans-serif;
background: #009de0;
border: 0px solid gray;
padding: 5px 0px;
}
.resultat {
width: 90px;
}

#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #014a99;
border: 1px solid white;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
border: 0px;
}
#menu li a:hover, #menu dt a:hover {
background: #ddd;
color: #000;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 0px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}

-->
</style>

Donc si je resume, toutes mes cellules doivent faire 95px de large, sauf la cellule resultat qui doit faire 90... Si je fais ce que j'ai mis sur le CSS, et bien la cellule fait bien 90 de large mais il y a un espace entre celle la et la suivante.

Au passage, il faudra aussi que je mette une couleur spécifique sur une cellule... Donc pendant qu'on y est

#menu dl {
	width: 95px;
}
.resultat {
	width: 90px;
}

Le width: 90px pour la classe "resultat" ne sera à priori pas appliqué, car le sélecteur #menu dl a une priorité supérieure au sélecteur .resultat.
Voir l'article : Cascade CSS et priorité des sélecteurs.

On peut corriger le sélecteur ainsi :

#menu dl.resultat {
	width: 90px;
}

#menu dl a une priorité de 0101.
.resultat a une priorité de 0010.
#menu dl.resultat a une priorité de 0111 (la plus élevée des trois).

Pour changer des couleurs pour tel ou tel élément du menu, même chose : utiliser des classes, et penser à la priorité des sélecteurs.

Merci pour ton aide, ca marche très bien.

Bonne journée