Positionnement

bonjour à tous,

je crée un site de vente en ligne et j 'ai rencontré quelques problèmes au niveau de css. j ai crée un menu déroulant horizontal pour la navigation qui fonctionne correctement mais lorsque je fais la mise en forme de mon contenu le sous memu passe derrière le contenu et le footer aussi.
la structure html de mon contenu est:

<div id="contenu">
<section id="vetement">
   <article><article><article><article></section>
<section id="chaussure"><article><article></section>
<section id="divers"><article><article><article><article></section>
<div>

et mon code css pour le contenu est :

#contenu{
	position:relative;
	margin-top:30px;
	padding-top:50px;
	background:white;     
	clear:both;
	}
article{
	position:absolute;
	z-index:1;
	opacity:0;
	
}

je n ai pas défini de hauteur parce que je veux qu elle s ajuste au contenu que je généré en php .
merci par avance pour votre aide.
Modifié par congo (02 Oct 2012 - 22:49)

et donc ?

MattBPA a écrit :
et donc ?

Effectivement, sans l'élément du sous-menu il est difficile de donner un coup de main.

Allez je me lance sans le sous-menu : je parie sur une mauvaise compréhension du z-index !

le code pour ma navigation est:

 <nav id="menu">
      <ul id="menuDeroulant">
		  <li><a href="#contenu0" id ="acceuil">Acceuil</a></li>
        <li><a href="#contenu1" id="chaussure">Chaussures Femmes</a>
			<ul class="sousMenu">
				<li><a href="#sContenu11">Ballerines</a></li>
				<li><a href="#sContenu12">Escarpins</a></li>
</ul>
        </li>
        <li><a href="#contenu2" id="vetement">Vêtement femmes</a>
			<ul class="sousMenu">
				<li><a href="#sContenu21">Top</a></li>
				<li><a href="#sContenu22">Tuniques</a></li>
	</ul>
        </li>   
      </ul>
    </nav>

et le css :

#menu{
	position:relative;}
#menuDeroulant{
	position:absolute;
	width:900px;
	top:0;
	left:0;
	margin:0;
	padding:0;}
#menuDeroulant li{
	float:left;
	width:150px;
	margin:0;
	padding:0;
	}
#menuDeroulant .sousMenu{
	margin:0;
	padding:0;}

#menuDeroulant .sousMenu li{
	float:none;
	margin:0;
	padding:0;
	}
#menuDeroulant li a{
	display:block;
	margin:0;
	padding:);
	border-right:1px solid #fff;
	text-align:center;
	line-height:25px;
	font-weight:900;
	font-size:12px;}
#menuDeroulant li .accessoire{
	border-right:none;
	}


#menuDeroulant li a:link,#menuDeroulant li a:visited{
	color:#333;
	background-color:transparent;
	}
#menuDeroulant li a:hover{
	background-color:#fff;}
#menuDeroulant li a:active{
	background-color:#222;}
#menuDeroulant .sousMenu{
	display:none;
	margin:0;
	padding:none;
	border:none;
}
#menu li:hover> .sousMenu{
	display:block;}

Ten a écrit :
Allez je me lance sans le sous-menu : je parie sur une mauvaise compréhension du z-index !

j ai pu faire passer mon menu au dessus du contenu, en mettant un z-index dans ma balise nav.mais mon footer lui reste toujours derrière mon contenu qui est en relative, il ne descend que lorsque j attribut une hauteur précise a mon contenu.