Z-index en css

Fermé

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - 25 janv. 2011 à 09:46
LaurentJ1 Messages postés 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 - 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;
}

A voir également:

Z-index en css
Code ascii de a à z - Guide
Index telephonique france - Guide
Z-library - Accueil - Services en ligne
Cpu z download - Télécharger - Informations & Diagnostic
Excel trier de a à z ne fonctionne pas - Guide

4 réponses

Réponse 1 / 4

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
25 janv. 2011 à 11:14

Up ! :(

Réponse 2 / 4

LaurentJ1 Messages postés 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 8
25 janv. 2011 à 11:25

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 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
25 janv. 2011 à 11:32

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 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 8
25 janv. 2011 à 11:45

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 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
25 janv. 2011 à 11:49

Je dois donc enlever mes z-index ?

LaurentJ1 Messages postés 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 8
25 janv. 2011 à 11:53

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 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
25 janv. 2011 à 11:55

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 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 8
25 janv. 2011 à 12:09

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 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
25 janv. 2011 à 12:15

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 ?

télécharger sur des sites comme index of

Index+Equiv avec 3 critères

trait horizontal avec du css