Discussion :

[Paul TOTH]

Bonjour,

Existe-il une méthodes basée sur le style qui permette de donner à ces deux liste exactement le même look ? A savoir, sans espace entre les Items (FF) et avec des libellés de même largeur (IE 6)

Merci

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
 
<html>
<style>
ul {
  border-bottom: 1px solid black;
  padding: 1px;
  font-family: Verdana;
}
li {
  display: inline;
  background-color: silver;
  border: 1px solid gray;
  padding: 1px 4px;
}
li.active {  
  background-color: white;
  color: black;
  border-bottom: 1px solid white;
}
</style>
<body>
<h1>liste sur une seule ligne</h1>
<ul>
<li>Item1</li><li class="active">Item2</li><li>Item3</li><li>Item4</li>
</ul>
<h1>liste sur plusieurs lignes</h1>
<ul>
 <li>Item1</li>
 <li class="active">Item2</li>
 <li>Item3</li><li>Item4</li>
</ul>
</body>
</html>

[sebhm]

Bonjour,

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
<style>
ul {
  border-bottom: 1px solid black;
  padding: 1px;
  font-family: Verdana;
}
li {
  float : left;
  list-style-type: none;
  background-color: silver;
  border: 1px solid gray;
  padding: 1px 4px;
}
li.active {  
  background-color: white;
  color: black;
  border-bottom: 1px solid white;
}
</style>

le type de 'display' inline ne fonctionne pas de la meme facon sur IE et FF.
Il faudrait à la limite mettre un inline-block pour FF mais IE ne le connait pas. il faudra alors un hack CSS pour mettre un inline que pour IE. Mais ce ne résoudrait pas l'espace entre les LI saisis sur plusieurs lignes.

[Paul TOTH]

Merci, c'est pas mal, mais cette solution apporte un autre problème que je n'ai pas réussi à résoudre, c'est pourquoi je l'ai écartée

En effet, dans ce mode, la ligne affichée par le border-bottom du UL se retrouve en haut des LI...et on perd l'effet "onglet" recherché.

[sebhm]

alors ajoute ceci

Code :

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

  padding-bottom: 21px;

dans le css du ul
(apres, tu geres les hauteurs comme tu veux, tu peux mettre un line-height sur les li).
cela va décaler le border-bottom.

merci à notre site préféré, que tu peux consulter pour avancer