Placement cadres [résolu]

Bonjour,
voici l'esquisse de la première page de mon nouveau site
(liens encore fictifs)
http://momo.4.free.fr


j'ai un petit soucis (dans le corps de page)
au niveau du placement du cadre de gauche

avec http://asor.free.fr/ie1.gif c'est OK mais avec http://mapage.noos.fr/gheintz/PCastuces/mozilla.jpg le cadre de gauche sort du corps de page il est excentré sur la gauche.

exemple en image avec http://asor.free.fr/ie1.gif :
http://mapage.noos.fr/gheintz/PCastuces/asor-ie.jpg
Exemple en image avec http://mapage.noos.fr/gheintz/PCastuces/mozilla.jpg :
http://mapage.noos.fr/gheintz/PCastuces/asor-mozilla.jpg

que dois-je changer ou rajouter pour éviter cet état de choses ?

code css (corps de page uniquement):

h1, h2, h3, h4 {
  font-weight : bold; 
	background-color : #789ABC; 
	text-align : left;
  }
h1 { 
  font-size : 130%; 
  color : #009; 
  padding-left: 1em; 
  line-height : 140%; 
  } 
h2 { 
  font-size : 120%; 
  line-height : 160%;  
  color: #000;
  } 
h3 { 
  font-size : 110%; 
  line-height : 140%; 
  color: #000;
  }
h4{
  padding-left: 0.5em;
	width: 12em;
  font-size : 90%; 
  line-height : 110%;
  color : #009; 
  } 
th { /* têtes des tableaux */
  font-size : 110%; 
  line-height : 20px; 
	padding-left: 1em; 
  color : #feb; 
  font-weight : bold; 
  background-color : #789ABC; 
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ABCDEF,endColorStr=#789ABC);
  }
table.tableau td { 
  padding: 5px; 
  }
table.tableaudroite td { 
  padding: 5px; 
  }
table.tableaugauche td { 
  padding: 5px; 
  }
.fondcell {
  font-family: verdana, arial, "sans serif";
  font-size: 90%; 
  font-weight: bold; 
  color: #00008B;
	background-color : yellow; 
  text-align: left; 
}	
#conteneur {
position: absolute;
margin:75px 0% 0px 0%; /* haut droite bas gauche */ 
width: 770px;
left: 50%;
margin-left: -380px;
background-color:#369;
}
#centre {
background-color:#369;
margin-left: 200px;
margin-right: 160px;
height: 480px;
}
#gauche {
position: absolute;
margin-left: -200px;
margin-right: 0px;
width: 180px;
height: 450px;
}
#droite {
position: absolute;
left: 568px;
right:0px;
width: 200px;
}
#pied {
height: 60px;
background-color: #99CC99;
}
.tableau{ /* tableau central page d'accueil */
  border-collapse: collapse;
	border:thin solid #9DBEE1; 
  color: #fff;
  font-family : verdana, arial, "sans serif"; 
	font-size : 80%;
  background-color : #369; 
  text-align : left; 
	height: 450px;
  } 
.tableaudroite{ /* tableau droit de la page d'accueil */
  border-collapse: collapse;
	border:thin solid #9DBEE1; 
  color: #fff;
  font-family : verdana, arial, "sans serif"; 
	font-size : 80%;
  background-color : #369;
	text-align : left; 
	width: 200px;
	height: 450px;
  } 
.tableaugauche{ /* tableau gauche de la page d'accueil */
  border-collapse: collapse;
	border:thin solid #9DBEE1; 
  color: #fff;
  font-family : verdana, arial, "sans serif"; 
	font-size : 80%;
  background-color : #369;
	text-align : left; 
	width: 180px;
	height: 450px;
  } 
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {
margin: 10px 10px 10px 10px0; /* haut droite bas gauche */ 
}

Ma page est basée sur le modèle d'Alsacreations
http://css.alsacreations.com/modeles/modele5.htm

merci d'avance
Modifié par gemopa (02 Aug 2006 - 12:40)

Salut Gemopa,

Si le cadre de gauche est décalé de 200px vers la gauche, c'est sûrement à cause de la marge négative, non ?

#gauche {
position: absolute;
[b]margin-left: -200px;[/b]
margin-right: 0px;
width: 180px;
height: 450px;
}

Je suppose que tu l'as ajouté pour corriger un bug d'IE. Mais, comme tu vois dans le gabarit d'Alsacréations auquel tu te réfères, il y a un left: 0; de spécifié qui permet justement d'éviter ce bug.
Donc :

#gauche {
position: absolute;
left: 0;
width: 180px;
height: 450px;
}

Tu n'a pas dû chercher bien longtemps quand même .

Il faut mieux se fier à un navigateur qui interprète correctement CSS, donc pas IE 6.
Modifié par Alan (02 Aug 2006 - 08:30)

Alan a écrit :
Salut Gemopa,

Si le cadre de gauche est décalé de 200px vers la gauche, c'est sûrement à cause de la marge négative, non ?

#gauche {
position: absolute;
[b]margin-left: -200px;[/b]
margin-right: 0px;
width: 180px;
height: 450px;
}

Je suppose que tu l'as ajouté pour corriger un bug d'IE. Mais, comme tu vois dans le gabarit d'Alsacréations auquel tu te réfères, il y a un left: 0; de spécifié qui permet justement d'éviter ce bug.
Donc :

#gauche {
position: absolute;
left: 0;
width: 180px;
height: 450px;
}

Tu n'a pas dû chercher bien longtemps quand même .

J'ai changé les paramètres de margin-left et même supprimé
mais je n'avais pas pensé à mettre à la place :

left:0;

a écrit :
Il faut mieux se fier à un navigateur qui interprète correctement CSS, donc pas IE 6.

Je pense que je vais suivre ton conseil à l'avenir

Merci encore pour ton aide