Z-index en css

Melooo Messages postés 1476 Statut Membre -
LaurentJ1 Messages postés 47 Statut Membre - 26 janv. 2011 à 10:06

Bonjour,
J'ai mon image de mon contenu avec mon bandeau qui se trouve dans un div, et dans se div j'ai mon menu qui se situe à gauche de mon bandeau de contenu.

<div class="head2">
	<div class="menu_gauche" align="left">
		<div width="277px" height="26px">
			<div style="display:inline;" width="9px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="77px"><a href="particuliers.php">PARTICULIERS</a></div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="97px"><a href="professionnel.php">PROFESSIONNELS</a></div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="69px"><a href="offre.php">NOS OFFRES</a></div>
		</div>
	</div>
</div>

Je voudrais que la barre de mon menu se trouve en dessous de mon bandeau de contenu (le haut de mon bandeau est arrondi, donc du coup même si je rétréci mon menu on voit le rectangle du menu)
Je veux donc qu'il passe en dessous, mais ca ne marche pas, je dois avoir un problème avec les z-index.
Code CSS :

.head2
{
width: 957px;
height:507px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;
position:relative;
z-index:1;
}
.menu_gauche
{
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
top:50px;
position:relative;
z-index:0;
font-family:Arial;
font-size:10.5px;
}

Afficher la suite

A voir également:

Z-index en css
Code ascii de a à z - Guide
Index téléphonique - Guide
Gpu z - Télécharger - Informations & Diagnostic
Cpu z - Télécharger - Informations & Diagnostic
Telecharger index - Télécharger - Gestion de fichiers

4 réponses

Réponse 1 / 4

Melooo Messages postés 1476 Statut Membre 84

Up ! :(

Réponse 2 / 4

LaurentJ1 Messages postés 47 Statut Membre 8

Salut,
tes divs sont imbriqués. Le div fille est du coup à l'avant-plan.
le z-index ne fonctionnera pas.
le div avec class head2 est considéré comme un seul div contenant d'autres..
il n'y a dans ton CSS qu'un seul z-index et c'est celui de head2.
le z-index 0 pourra fonctionner à l'intérieur de ton premier div "head2"si d'autres div filles sont présents.

Réponse 3 / 4

Melooo Messages postés 1476 Statut Membre 84

Voila un apercu de mon code :

<div class="head2">
	<div class="menu_haut">
	<a href="index.php">ACCUEIL</a> - <a href="contact.php">CONTACT</a>
	</div>
	<div class="menu_gauche" align="left">
		<div width="277px" height="26px" style="padding-top:3px;">
			<div style="display:inline;" width="9px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;"  width="77px"><a href="particuliers.php">PARTICULIERS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="97px"><a href="professionnel.php">PROFESSIONNELS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="69px"><a href="offre.php">NOS OFFRES <div style="display:inline" width="5px">&nbsp;</div></a></div>
		</div>
	</div>
		<div class="drapeau" align="center">
		<a href="index.php"><img border="0"src="images/fr.gif"></a>&nbsp;<a href="english/index.php"><img border="0" src="images/en.gif"></a>
		</div>
</div>

J'ai donc plusieurs div filles dans mon div head2 mais votre méthode ne fonctionne pas ou peut être que je l'ai mal comprise :

.head2
{
width: 957px;
height:537px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;
z-index:1;
position:relative
}
.menu_gauche
{
position:absolute;
z-index:0;
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
top:50px;
font-family:Arial;
font-size:10.5px;
}

Réponse 4 / 4

LaurentJ1 Messages postés 47 Statut Membre 8

Voici ta hiérarchie :

1. head2
1.1. menu_haut
1.2. menu_gauche
1.3. drapeau

si tu mets un z-index à head2, il est unique car il n'y a pas de n°2 dans la liste.

Melooo Messages postés 1476 Statut Membre 84

Je dois donc enlever mes z-index ?

LaurentJ1 Messages postés 47 Statut Membre 8

disons que ton z-index de head2 ne sert à rien dans le code que tu as donné.
Par contre les autres z-index peuvent te servir pour organiser ton menu_haut,menu_gauche et drapeau, si tu en as besoin, les un par rapport aux autres.

Melooo Messages postés 1476 Statut Membre 84

si j'lenlève le z-index de mon head2 et que j'ai met un pour mon menu_gauche pour qu'il se situe en dessous de mon head ca marcherai ?
en position absolute ou relative ? (je comprends pas trop les position)

LaurentJ1 Messages postés 47 Statut Membre 8

non. ton head2 sera toujours la mère. tu dois sortir ton div menu_gauche en dehors de head2.
ou bien ce que je ferais sans connaître ta page bien sûr:

.head2
{
width: 957px;
height:537px;
margin: 0 auto; 
padding: 0 auto;
position:absolute
}
.menu_gauche
{
position:absolute;
z-index:2;
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
top:50px;
font-family:Arial;
font-size:10.5px;
visibility:inherit;
}
#image {
position:absolute;
background-image:  url(images/2-PARTICULIERS.png);
z-index:1;
visibility:inherit;
}

a toi de dimensionner le div image.

Melooo Messages postés 1476 Statut Membre 84

Votre exemple ne fonctionne pas, car mon image ne se voit pas... on voit juste légèrement l'en tête
Sinon même en sortant le menu_gauche de mon head2 ca ne fonctionne pas :

	<div class="menu_gauche" align="left">
		<div width="277px" height="26px" style="padding-top:3px;">
			<div style="display:inline;" width="9px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;"  width="77px"><a href="particuliers.php">PARTICULIERS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="97px"><a href="professionnel.php">PROFESSIONNELS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="69px"><a href="offre.php">NOS OFFRES <div style="display:inline" width="5px">&nbsp;</div></a></div>
		</div>
	</div>
<script language="javascript">
DD_roundies.addRule('div.drapeau', '5px'); 
</script>
<div class="head2">
	<div class="menu_haut">
	<a href="index.php">ACCUEIL</a> - <a href="contact.php">CONTACT</a>
	</div>

		<div class="drapeau" align="center">
		<a href="index.php"><img border="0"src="images/fr.gif"></a>&nbsp;<a href="english/index.php"><img border="0" src="images/en.gif"></a>
		</div>

code CSS :

.head2
{
width: 957px;
height:537px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;

}
.menu_gauche
{
position:absolute;
z-index:0;
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
top:50px;
font-family:Arial;
font-size:10.5px;
}

Discussions similaires

A quoi sert CPU-Z ?

Samsung Z Flip 4 s'éteint lorsque je le plie.

Télécharger sur index of

CPU-Z fiable ou pas?

Votre réponse

Discussions similaires