<div> Extensible sur la hauteur ...

<body>
		
		<div id="conteneur">
			<div id="bareDuHautEtDuBas"></div>
			<div id="bar"></div>
			<div>
				<ul>
					<li>un</li>
					<li>deux</li>
					<li>trois</li>
				</ul>
			</div>
			<div id="bare"></div>
			<div id="bareDuHautEtDuBas"></div>
		</div>
		
	</body>

conteneur{ /* Conteneur principale */
	width:240px;
	height:auto;
	background:url(trait.png) repeat-y;/* C'est ici que l'on met les bordures de 1px de haut et
	d'une largeur definie par vous */
	padding:0;
	margin:0;
}

/*  Genre un truc comme sa:
 
la bare représente une bordure =>    |-------- milieu de la zone --------| 

Et on repete sa sur l'axe y ce qui donne:

                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               | 
*/

#bareDuHautEtDuBas{/* Les bares qui sont en haut et en bas */
	width:240px;
	height:12px;
	background:url(bas.png) no-repeat;
}

#bar{ /* Premiere bare ( celle du haut ) */ 
	width:220px;
	height:50px;
	background:url(boutonhover.gif) no-repeat;
	margin:0 0 0 10px;
}
#bare{ /* Deuxieme bare ( celle du bas ) */
	width:220px;
	height:50px;
	background:url(boutonrepos.png) no-repeat;
	margin:0 0 0 10px;
}