[RESOLU] Problème Barre Navigation

Bonjour,
Je suis débutant est j'ai un problème quant à ma barre de navigation (html/css).


En fait voici la structure standard :

<div id="barre-nav">
		<ul class="barre-nav">
		<span class="cat-label">Catégories :</span>
			<li class="cat-item current-cat"><a href="#/category/photoshop/">Toutes</a></li>
			
...

			<li class="cat-item cat-item-4"><a href="#/category/photoshop/text-effects/">Sport</a></li>
			<form action="{$baseurl}/search.php" method="get">
            	<input type="hidden" name="type" value="article" />
				<input type="text" name="text" id="mot" value="Rechercher..."/> <input type="submit" value="Go!" id="submit"  />
			</form>
		</ul>
</div>

Avec ce CSS :

#barre-nav {
	height:80px;
	clear:both;
	padding:0px;
	margin:0px;
}
ul.barre-nav {
	background-color:#326a9a;
	height:80px;
	padding:0px 0px 0px 40px;
	margin:0px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
}
ul.barre-nav li {
	display:inline;
	margin-right:25px;
	line-height:40px;
}
ul.barre-nav li a {
	color:#a1c6e5;
	font-weight:bold;
	font-family:Helvetica, Arial, sans-serif;
	text-decoration:none;
	font-size:.9em;
	padding:5px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	text-shadow: -1px -1px 0px #30608a;
}
ul.barre-nav li a:hover {
	color:#f1f9ff;
}
ul.barre-nav li.current-cat a {
	background:#264662;
	color:#f1f9ff;
	text-shadow: -1px -1px 0px #14324b;
	border-left:1px solid #1c3144;
	border-top:1px solid #1c3144;
}
ul.barre-nav li.current-cat a:hover {
	background:#213d55;
}

ul.barre-nav span.cat-label {
	color:#f1f9ff;
	font-weight:bold;
	font-family:Helvetica, Arial, sans-serif;
	text-decoration:none;
	font-size:.9em;
	padding:5px;
	text-shadow: -1px -1px 0px #30608a;
}

ul.barre-nav form {
	display:inline;
	margin-right:25px;
	line-height:40px;
}

ul.barre-nav form input {
	font-family:Helvetica, Arial, sans-serif;
	font-style:italic;
	color:#666666;
	font-size:.9em;
	padding:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

En fait quand je suis sur la catégorie en haut à droite ça me bouffe le quignon de droite du cat-current... je comprends pas pourquoi, j'ai essayé de jouer sur padding et margin mais rien...

En vous remerciant,

Pop
Modifié par popsantiago (23 Oct 2010 - 22:58)

En prenant intégralement le code fourni, je ne reproduis pas ton erreur dans Firefox ou dans Chrome. Il ne manque aucun coin.

As-tu un exemple en ligne de ton problème car le code que tu nous a donné n'en est pas la source.

Non c'est en local...
Par contre penses-tu que ca puisse venir du fait que le nombre d'onglet est tellement important que j'ai un retour à la ligne, soit une navigation sur 2 lignes et le problème n'intervient que sur le dernier onglet de la premiere ligne...
Je rajoute juste que ce problème n'intervient que sur ce dernier item.
Merci en tout cas

PS : je te mets un copie de la navigation integrale ...

Modifié par popsantiago (22 Oct 2010 - 18:33)

Bon j'ai fait un test et en effet, je n'ai plus le souci si je mets la barre de navigation sur une ligne
Mais j'ai trop d'items, je peux pas en virer...
Vous voyez une solution? (sachant que les catégories sont générées par une boucle wordpress...) donc je sais pas faire deux lignes de navigation manuellement.
Merci

Bonsoir,

J'ai pu reproduire ton problème avec epiphany et arora - effectivement Firefox ne pose aucune difficulté.

Par contre, j'ai retourné le truc dans tous les sens pour l'instant je n'ai pas non plus trouvé de solution.


Désolée de ne pas pouvoir t'aider davantage


EDIT : j'ai peut-être une solution

ul.barre-nav li { 
    display:inline-block; 
    margin-right:25px; 
    line-height:40px;
    
} 

http://stackoverflow.com/questions/2141268/webkit-doesnt-paint-background-color-for-entire-width-of-final-inline-list-item
Modifié par thelma (22 Oct 2010 - 22:22)

Merci Thelma!!! dsl pr le retard
Ta solution fonctionne à merveille sous chrome, firefox et safari! (sous mac dc j'ai pas pu essayer sous IE)
A plus les gens et encore merci