Border fixe sur liste [Résolu]

Bonjour!

J'espère que je poste au bon endroit, je ne pensais pas poster ici de sitôt mais malheureusement le CSS a eu raison de ma patience.

je suis en train de faire la refonte totale d'un site pour un client, j'utilise du XHTML et CSS.

J'ai fait un bloc à droite de ma page en guise de "sommaire de page" avec des ancres qui amènent le visiteur directement à la partie qui l'intéresse. J'avais mis mes ancres en <p> et tout allait bien, mais après réflexion je les ai transformées en liste pour pouvoir ajouter des sous-catés par la suite. Le hic c'est que du coup la bordure de mes boutons (dont le texte est centré) n'englobe que le texte, malgré un bidouillage intensif je n'arrive pas à mettre les cadres sur toute la largeur du bloc... help?

Mon code:

<div id="sidebar">
<span class="sidebarheader" title="sommaire"><img src="titres/titresommaire.png" alt="titre sommaire"/>
<img src="images/divider.png" alt="divider"/></span>
<ul id="sidebarlist">
<li><a href="alifhome.html#quisommesnous" title="qui sommes nous">Qui sommes-nous?</a></li>
<li><a href="alifhome.html#notreequipe" title="notre équipe">Notre équipe</a></li>
<li><a href="alifhome.html#notrehistoire" title="notre histoire">Notre Histoire</a></li>
<li><a href="alifhome.html#modedevie" title="mode de vie">Mode de vie</a></li>
<li><a href="alifhome.html#contact" title="contact">Contact</a></li>
<li><a href="alifhome.html" title="retour">Retour à l'accueil</a></li>
</ul>
</div>

le CSS qui va avec:

#sidebar 
{
background-color: transparent; 
background-image: url("images/fondtexte1.png"); 
background-repeat: repeat; 
border: 1px solid #2c947a;
position: fixed;
right: 6%;
padding: 1em;
padding-bottom: 0.5em;
margin-top: 4%;
width: 17%;
margin-left: auto;
float: right; 
background-attachment: fixed;
-moz-border-radius: 20px; 
text-align: center;
text-decoration: none;
z-index: 1;
}

.sidebarheader 
{ 
text-decoration: none; 
text-align: center; 
background-color: transparent;
background-repeat: no-repeat; 
}

#sidebarlist
{
list-style: none;
margin-top: 0.4em;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
}

#sidebarlist li 
{
display: block;
color: #fff;
background: transparent;
}

#sidebarlist li a 
{
margin: 10px auto;
padding-top: 4px;
padding-bottom: 4px;
background-color: transparent;
color: #4c2713;
border: 1px solid #4c2713;
font: 0.8em Helvetica, "Andale Mono", verdana, Tahoma, Arial, sans-serif bold;
text-align: center;
line-height: 2.5em;
text-decoration: none;
-moz-border-radius: 5px;
}

#sidebarlist li a:hover, #sidebarlist li a:focus, #sidebarlist li a:active 
{
background: #ae7337 ;
text-decoration: none ;
}

et 2 screens, celui d'avant et celui après transformation en ul, je souhaite avoir les mêmes bordures que le premier:

http://img406.imageshack.us/img406/1499/screenshot9ti.jpg
http://img26.imageshack.us/img26/9500/screenshot11ne.jpg
Modifié par Tricky (15 Nov 2011 - 15:51)

Bonjour,

Le problème vient du fait que les a sont en display inline. Tu as dont deux solutions : appliquer les bordures sur le li ou ajouter un display block sur a.

Merci beaucoup!
je me sens vraiment bête-là!
J'ai appliqué les bordures sur le li et du coup... impec! Encore merci!