Discussion :

[grinder59]

Bonjour,

j'ai un tout petit souci que je n'arrive pas à résoudre :

lorsque dans une liste de liens, je mets les <li></li> les uns en desosus des autres, cela ajoute un espace de 3 px de large environ entre les différents éléments (affichés en ligne dans le navigateur). C'est dommage car dans le source du coup, malgré l'utilisation des CSS ce n'est plus aussi clair. Je suppose que ça doit être une histoire de display inline ou un truc dans le genre, mais ne maitrisant pas bien le sujet, je galère à trouver... Quelqu'un saurait-il d'ou ça vient ?

Merci

Ci-dessous la déclaration CSS pour ma liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
	#menubar{
	  background:#0F353E;
	  line-height:23px;
	  text-align:center;
	  color:#ffffff;
	  width:760px;
	}
 
	#menubar ul {
	  display:inline;
	  margin-left:186px;
	}
 
	#menubar li {
	  display:inline;
	}
 
	#menubar a.last{
	  display:inline;
	  border-right:0px;
	}
 
	#menubar a{
	  padding: 0px 12px 0px 12px;
	  color:#ffffff;
	  text-decoration:none;
	  border-right:1px #ffffff solid;
	}
 
 
	#menubar a:hover{
	  text-decoration:underline;
	  color:#ffffff;
	  background : #5E767A;
	}

et le code HTML associé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
        <div id=menubar>
          <ul>
            <li><a href=index.php?a=6>Menu1</a></li><li><a href=index.php?a=7>Menu2</a></li><li><a href=index.php?a=8>Menu3</a></li><li><a href=index.php?a=9>Menu4</a></li><li><a href=index.php?a=10 class=last>Menu5</a></li>
          </ul>
        </div>

[Freed0]

J'ai pas trop compris ton problème... tu veux que les éléments soient + collés ?
Donc diminuer l'espace entre un élément et ses bordure ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   Menu 1   |   Menu 2   |   Menu 3

Qui deviendrait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 Menu 1 | Menu 2 | Menu 3

Si c'est le cas, un padding devrait arranger l'affaire.

[grinder59]

non non, c'est juste que le code suivant
<li>menu1</li><li>menu2</li>
donne le résultat suivant :
menu1|menu2|

et que le code suivant
<li>menu1</li>
<li>menu2</li>
donne le résultat suivant
menu1| menu2|

l'espace entre la bordure de menu1 et menu 2 semble provoqué par le retour à la ligne entre les 2 li et c'est ça que je voudrais éliminer....

[declique]

Bonjour,

Ma réponse va peut-être sembler un peu catégorique mais "C'est impossible" parce que HTML ignore totalement les retours à la ligne.

Maintenant ce qui peut se produire c'est que ton éditeur (ou le programme qui génère le HTML) ajoute des balises <br/>. En PHP, la fonction nl2br() fait cela par exemple.

Il se peut aussi que je me trompe...
Enfin bon.

[masu]

Ma réponse va peut-être sembler un peu catégorique mais "C'est impossible" parce que HTML ignore totalement les retours à la ligne.

En theorie ma réponse serait la meme mais aavec ton exemple, on voit bien qu'un espace apparait avec le retour a la ligne.
Le plus etrange ca se produit aussi bien avec IE que FF donc il semblerait etrange que les 2 (qui sont tellement differant) aient le meme bug.

Malgres quelques essai, je n'ai pas pu trouver d'ou cela pouvait venir.
Soit tu garde ton css et pas de saut de ligne soit tu peu essayer un menu avec des display:block et des float:left, plutot que ton css a base de display inline.