[On va dire resolu] Menu liste à puce inline

J'ai un soucis (enfin c'est un détail) avec mon menu. Mes <li> sont séparés par un caractère d'espace... Certes je peux tout mettre sur une ligne dans le fichier source mais c'est assez difficile à relire.
Une idée ?

  <div id="menu">
   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>
  </div>

#menu ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#menu li {
 display: inline;
}

Modifié le 04 Jan 2005 - 19:40

Bonjour littlesam,

Si j'ai bien compris ta question, tu cherches un caractère de séparation pour un menu affiché en ligne.

Tu peux utiliser le caractère "|" que tu obtiens par l'association des touches "Alt gr" et le "6" du pavé alpha.
Modifié le 04 Jan 2005 - 14:46

C'est le retour chariot qui est interprêté je pense.
Essaye :

		
<div id="menu">
	<ul>
		<li>
			<a href="#">lien</a></li><li>
			<a href="#">lien</a></li><li>
			<a href="#">lien</a></li><li>
			<a href="#">lien</a>
		</li>
	</ul>
</div>

Le problème persiste malgré tout. Le retours chariot crée un espace de toute façon ou que je décide de couper mon code

Que veux-tu dire éxactement, à quel endroit l'espace ? entre chaque lien ?

Sinon éventuellement, regarde ici : (vers le bas de la page) http://openweb.eu.org/articles/initiation_display/

J'ai en effet été trop vite littlesam, pardon.
Mon truc ne marche que sur Internet Explorer.

Je cherche...

Dominique :

Mes liens ont un padding de 5px et un border-right de 1px pour les séparer. Cela dessine des sortes de "cases" à l'écran. Mais comme un espace est rajouté avant chaque lien le survole ne va pas changer la couleur de la totalité du fond. Il restera un morceau de l'ancien fond à l'endroit de l'espace.

Je ne sais pas si je suis claire -___-
Modifié le 04 Jan 2005 - 15:02

Donc l'espace dont tu parles est lié au padding de 5px.

il faut donc que le survol soit pris en compte sur la balise "li" et non sur le lien lui-même... là, c'est à mon tour de me demander si je suis assez clair
Modifié le 04 Jan 2005 - 15:17

Non le survol marche bien (en tout cas avec Firefox, je suis nunux donc je peux pas tester IE pour le moment). C'est vraiment le retours chariot dans le code qui est interprété comme un espace. Si j'écris tout en une ligne ça marche parfaitement.

... et même si tu déclares tes liens comme ça en css ?

#menu li {
	display:inline;
	font-size:bla bla;
	margin:bla bla;
	padding:5px;
	color:#80590e;
}

#menu a:hover {
	color:#211704;
}

ou background à la place de color ???

Edité : essai aussi un padding et un margin à "0" sur la balise "li"
Modifié le 04 Jan 2005 - 15:29

J'ai essayé de mettre de margin et paddin à 0 partout rien n'y fait. C'est vraiment un espace.

Pour la couleur j'ai fait :

#menu {
 padding: 5px 0px 5px 0px;
 background: #dddddd url(menu.gif);
 background-position: top;
 background-repeat: repeat-x;
}
#menu ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#menu li {
 margin: 0px;
 padding: 0px;
 display: inline;
}
#menu a {
 padding: 5px;
 border-right: 1px solid #cccccc;
 color: #666666;
}
#menu a:hover {
 background: #ffffff;
 color: #000000;
}

Et le survol passe très bien... ça devrait pas ?

Si bien sur, sauf qu'au survol, tu as un écart, un vide, c'est bien ça ?

J'utilise aussi un menu construit de la même façon sur cette page (tout en haut) http://www.chroniques-taoistes.com/site/ ... et je n'ai aucun écart, as-tu un lien que je puisse voir ce qui se passe ? stp !

L'espace est toujours là, le truc c'est qu'avec le changement de couleur au survol ça choque.

Hop j'ai mis en ligne pour montrer le soucis :
http://schizolog.free.fr/alsacreations/

Dans la source j'ai :

   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>

Si je mets :

   <ul>
    <li><a href="#">lien</a></li><li><a href="#">lien</a></li>
   </ul>

le problème disparait.
Modifié le 04 Jan 2005 - 17:25

Merci pour le lien,

Arfff ! là je ne comprend pas, (pour info, ta page est identique sous ie),
j'ai fait pratiquement la même chose que toi et je n'ai pas ce problème.

On va voir si d'autres trouvent ce qui peu clocher...

... et si tu mets toutes les mages à "0" ... y compris le padding de la balise #menu, ça continu ?

Oui j'ai testé avec *{margin: 0px padding: 0px } et ça n'a rien changé.

Déroutant comme problème.

En effet, en mettant les <li> sur la même ligne, le problème disparait dans IE, mais pas dans Firefox.

Je ne sais pas quel Firefox tu as mais moi sous linux ça disparait quand tout est sur une ligne.

Wé on en a déjà parlé je sait plus à quel sujet sur le forum

remplace display: inline; par float: left;

et passe les liens en display: block;

Poire a écrit :
remplace display: inline; par float: left;

et passe les liens en display: block;

Oui mais ça complique des choses qui devraient rester simples. Et ça oblige à imposer une hauteur au <ul> (sinon les liens s'affichent en dehors à cause du float), ou alors un séparateur muni d'un clear.

Bref : c'est un problème assez curieux en effet.