[Résolu]Cadres espacés pour chacun des li

Bonjour,

je viens tout récemment de refaire tout mon site en div et en listes (autrefois entièrement en tableaux). Seulement, je n'arrive pas à reproduire un style qui est le suivant :

<td class="menu">
	<table>
	<tr>
		<th>Navigation</th>
	</tr>
	<tr>
		<td><a href="index.php">Liste</a></td>
	</tr>
	<tr>
		<td><a href="musiques.php">Musiques</a></td>
	</tr>
	<tr>
		<td>menu3</td>
	</tr>
	<tr>
		<td>menu4</td>
	</tr>
	</table>
</td>

CSS :

.menu
{
	vertical-align: top;
	width: 120px;
	font-size: 12pt;
}

.menu table
{
	width: 200px;
	text-align: center;
	border-spacing: 10px;
}

.menu table th
{
	height: 50px;
}

.menu table td
{
	height: 30px;
	border: 1px solid #6495ed;
}

Cela donnait un menu avec un cadre pour chacun des éléments de la liste, et ces cadres étaient espacés.

Maintenant, les cadres sont collés :

<ul id="menu">
	<li><a href="etape1.html">Liste</a></li>
	<li><a href="etape2.html">Musiques</a></li>
	<li><a href="etape3.html">Images</a></li>
	<li><a href="etape4.html">menu3</a></li>
	<li><a href="etape5.html">menu4</a></li>
</ul>

ul#menu
{
	height: 50px ;
	margin: 30px ;
	padding: 10px ;
	list-style-type: none ;
}

ul#menu li
{
	text-align: center ;
}

ul#menu li a
{
	width: 170px ;
	line-height: 35px ;
	color: #9a89e4 ;
	display: block ;
	text-decoration: none ;
	border: 1px solid #6495ed ;
}

Comment obtenir le même effet que j'avais avec des tableaux ?
Modifié par Relax (31 Jul 2009 - 17:26)

Bonjour,

Pour espacer les cadres, tu peux utiliser "margin" sur a