Div extensible

Bonjour à tous

je vous explique mon probleme, j'ai un div qui contient lui méme 3 div alignés verticalement, celui du milieu contient le menu et change de hauteur en fonction du lien clické, le probleme c'est qu'il cache le div en dessous et moi je voudrai qu'il le "pousse" vers le bas !!

les 3 div ont le même z-index.

#fond_menu {
	position:absolute;
	width:287px;
	height:277px;
	z-index:2;
	left: 31px;
	top: 108px;
}

#menu_haut {
	position:absolute;
	left:0px;
	top:0px;
	width:287px;
	height:101px;
	background-image: url(../images/fond_menu_titre_8eme_citoye.gif);
	z-index: 2;
}

#menu_milieu {
	position:absolute;
	left:0px;
	top:101px;
	width:287px;
	height:124px;
	background-image: url(../images/fond_menu_milieu_8eme_citoy.gif);
	background-repeat:repeat-y;
	z-index: 2;
}

#menu_bas {
	position:relative;
	left:0px;
	top:224px;
	width:287px;
	height:52px;
	z-index:2;
	background-image: url(../images/fond_menu_bas_8eme_citoyen.gif);
}

merci d'avance pour votre aide
Modifié par wrung06 (04 Oct 2006 - 18:41)

Bonjour,

Supprime les positions absolute et relative ... si tu restes dans le flux, ça devrait le faire...

ghost a écrit :
Bonjour,

Supprime les positions absolute et relative ... si tu restes dans le flux, ça devrait le faire...

Ainsi que les top, left et z-index

Re

Oui effectivement, je m'en était arrêté qu'au préambule

merci pour vos reponses.
j'ai enlevé les propriétés left, top, position, z-index et leurs valeurs mais ça me change toute ma mise en page, j'en deduit que j'avai pas bien saisie vos explications.

merci de m'expliquer un petit peu plus.

Bonjour,

il faudrait le code html pour aller un peu plus loin, ça aide!!

wrung06 a écrit :
merci pour vos reponses.
j'ai enlevé les propriétés left, top, position, z-index et leurs valeurs mais ça me change toute ma mise en page, j'en deduit que j'avai pas bien saisie vos explications.

merci de m'expliquer un petit peu plus.

Oui c'est normal, maintenant essayes de la rétablir avec les marges internes et externes des blocs.

bonjour,
j'ai suivi vos conseil, et j'ai positioné mes div avec des marges internes et externes, ça fonction bien sur IE mais pas sur firefox :

sur IE le calque s'adapte à la taille du menu et decale le div en dessous, et dans FF le menu passe en dessus du div en dessous.

voila mes css :

#menu_haut {
	width:287px;
	height:101px;
	background-image: url(../images/fond_menu_titre_8eme_citoye.gif);
}


#menu_milieu {
	width:287px;
	background-image: url(../images/fond_menu_milieu_8eme_citoy.gif);
	background-repeat:repeat-y;
	height:100%;
	margin-top:-2em;
}



#menu_bas {
	width:287px;
	height:52px;
	background-image: url(../images/fond_menu_bas_8eme_citoyen.gif);
	
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	margin-top:3px;
}

#menu {
	margin-left:5em;
	width: 194px;
	

}

#menu dl {
	float: left;
	width: 119px;
	margin: 1px;
}

#menu dt {
	cursor: pointer;
	text-align: left;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#8E8626;
	
/*	border: 1px solid gray;*/
}

#menu li {
	text-align: left;
	margin-left:2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#8E8626;
	list-style-image: url(../images/carre_savoir2_8eme_citoyen.gif);
	
}

#menu li a, #menu dt a {
	color:#8E8626;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

le code html est simple, 3 div alignés verticalement dans un 4éme div.

Bonjour,

overflow: hidden; pour ton bloc4 et il s'adaptera au contenu, IE bug et le fait spontannément (si tu lui donnes un width ou height pour faire simple !)
Modifié par ghost (04 Oct 2006 - 21:35)

merci