Bonjour à tous,

Je suis débutant et formé sur le tas en CSS et je dois préparer un site pour dans une quizaine de jour. J'ai choisi wordpress pour des raisons de simplicité d'édition des pages.

J'ai créé une barre de navigation horizontale qui comprend les éléments suivants : Une cadre (qui est une image) + Des boutons que j'ai configuré à l'aide d'un tutoriel (inspiré on va dire).

La partie sans bordure fait 788 pixels et il y a 7 éléments, les 6 premiers font 112 pixels, et je voudrais que le dernier en face 116pixels pour que l'intégralité de la barre soit cliquable, mais je n'y arrive pas. Voici mes codes :

index.php :

<?php get_header(); ?> <!-- ouvrir header,php -->
<div id="nav_bar">
	<ul>
	<li id="nav-home"><a href="#">Accueil</a></li>
	<li id="nav-par"><a href="#">Parrainage</a></li>
	<li id="nav-the"><a href="#">Theme</a></li>
	<li id="nav-pho"><a href="#">Photos</a></li>
	<li id="nav-ven"><a href="#">Venir a Troyes</a></li>
	<li id="nav-equ"><a href="#">Equipes</a></li>
	<li id="nav-jsa"><a href="#">Jsais pu</a></li>
	</ul>
</div>
<div id="content">
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		</h2>
		<div class="post_content">
			<?php the_content(); ?>
		</div>
	</div>
	<?php endwhile; ?>
	<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>

</body>
</html>

body {
font-family: Lucida Grande, Arial, Helvetica, Sans-serif;
font-size: 0.8em;
text-align: left;
color: black;
margin: 0;
background-image: url("fond.jpeg");
}

#page {
margin: 0 auto 0 auto;
width: 800px;
}

#header {
font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;
float: left;
height: 200px;
width: 800px;
background-image: url("logo_header.png");
background-repeat:no-repeat;
background-position:50% 50%;
}

#header h1{
margin: 50px 0 0 0;
}

#header a:visited {
color: white;
}

#nav_bar{
background-image: url("barre_navigation.png");
background-repeat:no-repeat;
float: left;
width: 800px;
height: 50px;
}

#nav_bar ul{
list-style-type: none;
margin: 0px;
width: 788px;
height: 38px;
padding: 6px 6px 6px 6px;
float: left;
}

li{
display:inline;
}


li a:link, #nav_bar li a:visited 
{
background:#b2b580;
color:#000;
width: 111px;
height: 38px;
float: left;
border-right: 1px solid black;
text-align: center;
}

#nav-jsa.a:link
{
width: 116px;
background:#b2b580;
float: left;
}

#header h1 {
text-align: center;
}

#content {
float: left;
width: 548px;
margin-bottom: 20px;
border-color:black;
border-style: solid;
border-width: 1px;
}
 
.sidebar {
float: right;
width: 248px;
border-color:black;
border-style: solid;
border-width: 1px;
}

#footer {
font-size: 1em;
padding: 10px 10px 0 0;
clear: both;
width: 900px;
}

Configuration: Windows XP
Firefox 3.0.11