Problème d'image de fond trois colonnes. ( Résolu )

Bonjour, j'essaye de réaliser un site, mais j'ai quelques lacunes.
j'aimerais que les 2 colonnes du menu soit extensible par rapport au milieu. En résumé, que tout soit de même hauteur.
j'ai essayé de prendre l'exemple de votre gabarit numéro 11.
la colonne de gauche et bien pris en compte mais le reste....
mais je n'arrive pas....
merci par avance, de votre aide.
http://accessibilite-corsica.com/bars.php

body {
padding: 0px;
margin: 0px;

}
#template {
color: #000;
width: 90%;
max-width: 90em;
min-width: 850px;
margin-left: auto;
margin-right: auto;
background-color: #DDDDDD;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-top: 5px solid #333;
border: thick green double;
}
/* Contenu principal */
#principal {
font-family: arial, helvetica, verdana, sans-serif;
font-family: 'times new roman', times, serif;/* ajouté */
font-size: 1.5em;
line-height: 1.5em;
}
#global{
background: url(design/colgauchcentr.png) repeat-y left top;
}
/***********************************************/
/*pour les liens externe */
/***********************************************/
a.lien_ext:after { 
content: "\0000a0[\2197]"; 
}
a:focus/*ca retire le cadre autour des liens externes */
{
outline:0;
} 
/***********************************************/
/* ENTETE */
/***********************************************/
#header {
font-family: arial, helvetica, verdana, sans-serif;
font-family: 'times new roman', times, serif;/* ajouté */
background-color: #DDD;
height: 160px;
text-align: center;
color: #000;
font-weight: bold;
}
div#logo {
float:left;
height: 160px;
background-color:#FF3300;
	}
/***********************************************/
/* message déroulant haut de page */
/***********************************************/
#message{
background-color:#8AC1F2;
border-top: 2px solid green;
border-bottom: 2px solid green;
}

/***********************************************/
/* PARTIE CENTRALE ACCUEIL*/
/***********************************************/
div#blocnews {
float:right;
width:230px;
height:430px;
background-color:#FF3300;
	}
/***********************************************/
/* PIED DE PAGE */
/***********************************************/
#pied {
height: 120px;
padding: 5px;
background: #FFCC99;
text-align: center;
margin-top: 2px; 
font-weight: bold;
border-top: 2px solid green;
clear:both;
}

/***********************************************/
/* titre du site haut de page */
/***********************************************/
#titre{
font: 25px arial, helvetica, verdana, sans-serif;
color: #008000;
font-weight: bold;
text-align: center;
line-height: 2em;
}

/***********************************************/
/* Line séparateur */
/***********************************************/
.spacer {
background-color: #FFCC33;
clear: both;
border: 1px solid #000;
}
/***********************************************/
/* MENU GAUCHE */
/***********************************************/
#menu{
float:left;
width: 125px;
left: 0px;
background-color: #FFCC99;
color: black;
font: 12px arial, helvetica, verdana, sans-serif;
font-weight: bold; 
border-right: 2px solid green;
}
#menu ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#menu li a{
margin: 0px;
padding: 2px;
display: block;
height: 1em;
color: #000;
text-decoration: none;
}
#menu a:hover{
background-color: #add8e6;
}
#menu h5{
font-weight: bold;
font-size: 1.5em;
border: 1px solid #6495ED;
background-color: green;/* couleur marrons  Haute-Corse*/
color: #fff;
text-align: center;
margin: 0px;
}


/***********************************************/
/* MENU DROITE */
/***********************************************/
#Rmenu{
float:right;
right: 0px;
width: 125px;
color: black;
background: url(design/coldroite.png) repeat-y right top;
background-color: #FFCC99;
font: 12px arial, helvetica, verdana, sans-serif;
font-weight: bold;
border-left: 2px solid green; 
}

#Rmenu ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#Rmenu li a{
margin: 0px;
padding: 2px;
display: block;
height: 1em;
color: #000;
text-decoration: none;
}
#Rmenu a:hover{
background-color: #add8e6;
}
#Rmenu h5{
font-weight: bold;
font-size: 1.5em;
border: 1px solid #6495ED;
background-color: green;/* couleur verte Corse du Sud*/
color: #fff;
text-align: center;
margin: 0px;
}

________

<div id="template"> 
<? 
include("cadrehaut.php"); 
?>
 <? 
include("menubars1.php"); 
?>
  
  <? 
include("menubars2.php"); 
?>

 <div id="principal">  
 <div id="global">
  <div id="content">   
    <h4>Bars, Cafés accessibles aux personnes &agrave; mobilit&eacute; r&eacute;duite, en r&eacute;gion Corse. <br />
      Merci de nous signaler les Bars et les Caf&eacute;s accessibles aux personnes handicap&eacute;es en fauteuil roulant, et de nous pr&eacute;ciser la pr&eacute;sence ou non de toilettes am&eacute;nag&eacute;es par le biais d&rsquo;un e-mail gr&acirc;ce au lien se trouvant en pied de page.</h4>
    <h5>Les liens des Bars accessibles sont sur cette page, pour la Haute-Corse, colonne de gauche, et pour la Corse-du-Sud, colonne de droite.</h5>

  </div></div>
  </div><!-- global -->

  <? 
include('cadrebas.php'); 
?>
</div>


</body>
</html>

Modifié par Julien2B (12 Apr 2010 - 15:20)

Personnes pour me guider?

Julien2B a écrit :
Personnes pour me guider?

Ne t'inquiètes pas ; personne ne t'oublie. C'est encore une histoire de fausses colonnes mais avec une petite particularité. Si tu désires garder la structure HTML telle qu'elle est composée actuellement et en ayant aucune image d'arrière-plan du coté CSS. Il va falloir réfléchir (les Alsanautes et moi même) un petit peu car il ne faut pas que ça dépasse la taille du conteneur principal. J'y planche et j'espère régler cette astuce assez vite.

je remercie infiniment pour cette réponse rassurante.
en espérant que cela soit pas trop casse-tête

Bonsoir,

Voilà, les 3 colonnes sans aucune image.
J'ai mis la couleur abricot pour le fond de #global et jeté l'image qui n'est pas utilisable sur un site extensible en largeur.
Enlevé les bordures vertes gauches et droites des menus.
#content est de fond gris, bordures vertes à gauche et à droite, padding 20px tournant avec marges gauche et droite de la taille des menus.
Enlevé les marges des titres placés dans #content.

L'essentiel du CSS modifié est :

#global {
background: #FFCC99;
}
#content {
background: #DDDDDD;
margin: 0 125px;
border-left: 2px solid green;
border-right: 2px solid green;
padding: 20px; 
}

Et ça donne…

Je te remercie vraiment pour cette solution qui me convient tout à fait.
Merci encore d'avoir partagé tes connaissances pour l'aide de mon site, qui va pouvoir apporter d'autres aides..
j'ai une autre question, comment rendre accessible les liens aux claviers pour les noms voyants?.

comment mettre résolu?. merci.

Pour les liens accessibles au clavier voir du coté des attributs "tabindex" et "acceskey" de HTML.
<édit
à priori les liens d'une page normale sont déjà accessible via la touche "tabulation" du clavier
>
Pour indiquer résolu, éditer le tout premier message du post et ajouter [Résolu] dans le titre.
Modifié par Aureance (12 Apr 2010 - 14:28)

merci pour tout!!.
très bonne continuation.