CSS - Petit changement de présentation de site

[NiTrOuS]

Bonsoir à tous,

Je souhaiterais faire une adaptation du site que je mets en place: www.rqo.be

Voici mon CSS

body, html {    background:#000 url(images/fond.jpg) center; margin:0; padding:0;font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#FFF; background-attachment: fixed; font-size:11px;} #conteneur {    margin: 0 auto; position: relative; width: 800px; background-color: #fff; overflow: hidden; text-align:left;}  	 #header  {    height:30px;  background:url(images/header.png) no-repeat top; padding:216px 0 0 0;} #pied  {    background: url(images/pied.png); height:37px; width:790px; padding:85px 10px 0 0; color:#fff; clear:both;}	  #left {    float: left; width: 180px; background-color:#fff;  margin:0; padding:0; text-align:center;}   #center {    width: 600px; background-color:#fff;  margin:0 0 0 180px; padding:0;}   /*Menu horizontal*/ul#menu  {    height:21px; list-style-type: none; margin:0; padding:0;}  ul#menu li  {    float: left ; text-align:center;}ul#menu li a {    width:110px ; height:21px; color: #FFF ; display: block ; text-decoration: none ; outline:none; line-height:21px; background:url(images/menu.png) no-repeat; font-weight:bold; font-size:10px; margin:0 3px;}ul#menu li a:hover { background:url(images/menu_hover.png);}#mh { text-align:center; margin:0 auto; width:800px; height:40px;} #mh table { text-align:center; margin:0 auto;} 		/*Menu couleur*/.menu_bleu_haut	{ width:158px; height:24px; background: url(images/menu_bleu_haut.png); padding :11px 9px 0 0; margin :0; font-weight:bold; font-size:12px; text-align:right;}.menu_bleu_fond {    width:135px; background: url(images/menu_bleu_fond.png); padding:0 14px 0 18px;}.menu_bleu_bas {    width:167px; height:15px; background: url(images/menu_bleu_bas.png) no-repeat; padding :0; margin :0;}  ul.gb  {    width:135px; padding:0; margin:0; list-style:none; font-size:10px; font-weight:bold; text-align:left;}ul.gb li a  {    display:block;    color:#1d9fe0;    outline:none; text-decoration: none; outline:none; font-size:10px; font-weight:bold;}	ul.gb li a:hover {    color: #85d0f5; outline:none; padding:0; margin:0 ;}	.menu_jaune_haut  {    width:158px; height:24px; background: url(images/menu_jaune_haut.png); padding :11px 9px 0 0; font-weight:bold; font-size:12px; text-align:right;}.menu_jaune_fond  {    width:135px; background: url(images/menu_jaune_fond.png); padding:0 14px 0 18px;}.menu_jaune_bas {    width:167px; height:15px; background: url(images/menu_jaune_bas.png) no-repeat;} ul.gj {    width:135px; padding:0; margin:0; list-style:none; font-size:10px; font-weight:bold; text-align:left;}ul.gj li a  {    display: block ; color:#fcb71e; outline:none; text-decoration: none; outline:none;}	ul.gj li a:hover  {    color: #fdda8d; outline:none; padding:0; margin:0 ;}	.menu_rose_haut{    width:158px; height:24px; background: url(images/menu_rose_haut.png); padding :11px 9px 0 0; margin :0; font-weight:bold; font-size:12px; text-align:right;}.menu_rose_fond {    width:135px; background: url(images/menu_rose_fond.png); padding:0 14px 0 18px;}.menu_rose_bas {    width:167px; height:15px; background: url(images/menu_rose_bas.png) no-repeat; padding :0; margin :0;}ul.gr {    width:135px;    padding:0; margin:0; list-style:none; font-size:10px; font-weight:bold; text-align:left;}ul.gr li a {    display: block; color:#f946e6; outline:none; text-decoration: none; outline:none;}	ul.gr li a:hover {     color: #ff95f4;  outline:none;  padding:0;  margin:0 ;}	.menu_jaune_fond img , .menu_rose_fond img , .menu_bleu_fond img   {margin:3px 0 0 0;}/*cadre news*/.contenu_haut {    width:624px; height:33px; background: url(images/contenu_haut.png);}.contenu_fond {    width:584px; background: url(images/contenu_fond.png); padding :0 25px 0 15px; margin :0; color:#fff;} .contenu_bas {    width:624px; height:45px; background: url(images/contenu_bas.png) no-repeat;}  	/*copyright*/.copyright {    color:#FFF; font-size:10px; font-weight:bold; text-align:right; margin:0 0 5px 0;}   .copyright a { color:#FFF; font-size:10px; font-weight:bold; text-decoration: none; outline:none:}.copyright a:hover   { color:#fdc322;} Span { color:#1d9fe0; font-size:12px; font-weight:bold;}	img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr{ border:0; margin:0; padding:0;}a  { color:WHITE; text-decoration:none; outline:none; font-weight:bold:}	 a:hover  { color:RED;}		

Et ma page 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"><head><title>Radio Quart d'Onde</title>			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="fr" /><link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />	 </head><body> <div id="conteneur"><!-- Global --><div id="header"><!-- Header --><div id="mh"><!-- Menu horizontal --><table summary="" cellpadding="0" cellspacing="0"> <tr><td>          <ul id="menu">              <li><a href="index.html">Accueil</a></li>              <li><a href="historique.html">Historique</a></li>              <li><a href="programmes.html">Grille programmes</a></li>             <li><a href="animateurs.html">Animateurs</a></li>             <li><a href="regie.html">Règie publicitaire</a></li>		  <li><a href="contact.html">Contactez-nous</a></li>         </ul> </td></tr></table></div><!-- Fin Menu horizontal --> </div><!-- Fin Header -->	<div id="left"> <!-- Colonne Gauche -->		 <div class="menu_bleu_haut">News</div><div class="menu_bleu_fond"><!-- Menu -->        <ul class="gb"> 		News du site         </ul></div><div class="menu_bleu_bas"></div><!-- Fin Menu --> <div class="menu_bleu_haut">Evènements</div><div class="menu_bleu_fond"><!-- Menu -->        <ul class="gj"> 		<a href="diner_dansant.html">Diner dansant avec Claude Barry</a>        </ul></div><div class="menu_bleu_bas"></div><!-- Fin Menu --><div class="menu_bleu_haut">Partenaires</div><div class="menu_bleu_fond"><!-- Menu --><div style="text-align: left"><a href="http://www.leschardons.net" target="_blank">MJ Les Chardons</a><hr><a href="http://www.maxfm.be" target="_blank">M@x FM</a> <hr> <a href="http://www.brugelette.be" target="_blank">Brugelette</a><hr><a href="http://www.federation-wallonie-bruxelles.be/" target="_blank">Communauté française</a></div></div><div class="menu_bleu_bas"></div><!-- Fin Menu --> <a href="http://rqo.dyndns.org:8000/rqo.mp3.m3u"><img src="images/hp.png" width="128" height="128" alt="Ecoutez-nous" border="0"></a><br><div id="MonElement" class="EX_div" style="diplay:block;"> <b><a href="http://rqo.dyndns.org:8000/rqo.mp3.m3u"><font color=#FF0000>Ecoutez-nous en direct</font></a></b></div><script>function clignotement(){if (document.getElementById("MonElement").style.display=="block")document.getElementById("MonElement").style.display="none";elsedocument.getElementById("MonElement").style.display="block";}setInterval("clignotement()", 500);</script> <br><br><br></div><!-- Fin Colonne Gauche -->	     <div id="center"><!-- Colonne Milieu -->	            <div class="contenu_haut"></div><div class="contenu_fond"><!-- Cadre -->               <div style="text-align: center"><span>Accueil</span></div>			<br><br> 			Bienvenue sur le site de Radio Quart d'Onde.			<br><br>			Vous pourrez y découvrir: 			<br><br>			- L'historique de Radio Quart d'Onde			<br>			- La grille des programmes			<br>			- La présentation des animateurs			<br>			- La régie publicitaire			<br>			- ...			<br><br>			Vous pourrez également nous écouter en direct, via notre site internet ou encore prendre contact avec l'équipe de Radio Quart d'Onde.			<br><br>			Bonne visite !	            </div><div class="contenu_bas"></div><!-- Fin Cadre -->		   <div style="text-align: center"><img src="images/logo_rqo.jpg" width="250" height="150" alt="" border="0"></div>		   <br><br>     </div><!-- Fin Colonne Milieu -->										  <div id="pied"><!-- Pied --> <!-- mention de copyright Ne pas retirer sans autorisation écrite --><div class="copyright"><a href="mentions_legales.html">Mentions légales | </a> ©RQO 2012 | <a href="http://www.docteur-it.be" onclick="window.open(this.href); return false;" title="Docteur IT Jurbise" > Designed by Docteur IT Jurbise</a></div><!-- mention de copyright Ne pas retirer sans autorisation écrite -->	</div><!-- Fin pied --></div><!-- Fin Global --></body></html>

Je souhaiterais simplement avoir +/- le rendu suivant, c'est à dire avoir le menu de gauche, également à droite (avec un contenu différent)

http://www.rqo.be/images/untitled.jpg

Comment faire ? J'ai essayé de rajouté un paramètre Right dans mon CSS, le menu se met bien à droite, mais sous le contenu de la page, et non à coté :(

D'avance, merci à tous

[Invité]

conteneur {    margin: 0 auto;	 position: relative;	 width: 800px;	 background-color: #fff;	 overflow: hidden;    text-align:left;

tu as mis width: 800 px

menu gauche 180, centre 600 avec les marges ça fait 780 (tu as actuellement 800)

maintenant avec le menu droite ça fait 180 de plus, dans une logique de marges hérité : 1000 => par manque de place ça passe donc en dessous.

il faut que tu passe la valeur à 1000