[Résolu] Bloquer sur mon nav

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

Salut,

li {	
	background-color:grey;
}

https://jsfiddle.net/bzjemnrp/2/

Il est ou le piège ?

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;
}

_laurent a écrit :
Salut,

li {	
	background-color:grey;
}

https://jsfiddle.net/bzjemnrp/2/

Il est ou le piège ?

En faite, je voudrais que seulement le background de l'ongle accueil qui soit en gris ..

comme ça :

https://image.noelshack.com/fichiers/2018/31/5/1533325708-starpizza-modele.jpg

#barreverte li:first-child {	
	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...?

_laurent a écrit :
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à....

J'ai mis une couleur uniquement pour tester, je voudrait que ça prend tout le background de l'onglet accueil au complet..

comme sur la photo ici ..

https://image.noelshack.com/fichiers/2018/31/5/1533325708-starpizza-modele.jpg

Hello,
du padding de tous les côtés sur le li?

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".