Positionnement de PNG selon la taille d'un container

Bonjour à tous !
Voilà j'ai un petit souçi, je bosse actuellement sur une refonte d'un site, j'utilise le CMS Joomla mais je refais totalement un template afin de le faire coller un maximum au design que je souhaite obtenir...
Ma question est là suivante, j'aimerais intégrer des ombres à une boîte totalement gérée en CSS (<div>) qui contiendra mon contenu, cette bôite devrai être centrée dans la page, faire 600px de large, et si possible être en retrait de 20px en haut, et en bas de la page (même lorsque la page sera plus longue que la taille de l'écran, et que par conséquent, il y aura un ascenseur).
Voilà à quoi ressemble ma boîte et mes ombres :

http://www.artizanal.com/piansmusic/layout_petit.jpg

J'ai pour celà utilisé la classe #container dans mes styles CSS, qui possède ce code là, et qui represente donc mon rectangle beige sur le layout ci dessus :

#container {
	position:absolute;
	left: 50%;
	width: 580px;
	height: 100%;
	margin-left: -300px;
	background-color: #F5F3E6;
	padding : 10px;
	display: table;
	top: 20px;
	bottom: 20px;
}

Ensuite, dans mon fichier index.php de mon template, j'ai disposé deux images (PNG) auxquelles j'ai attribué deux classes toujours dans ma feuille de style, et qui representent cette fois les deux ombres en haut du bloc beige, à gauche et à droite :

.ombre_hg {
	position:absolute;
	left: 50%;
	width: 28px;
	height: 328px;
	margin-left: -328px;
	top: 20px;
	behavior: url("png.htc");
	background-repeat: no-repeat;	
}
.ombre_hd {
	position:absolute;
	left: 50%;
	width: 28px;
	height: 328px;
	margin-left: 300px;
	top: 20px;
	behavior: url("png.htc");
	background-repeat: no-repeat;	
}

J'avoue ça se complique beaucoup trop dès à présent... Surtout que je n'arrive pas à savoir comment faire pour pouvoir placer le reste de mes ombres (celles en bas sur l'image ci dessus)... Comment faire en sorte que les ombres soient placées au bon endroit selon la longueur du contenu (et donc de mon "container") ???
Si certains d'entre vous ont des idées de comment je pourrais m'y prendre, ça me serait vraiment pratique...
Merci d'avance !

Vous pouvez voir l'avancement de mes "tests" ici même : http://www.artizanal.com/piansmusic si jamais il vous manque des informations sur mon code...
Modifié par Zanidou (23 Jul 2006 - 19:24)

Encore moi, déjà mon premier problème étant d'arriver à savoir s'il est possible de forcer mon "container" à utiliser toute la hauteur de l'écran, ormis 20px de marge en haut et en bas, et dans le cas où ma fenêtre deviendrait trop petite pour acceuillir tout le contenu qui se trouve à l'interieur de ce bloc, faire en sorte qu'il subsiste malgrè tout une marge de 20px tout en bas de la page...

Déjà si quelqu'un pouvait m'aider à résoudre ce problème ce serait un grand pas pour moi (mais un minuscule pour l'humanité, j'en conviens )...
Encore merci d'avance, désolé d'arriver comme ça avec des questions (chiantes) !

Bonjour et bienvenue Zanidou,

la description de ton problème m'a l'air tout à fait circonstanciée , par contre concernant le titre de ton sujet, comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) ont trait à une "demande d'aide" sur un "positionnement css" et une "mise en forme"!

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre

Felipe

OK merci Felipe, j'ai bien pris note de ton message, je retente le coup avec un titre plus explicite je l'espère, même si j'avoue avoir du mal à ne serait-ce que formuler mon problème !

Bonjour, je ne sais pas si celà pourrait vous aider (à m'aider ) mais je vous mets une partie de mon code source :

CSS:

html, body {
	height: 100%;
	padding: 0px;
	margin: 0px;
}

body {
	background-image: url(../images/wood.jpg);
	color:#333333;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 11px;
	background-color: #AE997A;
}

a {
	color: #C40026; 
	text-decoration: underline;
}

a:hover {
	color: #0069B5;
}

p {
	margin: 0px 0px 5px; 
	padding: 0px;
	color:#666666;
}

#container {
	position:absolute;
	left: 50%;
	width: 580px;
	margin-left: -300px;
	background-color: #F5F3E6;
	padding : 10px;
	display: table;
	overflow: hidden;
	top: 20px;
}

#footer {
	clear: both;
	padding: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
}

#container h3 {
	margin: 10px 0 5px 0;
}

.ombre_hg {
	position:absolute;
	left: 50%;
	width: 28px;
	height: 328px;
	margin-left: -328px;
	top: 20px;
	behavior: url("png.htc");
	background-repeat: no-repeat;	
}
.ombre_hd {
	position:absolute;
	left: 50%;
	width: 28px;
	height: 328px;
	margin-left: 300px;
	top: 20px;
	behavior: url("png.htc");
	background-repeat: no-repeat;	
}

Index :

<body>
 <div id="container">
  <div id="left">
  </div>

  [...]

  <div id="footer">
  <?php include_once('includes/footer.php'); ?>
  </div>
</div>

Voilà, toujours ce problème d'arriver à imposer mon container + le footer sur 100% de la hauteur du navigateur AVEC une marge de 20px en haut et en bas (même dans le cas où la page est trop grande > ascenseur), et ensuite arriver à placer les ombres en bas comme sur le layout du premier message... Je m'arrache les cheveux sur la tête ...
Merci !