Attribution de classes aux pseudo éléments :before / after ?

Bonjour à tous,

Je suis en train de concevoir le menu de mon site sous wordpress, et je m'arrache un petit peu les cheveux

J'ai en effet rajouté à mon menu un effet d'ombre en haut et en bas:

https://lh3.googleusercontent.com/-Oxi-PCIWbG0/UHPyxjjhc9I/AAAAAAAAEO4/y35HWEGz9lg/w645-h184-n-k/Capture%2Bd%25E2%2580%2599e%25CC%2581cran%2B2012-10-09%2Ba%25CC%2580%2B11.46.33.png

pour cela j'ai fait appel au pseudo élément :before, appliqué à mon menu: avec le code suivant:

#menu:before {  
    content: " ";  
    position: absolute;  
    z-index: -10; 
   	background: aqua;
	min-width: 500px;
    width: 100%;  
    height: 100%;  
    border-radius: 500px / 15px;  
    box-shadow: 0 0 8px #555;  
}

ça consiste donc à reprendre la forme du menu, en y appliquant un fort border radius, pour que ce pseudo élément ressemble au final à une ellipse.

Seulement je me suis attelé ce matin à une nouvelle tâche, à savoir rendre le menu fixed lorsqu'on scrolle un peu vers le bas. J'ai pour cela suivi ces instructions: http://desgeeksetdeslettres.com/blog/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css

pour résumer, lorsqu'on scrolle et que le menu sort de la zone d'affichage, le script rajoute une classe menu_flottant à mon #menu, dont la position devient fixed:

#menu.menu_flottant{
	background: green;
	position: fixed;
	top:0;
	z-index: 1000;
}

Cela fonctionne à peu près, seulement mon pseudo élément :before se positionne alors devant mon menu (j'ai coloré le #menu en vert et le #menu:before en bleu):

https://lh6.googleusercontent.com/-Pg7GyQcZBRo/UHPyyUl9TSI/AAAAAAAAEPA/L95WSut6eOo/s1062/Capture+d%E2%80%99e%CC%81cran+2012-10-09+a%CC%80+11.46.56.png

J'ai essayé de bidouiller avec les z-index, j'ai également essayé d'appliquer la classe à #menu:before, en vain pour le moment...

Savez vous comment faire en sorte que le #menu:before reste derrière le #menu, même lorsque celui-ci devient fixed?

Merci d'avance!

Salut,

C'est un problème de plus proche parent positionné je pense.

Lorsque ton menu est "normal", il est en position relative, donc le :before qui est dedans se positionne par rapport à lui. Ce qui n'est pas le cas en position: fixed

La solution je pense est de créer un sur block (que tu peut passer en fixed) dans ton menu qui lui sera toujours en position: relative, ça devrai marcher mais j'ai rien vérifier, c'est que des hypothèses

voir le code html et le reste du css pourrait aussi être utile
Modifié par JJK801 (09 Oct 2012 - 12:07)

Hello JJK,

Merci pour ta réponse.

Le code HTML est assez basique:

<div id="menu">
	<div class="container">
		<ul id="nav">
			<div class="menu-menu-container">
				<ul id="menu-menu" class="menu">
					<li><a>item 1</a></li>
					<li><a>item 2</a></li>
					<li><a>item 3</a></li>
					<li><a>item 4</a></li>
					<li><a>item 5</a></li>
					<li><a>item 6</a></li>
				</ul>
			</div>
		</ul>
	</div>
</div>

et le code CSS associé à tout ça:

.container {
	text-align: left;
	margin: 0 auto;
	width: 960px;
	position: relative; 
}

#menu {
	position: relative;
	background: fuchsia;
	float: left;
	width: 100%;
	letter-spacing: 0.15em;
}

#menu:before {  
    content: " ";  
    position: absolute;  
    z-index: -10; 
   	background: aqua;
	min-width: 500px;
    width: 100%;  
    height: 100%;  
    border-radius: 500px / 15px;  
    box-shadow: 0 0 8px #555;  
}  

