Discussion :

[keysersausage]

Bonjour à tous,

Je suis actuellement en train de refaire le code d'un site sur lequel je travaille.
La home page possède un menu horizontal de 9 éléments qui était auparavant une simple successions de :

Code :

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

1
2
3
<a href="blablabla">
     <img src="blablab"/>
</a>

Pour y apporter plus de stabilité, j'ai voulu tout mettre dans une liste horizontale :

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
<ul style="list-style-type: none;">
  <li style="display: inline; padding: 0; margin: 0;">
     <a href="blablabla">
     <img src="blablab"/>
     </a>
  </li>
 
  <li style="display: inline; padding: 0; margin: 0;">
     <a href="blablabla">
     <img src="blablab"/>
     </a>
  </li>
 
  .....9 fois....
    <li style="display: inline; padding: 0; margin: 0;">
     <a href="blablabla">
     <img src="blablab"/>
     </a>
  </li>
</ul>

Seulement, un petit espace entre les <li> subsiste encore et toujours.
J'ai tout essayé (même les trucs les plus farfelus. Sait-on jamais...) : margin :0; margin: 0px; margin-left:0px; margin-right:0px.

Cela est non seulement très moche, mais en plus le 9e élément de ma liste se retrouve sur la ligne suivante !

Si quelqu'un pouvait me dire où je me trompe ou ce que j'oublie pour avoir des éléments de liste bien collés les uns aux autres, ce serait très sympa.

Merci d'avance !

[keysersausage]

La réponse est toute simple : les marges négatives ! (je ne savais pas que celà était possible)

J'ai trouvé la réponse sur ce thread.

En spécifiant des marges de -3px dans les styles de toutes mes <li>, ces dernières sont bien collées et le menu tient ainsi sur une ligne.

Je laisse aux modérateurs le soin de supprimer cette discussion (qui finalement n'en était pas vraiment une), ou de la laisser en ligne.

Merci

[nadox]

Bonjour,
Qu'est ce que cela donne en ajoutant :

Code :

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

1
2
3
4
5
 
* {
padding: 0;
margin: 0;
}

???

tes balises 'img' et 'a' peuvent décaler les balises 'li' si elles ont un margin...
d'ailleurs pour être moins stricte, il faudrait plutôt :

Code :

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

1
2
3
4
5
6
7
 
li a,
li img
{
    padding: 0;
    margin: 0;
}

Les margin négatif me semble plutôt être la solution de dernier recours(pas forcément bien géré sur tout les navigateurs), donc pas nécessaire dans ce cas...

Au fait : le style dans les balises HTML ne te gêne pas ?
(il s'agit de revoir un code existant, donc peut-être que c'est aussi l'occasion d'y apporter un peu plus de propreté ?)

[nadox]

Oups, je n'avais pas lu le thread jusqu'au bout, mais toi non plus me semble-t-il....

Ok.

Par défaut, les listes <li> sont des éléments de type block qui s'affichent les uns sous les autres.

Pour que les listes s'affichent les unes à côté des autres, il y a deux solutions : utiliser un display:inline (c'est le cas ici) ou utiliser un float:left;

Le petit "souci" avec l'utilisation de display:inline; c'est que l'affichage dans le navigateur prend en compte les retours à la ligne présents dans le code HTML.

Concrètement qu'est ce que ça veut dire ?

Avec ce code (celui présent actuellement), il y aura des marges entre les onglets :

Code :

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

1
2
3
4
5
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

Avec ce code, il n'y aura pas de marges entre les onglets :

Code :

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

<ul><li></li><li></li><li></li></ul>