28172 sujets

CSS et mise en forme, CSS3

Position absolute et margin-bottom aucun effet

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:

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:


<!--[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
Modifié par 1younes (12 Feb 2008 - 15:26)
merci pour ta réponse Florent V pour votre réponse.
mais j'ai pas le temps maintenant pour lire ces tutorials.
merci de m'indiquez s'il ya une solution pour mon probléme.

cordialement
Younes
<mode je fais que passer>
1younes a écrit :
mais j'ai pas le temps maintenant pour lire ces tutorials.
merci de m'indiquez s'il ya une solution pour mon probléme.

hi hi hi Smiley ravi !
</mode>
1younes a écrit :
mais j'ai pas le temps maintenant pour lire ces tutorials.

Dommage.

1younes a écrit :
merci de m'indiquez s'il ya une solution pour mon probléme.

Non.
J'aime les réponses... carrément adaptées aux demandes huhu XD Bon oki j'arrête le flood de suite ^^
Ces réponses sont simplement un rappel un peu sec des règles du forum. On peut bien sûr être plus explicite. Ce qui donne:

La règle 16 du forum a écrit :
16- Ceci est une communauté d'entraide, pas de travail à votre place
Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Il est nécessaire de connaitre les bases du positionnement CSS avant de réclamer de l'aide sur des questions de positionnement. Sinon, on ne sera pas en mesure de comprendre les solutions apportées par les membres du forum. Si la solution est simple à mettre en oeuvre, ça pourra résoudre le problème, mais au prochain pépin ça sera retour à la case départ car on n'aura pas progressé.

Dans le cas présent (et lors d'une précédente intervention de 1younes), j'ai constaté de grosses lacunes en ce qui concerne les bases de CSS. Voilà pourquoi je le renvoie à ses classiques, ce qui me semble être la meilleure solution aussi bien pour ce problème que pour les suivants qu'il rencontrera.

Voilà pour l'explication en toutes lettres. Smiley smile
Sujet clos
Aller à