[Résolu] [Merci MrPatate] Supprimer un espacement incompréhensible

Bonjour,

Je cherche à supprimer un espacement dans un menu en ligne comme suit :

<div id="menu">
	<ul>
		<li><a href="/">Item1</a></li>
		<li><a href="/">Item2</a></li>
		<li><a href="/">Item3</a></li>
		<li><a href="/">Item4</a></li>
	</ul>
</div>

Le CSS :

a { text-decoration: none; }
a:hover { text-decoration: underline; }
#menu ul, #menu li { display: inline; margin:0px; padding:0px; }
#menu ul { list-style: none; }
#menu a { font-size: 0.7em; }

Ce que j'ai actuellement (en jaune) :

Ce que je souhaite (en rouge) :

Le décalage (espace entre jaune et rouge que je veux supprimer) :


Une idée ?

Merci d'avance.
Modifié par DrumSHoTS (08 Aug 2006 - 16:47)

A tout hasard essaye de remplacer :
#menu ul, #menu li { display: inline; margin:0px; padding:0px; }
par :
#menu ul, #menu li { display: inline; margin:0px; padding:0px; position: relative; top: -2px }

Car l'espacement dont tu parles est du je crois à la police etc.

Effectivement, j'ai essayé avec un top à -1px pour ma balise <li>, ma zone rouge remonte, mais cette solution ne fait que déplacer le problème, l'espace se trouve maintenant en dessous.

Je souhaite supprimer les espaces au dessus et au dessous.

Ce qui est étonnant, c'est que tous mes margin/padding sont à 0px pour <ul> et <li>, si je teste un border 1px sur ces deux balises, l'espace reste. (balise type bloc en cause ?)

Si je teste un border 1px sur ma balise <a> (type en ligne), aucun espace ne subsiste.

Alors comment régler cet espace provoqué par mes balises <ul> egt <li> ?

Merci d'avance.

Salut, as-tu essayé d'enlevé margin et padding pour les liens?

coccimaster a écrit :
Salut, as-tu essayé d'enlevé margin et padding pour les liens?

Oui, le problème subsiste.

Une autre solution ?

Bah change la hauteur de ton truc vert, c'est ça le problème.

oxman a écrit :
Bah change la hauteur de ton truc vert, c'est ça le problème.

Que veux-tu dire ?

Mes balises sont contenues dans un bloc div "menu", qui dispose d'un background-image "truc_vert" comme tu dis.

Quelles valeurs veux-tu que je change ?
(Ma hauteur est fixe, 33px)
Cette valeur n'est pas source du problème, c'est la taille du couple de blocs <ul> <li> qui m'importe.
Modifié par DrumSHoTS (08 Aug 2006 - 15:28)

Comme tes éléments sont en inline, Il s'agit de la hauteur de ligne qui détermine la hauteur du bloc.

Essaie de fixer la propriété line-height à 1em, tu devrais obtenir ce que tu veux.

MrPatate a écrit :
Comme tes éléments sont en inline, Il s'agit de la hauteur de ligne qui détermine la hauteur du bloc.

Essaie de fixer la propriété line-height à 1em, tu devrais obtenir ce que tu veux.

Même combat.

J'ai essayé de passer line-height à 1em (même 0.7em pour tester) sur ul, li, rien à faire. La solution ne vient pas.

D'autres idées ?

mmm... alors déplace les 2 propriétés font-size et line-height dans le sélecteur ul :

#menu ul { list-style: none; font-size:0.7em; line-height:1em;}

Merci MrPatate !

Il suffisait juste de définir la taille de la police dans la balise <ul> comme tu l'as dit ci-dessus (le line-height n'est pas nécessaire).

Sujet résolu.

Merci encore !


Modifié par DrumSHoTS (08 Aug 2006 - 16:46)