18041 sujets

Questions générales et questions de débutants

Espaces visibles dans un menu horizontal

Bonjour,

J'ai un problème avec le bout de code suivant.
Quand je passe ma souris sur un lien, un espace blanc apparaît (à gauche). Si je colle tous les <li></li> ensemble, pas de soucis.
Hors je ne peux pas changer le code html. Y'a-t-il un moyen pour que les espaces ne soient pas pris en compte ?


<style>
#haut {
height: 30px;
background-color:#ffffff;
border:0px solid #8BBA1F;
}

ul.primary-links {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    /*white-space: nowrap;*/
	margin-left:0px;
	margin-top:1px;
}
ul.primary-links li {
    list-style-type: none;
    display: inline;
	background-color:#FFFFFF;
	/*line-height: 30px;*/
	margin-right: 0;
	/*border: 0;*/
	margin-left:0;
	padding:0;
}
ul.primary-links li a {
    text-decoration: none;
    padding: 7px 15px;
    color: #000;
	background-color:#FFFFFF;
	/*border: 1px solid #8BBA1F;*/
	font-size:14px;
	font-weight:bold;
	border-right:2px solid #8BBA1F;
}
ul.primary-links li a:link {
    color: #FFF:
}
ul.primary-links li a:visited {
    color: #000;
}
ul.primary-links li a:hover {
    color:#148935;
    background-color: #F4DD23;
}
</style>


<div id="haut">
	<ul class="links primary-links">
    	<li class="menu-137 first"><a href="/?q=node/add" title="">Le groupe local</a></li>
		<li class="menu-135"><a href="/?q=node/add" title="">Actualités</a></li>
		<li class="menu-136"><a href="/?q=node/add" title="">Communiqués</a></li>
		<li class="menu-143 last"><a href="/?q=contact" title="">Contact</a></li>
	</ul>
</div>


Merci.
Bonsoir,

6l20 a écrit :
Impact sur le rendu de la mise en forme du code html
La réponse au problème de chatlumo y est.

6l20 a écrit :
Et le lien cité en référence
Par contre ce lien-ci n'est pas adapté.

chatlumo, le problème que tu as c'est que ton code est ainsi:
premier item du menu
deuxième item du menu
troisième item du menu

Comme les retours à la ligne sont interprétés comme des espaces (de même que les tabulations), tu auras une espace entre chaque item du menu côté rendu. Ce qui peut donner:
[premier item] ESPACE [deuxième item] ESPACE [troisième item]

Bref, tout ça est normal.

Ce que tu peux faire éventuellement, c'est commenter les espaces blancs dans le code HTML:
<ul class="links primary-links">
	<li class="menu-137 first"><a href="/?q=node/add" title="">Le groupe local</a></li><!--
	--><li class="menu-135"><a href="/?q=node/add" title="">Actualités</a></li><!--
	--><li class="menu-136"><a href="/?q=node/add" title="">Communiqués</a></li><!--
	--><li class="menu-143 last"><a href="/?q=contact" title="">Contact</a></li>
</ul>


Tu évites aussi ce problème si tes LI sont flottants plutôt qu'en display: inline.
Modifié par Florent V. (06 Jun 2008 - 21:23)
Ok merci, je vais essayer de les passer en flottants, car si je commente les espaces autant tout coller.
chatlumo a écrit :
Merci mais moi je rencontre ce problème sous Firefox donc je ne comprend pas Smiley decu

Florent V. a écrit :

Par contre ce lien-ci n'est pas adapté.

Je ne veux pas chipoter, mais où était-il fait mention que le problème se déclenchait sous le seul navigateur Firefox ? Smiley bawling

Bref, je penchais également pour la "flotaison des li" Smiley cligne

Bonsoir.
6l20 a écrit :
Je ne veux pas chipoter, mais où était-il fait mention que le problème se déclenchait sous le seul navigateur Firefox ? Smiley bawling

Non, c'est l'inverse: il n'était pas précisé que le problème se posait spécifiquement sous Internet Explorer, donc donner en lien une page pour un bug de HasLayout sans plus d'informations c'est faire preuve d'empressement. Smiley cligne

De plus, le problème n'est pas spécifique à Firefox car on devrait le retrouver sous Safari, Opera, Konqueror, etc. On devrait aussi le retrouver sous Internet Explorer, du moins en mode Standard, sauf si bug ou comportement anormal de ce navigateur.

6l20 a écrit :
Bref, je penchais également pour la "flotaison des li" Smiley cligne

Moi j'aime bien les commentaires dans le code HTML. Si le display: inline marche mieux que le float, c'est une bonne solution. Si c'est indifférent, autant régler le problème en CSS uniquement, donc float.
Il est trop fort ce Florent V. a écrit :

Non, c'est l'inverse: ...

Qu'est-ce que tu veux rajouter ? Smiley ohwell
Chef oui chef Smiley jap Smiley prie Smiley cligne

Florent V. a écrit :

Moi j'aime bien les commentaires dans le code HTML. Si le display: inline marche mieux que le float, c'est une bonne solution. Si c'est indifférent, autant régler le problème en CSS uniquement, donc float.

J'aime bien ce bizarre "float" Smiley smile
Sujet clos
Aller à