Position absolute et margin-bottom aucun effet

david11 · 12 Février 2008

Bonjour,
il me reste un petit probléme dans ma page de test c'est que je peux pas faire un margin-bottom de mon conteneur par rapport au bas de du fenetre.
dans le code css du conteneur je met:

#conteneur
{
width: 783px;
margin: auto; margin-top: 15px;
margin-bottom: 30px;
margin-left: 105px;
background: url(fond.gif) center repeat-y;
position: absolute;
}
Avec position: abosolute tout marche bien il n'ya pas de bug mais je peux pas mettre un margin-bottom de mon conteneur par rapport au bas de du fenetre.

et lorsque je met:

#conteneur
{
width: 783px;
margin: auto; margin-top: 15px;
margin-bottom: 30px;
margin-left: 105px;
background: url(fond.gif) center repeat-y;
position: relative;
}
avec position relative il ya des bugs qui s'affiche (la bordure en dessous de mes titres de corps ne s'affichent pas) mais je peux faire un margin bottom.

merci pour votre attention accordé à mon probléme.

merci de m'indiquez comment je peux mettre un margin bottom pour mon conteneur par rapport au bas de la fenetre tout en gardant la postion absolute au conteneur.

code css:

Code:

body
{
	background-color: #F9F9F9;
}

#conteneur 
{ 
   width: 783px; 
   margin: 0px;
   margin-top: 15px;
   margin-bottom: 30px;
   margin-left: 105px;
   background: url(fond.gif) center repeat-y; 
   position: absolute;
} 

#haut
{
	HEIGHT: 140px;
	width: 781px;
	background-image: url(logo21.png);
	background-repeat: no-repeat;
	background-position: 20px 74%;
	background-color: #FFFFFF;
	border: 1px solid #C9C6B3;
}

#menu
{
	float: left;
	width: 145px;
	margin: 0px;
	margin-top: 0px;
	background-color: #FFFFFF;
	border-right: 1px solid #C9C6B3;
}

#corps
{
	margin: 0px;
	margin-top: 0px;
	margin-left: 145px;
	padding: 10px;
	padding-bottom: 15px;
	border-top: 1px solid #C9C6B3;
	border-right: 1px solid #C9C6B3;
	border-left: 1px solid #C9C6B3;
	background-color: #FFFFFF;

#bas
{
	CLEAR: both;
	width: 781px;
	border: 1px solid #C9C6B3;
	font: 0.7em Tahoma,sans-serif;
	height: 40px;
	text-align: center;
	padding: 0px;
	padding-top: 10px;
	background-color: #EFEDED;
}	

#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 9px;
width: 9px;
background-repeat: no-repeat;
}
#hautgauche {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
top: 0;
left: 0;
background: url(hautgauche.gif);
}
#hautdroit {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
top: 0;
right: 0;
background: url(hautdroit.gif);
}
#basgauche {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
bottom: 0;
left: 0;
background: url(basgauche.gif);
}
#basdroit {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
bottom: 0;
right: 0;
background: url(basdroit.gif);

}

}

code xhtml:

Code:

<!--[if lte IE 6]>
<style type="text/css">
#hautgauche {
position: absolute;
top: 0;
left: 0;
}
#hautdroit {
position: absolute;
top: 0;
right: -1px;
}
#basgauche {
position: absolute;
bottom: -1px;
left: 0;
}
#basdroit {
position: absolute;
bottom: -1px;
right: -1px;
}
</style>
<!  -->
</head>

<body>                                          

<div id="conteneur">

<div id="hautgauche"></div>  <div id="hautdroit"></div>


<div id="haut">                               <!-- Debut de l'entete -->

	<?php 
	include("haut-pub.php");                       
	?> 
</div>                               
			                                  <!-- Fin De l'entete  -->
											  
<div id="corps">

  </div>
                                                  								   
<div id="bas">
	
	<?php 
	include("bas.php");                       
	?>
</div>

<div id="basgauche"></div>  <div id="basdroit"></div>
</div>            

</body>
</html>

merci pour votre compréhension les amis

cordialement
Younes

david11 · 12 Février 2008

SoS les amis

david11 · 13 Février 2008

aidez moi svp

pedro_zo · 24 Février 2010

David,
J'ai exactement le même problème que toi.
As-tu trouver une solution ?
Merci !