#menu.menu_flottant{
	background: green;
	position: fixed;
	top:0;
	z-index: 1000;
}

JJK801 a écrit :

La solution je pense est de créer un sur block (que tu peut passer en fixed) dans ton menu qui lui sera toujours en position: relative, ça devrai marcher mais j'ai rien vérifier, c'est que des hypothèses

Re,

j'ai testé la solution que tu mentionnes.

J'ai intégré l'intégralité de mon #menu dans un block

<div id="menu_test">

puis j'ai appliqué le CSS suivant:

#menu_test{
	position:relative;
	width: 100%}

#menu_test.menu_flottant{	
	background: green;
	position: fixed;
	top:0;
	z-index: 1000;
	width: 100%}

ça a l'air de fonctionner

https://lh5.googleusercontent.com/-VcWIGVWsCZ0/UHP6K783zCI/AAAAAAAAEPg/eGU_24mShso/s1063/Capture+d%E2%80%99e%CC%81cran+2012-10-09+a%CC%80+12.18.53.png

Merci beaucoup pour ton aide!

En fait aprés relécture de ton probléme, je pense que c'est juste une incompréhension de la propriété z-index et du pseudo-élément before:

Le pseudo élément before: c'est un élément CSS placé au début de l'élément HTML ( et non avant )

<style>
#monMenu:before
{
//--
}
</style>
<div id="monMenu">
  <!-- Le pseudo élément se placera ici -->
  <ul>
    <li>Cat 1</li>
    <li>Cat 2</li>
  </ul>
</div>

La propriété z-index: elle permet d'émuler un systéme de claques, POUR LES ELEMENTS DE MEME CALQUE PARENT:

<style>
#div1
{
  //--
  z-index: 1;
}
#div2
{
  //--
  z-index: 2;
}
#div11
{
  //--
  z-index: 9999;
}
#div12
{
  //--
  z-index: 2;
}
#div21
{
  //--
  z-index: 1;
}
#div22
{
  //--
  z-index: 2;
}
</style>
<div>
  <div id="div1">
    <div id="div11"></div>
    <div id="div12"></div>
  </div>
  <div id="div2">
    <div id="div21"></div>
    <div id="div22"></div>
  </div>
</div>

ici l'ordre des calques sera ( du plus haut au bas ):

-div22 ( Calque 2 , Sous-Calque 2 )
-div21 ( Calque2 , Sous-Calque 1 )
-div2 ( Calque2 )
-div11 ( Calque1 , Sous-Calque 9999 )
-div12 ( Calque1 , Sous-Calque 2 )
-div1 ( Calque1 )

du coup, a la vue de tout ça, tu comprendra que ton pseudo élément, ne peut pas passer sous son propre parent

Ps: Par contre, je me souvient plus si c'est en fonction du calque parent ou du parent lui même
Modifié par JJK801 (09 Oct 2012 - 12:46)

Effectivement je dois avouer qu'il y a encore beaucoup d'incompréhension de mon côté, je me suis mis à CSS et HTML il y a 15 jours

Toutefois je ne suis pas sûr de comprendre ce que tu veux dire par "tu comprendra que ton pseudo élément, ne peut pas passer sous son propre parent", en effet à l'origine j'ai suivi le tuto suivant: http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow

où l'auteur explique "Les pseudo-blocs ont une position absolue et un z-index négatif, le but étant de placer ces éléments sous leur parent (la <div> dont ils dépendent)."...

Aprés vérification, tu peut effectivement faire passer l'enfant sous le parent avec un z-index negatif, mais il ne faut pas placer z-index sur le parent, ce qui repond a mon interrogation de tout à l'heur: le contexte des calques se créé par rapport au calque parent et non a l'élément parent.

il faut donc que tu supprime le z-index de ton .menu_flottant
Modifié par JJK801 (09 Oct 2012 - 21:34)