Positionnement div

faamugol -  
Bikarfioul Messages postés 40 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Avec le code suivant, je n'arrive pas à potionner mon div Pied à la fin de la page.
En plus la couleur de fond de la div conteneur n'apparait pas. Ca fait 2 vjours que je cherche mais je ne vois pas.

Merci d'avance,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<HTML>
<HEAD>
<TITLE> websote </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<link rel="stylesheet" type="text/css" href="menu_css.css" />

</HEAD>

<BODY>
<DIV ID="conteneur">

<DIV ID="header"> entete site
</DIV>

<DIV ID="gauche"> gauche site (menu de naviga)
</DIV>

<DIV ID="centre"> centre page
</DIV>

<DIV ID="droite">droite site
</DIV>

<DIV ID="pied"> pied de site
</DIV>

</DIV>

</BODY>
</HTML>


la page menu_css.css

BODY
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 13px;
BACKGROUND-IMAGE: url(back.png);
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #B2B2B2;
}

#conteneur
{
MARGIN: 2px auto 0px;
WIDTH: 860px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2;
}

#header
{
HEIGHT: 150px;
WIDTH: 887px;
MARGIN-TOP: 0px;
MARGIN-LEFT: 1px;
BACKGROUND-COLOR: #dddddd;
POSITION: absolute;
}

#menuaccueil
{
MARGIN-LEFT: 0px;
WIDTH: 887px;
MARGIN-TOP: 160px;
height:20px;
BACKGROUND-COLOR: #FF9934;
POSITION: absolute;
}

#centre
{ MARGIN-LEFT: 150px;
MARGIN-RIGHT: 150px;
WIDTH: 560px;
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
BACKGROUND-COLOR: #fffbbb;
POSITION: absolute;
}
#gauche
{
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
WIDTH: 140px;
HEIGHT: 140px;
MARGIN-LEFT: 2px;
BACKGROUND-COLOR: #ffffff;
POSITION: absolute;
}

#droite
{
MARGIN-LEFT:720px;
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
HEIGHT: 250px;
WIDTH: 160px;
BACKGROUND-COLOR: #ffffff;
POSITION: absolute;
}

#pied
{
MARGIN-BOTTOM: 0px;
HEIGHT: 20px;
WIDTH: 860px;
BACKGROUND-COLOR: #FF9933;
MARGIN-LEFT:0px;
POSITION: absolute;
}

3 réponses

Réponse 1 / 3
Bikarfioul Messages postés 40 Date d'inscription   Statut Membre Dernière intervention   5
 
Salut !

Tu m'a fais reviser les base et c'est toujours bon !
Merci a toi ;o)

Bon pour régler ton problème il faut placer tes div droite gauche l'un après l'autre puis ensuite ton centre.

Car les deux latéraux vont devenir des conteneur flotant.

ensuite tu décales tes menu en fonction de leur conteneur parents.

Mais je préfère te donner un code corrigé plutot qu'un cours complet.

Je t'invite a jouer avec le CSS enfin d'en comprendre les raisons.

Mes Modif sont en minuscule dans ton CSS j'ai également modifier le fichier HTML. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<HTML> 
<HEAD> 
<TITLE> websote </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 

<link rel="stylesheet" type="text/css" href="toto.css" /> 

</HEAD> 

<BODY> 

<DIV ID="header"> entete site 

</DIV> 

<DIV ID="gauche"> gauche site (menu de naviga) 

</DIV> 

<DIV ID="droite">droite site 

</DIV> 

<DIV ID="centre"> centre page 

</DIV> 



<DIV ID="pied"> pied de site 

</DIV> 


</BODY> 
</HTML>


Puis le CSS : 


div{border: 0px solid black;
}


BODY 
{ 
FONT-SIZE: 13px; 
BACKGROUND-IMAGE: url(back.png); 
BACKGROUND-REPEAT: repeat-x; 
FONT-FAMILY: Verdana; 
BACKGROUND-COLOR: #B2B2B2; 
margin-left: 20%
} 

#header 
{ 
position: relative;
padding:10px;
HEIGHT: 20px; 
WIDTH: 860px; 
BACKGROUND-COLOR: #dddddd; 
} 

#gauche 
{
float:left; /* tu cales les div latéraux sur la gauche de ta page */
top:0px; /* si tu veux eloigner tes elements sur la hauteur */ 
WIDTH: 140px;
BACKGROUND-COLOR: #ffAAff; 
POSITION: relative; 
} 

#centre 
{
margin-left:140px; /*tu décales ton div central de la valeur de ton menu de gauche. Attention !!! tu rajoutes des pixels si tu mais des bordures a tes div  */
top:0px; /* si tu veux eloigner tes elements sur la hauteur */ 
WIDTH: 560px; 
HEIGHT: 140px; 
BACKGROUND-COLOR: #fffbbb; 
POSITION: relative; 
} 


#droite 
{
float:left; /* tu cales les div latéraux sur la gauche de ta page */
top:0px; /* si tu veux eloigner tes elements sur la hauteur */ 
margin-left:560px; /*tu décales ton div de droite de la valeur de ton centre. Attention !!! tu rajoutes des pixels si tu mais des bordures a tes div  */
WIDTH: 180px; 
BACKGROUND-COLOR: #ffffff; 
POSITION: relative; 

} 

#pied 
{ 
top:0px; /* si tu veux eloigner tes elements sur la hauteur */ 
WIDTH: 860px; 
HEIGHT: 20px; 
BACKGROUND-COLOR: #FF9933; 
POSITION: relative; 
}
0
Réponse 2 / 3
faamugol
 
Merci Bikarfioul pour la réponse,

je viens d'essayer le code que tu m'a adapté mais le centre est cas même decalé vers le bas (horizontal) un tout petit peu par rapport au niveua de la gauche. La droite est carrerement hors de 860 px. Il est completement decalé.

Comment puis arranger cette situation. Je constate que tu a enlevé la div conteur, pour quelle avantage ?

tu peux toi même tester le code ou me donner des liens pour que je puis apprendre les notions de base.

Est ce qu'on peut combiner position: relative; et margin-left dans la même div ?

Merci pour la réponse,
0
Réponse 3 / 3
Bikarfioul Messages postés 40 Date d'inscription   Statut Membre Dernière intervention   5
 
Arf ! je me suis fais avoir par les différences IE et FF.

Je regarde ça.
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
Xiaomi/Redmi - problème de réseau et SMS de positionnement
Bashiok -
Bashiok -

1 réponse
test greta
nyla123 -
nyla123 -

2 réponses
Formation secrétaire comptable niveau IV
Anaisb06 -
Chris 94 -

3 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses