Decalage avec position absolute

Bonjour
j'etais venu il y a quelques jours pour un probleme de positionnnement de mes elements, j'ai commencé, et bien avancé, de lire les tutoriaux mais je ne vois tjrs pas le probleme.
J'ai un decalage sur mes elements "ruban" , "texte" qui sur un ecran 22 pouces sont nettement a gauche, en dehors du container.
Quelqu'un peut il m'expliquer pourquoi ces elements ne prennent pas en compte l'element container
Merci
nadege

html, body {
	height: 100%; 
}

body{
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	background-attachment:fixed;
	background-position: center bottom;
	background-color: #B6A987;
	background-image: url(images/fond.jpg);
	background-repeat: no-repeat;
	text-align:center;
	overflow: hidden;
}
#container {
	width: 980px;
	margin-left:auto;
	margin-right:auto;
	text-align: left;
}
#logo {
	height: 165px;
	width: 320px;
	margin-left: 70px;
	margin-top: 35px;
	z-index:2;
	position:absolute;
}
#menu {
	font-size: 21px;
	color: #FFFFFF;
	text-align:left;
	width:600px;
	height:22px;
	z-index:2;
	left:373px;
	margin-left: 70px;
	margin-top: 25px;
}
#menu ul { padding:0; margin:0; list-style:none; }
#menu ul li { display:inline; text-decoration:none; }
#menu ul li a {
	color: #302A1C;
	text-decoration:underline;
}
#menu ul li a:hover {
	text-decoration:none;
}
#photo{
	width: 236px;
	float: right;
	margin-right: 15px;
}
#ruban {
	width: 1000px;
	height: 238px;
	background: url(images/ruban.png) no-repeat bottom center;
	z-index:1;
	position:absolute;
	left: 0px;
	top: 181px;
}

#texte{
	display:block;
	font-size: 12px;
	color: #100E07;
	text-align: justify;
	width: 450px;
	margin-left: 380px;
	z-index:3;
	position:absolute;
	left: 42px;
	top: 313px;
}

  <div id="container">
      <div id="photo"><img src="images/sable.png" width="284" height="188" /></div><div id="menu">
        <ul> 
        <li>1 * </li> 
        <li><a href="#">2</a> * </li> 
        <li><a href="#">3</a> * </li> 
        <li><a href="#">4</a></li> 
        </ul> 
        </div>
        <div id="logo"><img src="images/logo.png" width="320" height="160" /></div>
      	<div id="ruban" ></div>
      	<div id="texte">texte</div>
    </div>

Modifié par Nad21 (15 Jun 2009 - 16:59)

Salut !

Edit : rho tu triches
Modifié par SynRJ (15 Jun 2009 - 17:01)