Bonjour,

Je souhaiterai ajouter une couleur gris en background de ma balises <li> j'essayer plusieurs choses mais rien n'a faire ..

voici mon code :

(Css)


header{
	margin: 0 auto; 
	width:800px;
}

#cadre_logo{
	background:#90bd48;	
	width:147px;
	height:85px;
	float:left;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	
}

.logo{
	width:143px;
	height:65px;
	background:url(images/logo.png);
	margin-top:-5px;
}
#barreverte{
	height:5px;
	background:url(images/barreverte.jpg);
	background-repeat:repeat-x;
}

body{
	
	height:1203px;
	background:url(images/background.jpg);
	background-repeat:repeat-x;
}

nav{
	width:647px;
	height:71px;
	background:#FFF;
	float:left;
	border-bottom-right-radius:5px;

	
}

ul{
	margin-top:25px;
	margin-left:5px;
	float:left;
}

ul li{	
	list-style-type : none;
	display : inline;
	padding:0 1em;
	border-right:solid #CCC 1px;
	
}
li.pucenoir{
	background:green;
}
nav a{
	color: #000;
	text-decoration:none;
	font-size:15px;
	font-family : "CaviarDreams";

}



<div id="barreverte"></div>
		<header>
			<div id="cadre_logo">
			<div class="logo"></div>
			</div>
			<nav>
				<ul>
				
					<li class="pucenoir"><a href="index1.html">ACCUEIL</a></li>
					<li><a href="starpizza.html">STARPIZZA</a></li>
					<li><a href="apropos.html"> A PROPOS</a></li>
					<li><a href="menu.html">MENU</a></li>
					<li><a href="PHILOSOPHIE.html">PHILOSOPHIE</a></li>
					<li><a href="contact.html">CONTACT</a></li>
				</ul>
			</nav>
		</header>


Merci de votre aide et une bonne soirée
Et peut être, afin d'éviter un télescopage avec d'autres <li> dans la page, pensez à limiter la portée du code avec un "namespace" :
#barreverte li {	
	background-color: grey;
}
Salut,

Et bah tu as déjà :
li.pucenoir{
	background:green;
}

Et il s'affiche en vert. Pourquoi ne pas juste le mettre en gris ?
Je crois qu'on loupe un truc dans ce que tu veux faire là....
Olivier C a écrit :
#barreverte li:first-child {	
	background-color: grey;
}

Pourquoi ciblé la div qui contient barreverte alors que li et dans la nav...?
Bonsoir,

Avec un peu de patience et de concentration, j'ai réussi à trouver une solution ..

Merci à vous.
Modifié par massira2 (06 Aug 2018 - 21:06)
rebonjour,

j'ai corrigé tout ce que tu m'as dis mais je comprend pas quand tu dis "il faut donc appliquer l'événement scroll sur ce wrapper au lieu de window".