[CSS] Problèmes d'héritage, aidez moi svp :)

Fermé
Canaboss Messages postés 49 Date d'inscription dimanche 1 juin 2008 Statut Membre Dernière intervention 22 août 2009 - 13 juin 2009 à 12:41
Canaboss Messages postés 49 Date d'inscription dimanche 1 juin 2008 Statut Membre Dernière intervention 22 août 2009 - 14 juin 2009 à 16:14
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>


CSS (en gras, partie la plus importante par rapport au problème):

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;
}


Je prends tous les commentaires !!

Merci à tous !

2 réponses

Profil bloqué
13 juin 2009 à 13:30
Salut !

Si je compernd bien :
<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>


Tu voudrai que les 6 premiers fasse 117 px et le dernier fasse 116 px de largeur ?
Peux tu envoyer le CSS de c'est ID ici ?
0
Canaboss Messages postés 49 Date d'inscription dimanche 1 juin 2008 Statut Membre Dernière intervention 22 août 2009 10
14 juin 2009 à 16:14
J'ai pas défini de styles CSS, je pensais que ceci suffirait :

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;
}


En gros, je définis une config de base pour les points de ma liste puis une spéciale pour le dernier ... Mais ça ne marche pas. Pour l'instant c'est uniquement la partie "li a:link, #nav_bar li a:visited " qui commande tout.
0