Redéfinir les marges d'une liste à puces

**om.rava** · 30/11/2005, 19h29

Bonjour!

Je suis en train de réaliser un site et j'utilise CSS. Je désire mettre une liste à puces dasn un menu. Cependant, l'epace entre les puces est différent sous IE et sous Mozilla?

Comment remédier à cela??

Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="menuGauche"> 
    <div class="styleTitreMenu"> 
      <h3>Club</h3>
      <!-- Titre du sous-menu -->
      <ul>
        <li >1ère équipe</li>
        <!-- Liste des liens du sous-menu -->
        <li>2ème équipe</li>
        <li>Vétéran</li>
        <li>Filles</li>
        <li>Juniors</li>
      </ul>
    </div>

et le CSS:

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
#menuGauche
{
	/*border: 2px solid black;*/
	width: 140px;
	height: 445px;
	position: absolute;
	left: 0px;
 
	/*margin: 5px;*/
}
 
 
 
 
.styleTitreMenu
{
	font-family: arial;
	color: white;
	font-size: 10px;
}
 
.styleTitreMenu h3
{
	font-family: arial;
	color: white;
	font-size: 15px;
	text-align: center;
	text-decoration: underline;
	background-color: #003399;
 
}

Merci d'avance!

**tfe** · 01/12/2005, 00h51

ca doit se jouer du coté du li { padding: 0 px; } par exemple

voir sinon un list-style-position à specifier

**Nesmontou** · 01/12/2005, 08h18

Salut, pour la différence entre IE et Mozilla, j'ai déjà remarqué un bug sous IE (confirmé par d'autres sites)

Si tu mets

Code :

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

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

Tu n'auras pas les mêmes espaces sous IE et Mozilla, même en jouant sur les marges

Il faut mettre

Code :

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

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

Et là, tout est OK pour IE

Ah, ce sacré IE ;-)

**om.rava** · 01/12/2005, 12h21

Merci pour vos réponses mais cela ne foonctionne toujours pas...

Meme en rajoutant un padding à o, cela ne donne pas le même résultat sur les navigateurs...

**Nesmontou** · 01/12/2005, 12h43

Re, tu peux tester ça

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
37
38
39
40
41
42
43
<html>
<head>
<style type="text/css">
#menuGauche
{
   width: 140px;
   height: 445px;
   position: absolute;
   left: 0px;
}
 
.styleTitreMenu
{
   font-family: arial;
   font-size: 10px;
}
 
.styleTitreMenu h3
{
   font-family: arial;
   font-size: 15px;
   text-align: center;
   text-decoration: underline;
   background-color: #003399;
   
}
 
li
{
        line-height: 1em;
        padding: 2px;
}
</style>
</head>
<body>
<div id="menuGauche">
    <div class="styleTitreMenu">
      <h3>Club</h3>
      <ul><li>1ère équipe</li><li>2ème équipe</li><li>Vétéran</li><li>Filles</li><li>Juniors</li></ul>
    </div>
</div>
</body>
</html>

Comme ça, tu as le même espace pour FF et IE ; j'ai juste rajouté le line-height pour les li

**om.rava** · 01/12/2005, 14h54

La classe merci beaucoup!

Redéfinir les marges d'une liste à puces

HTML

Discussions similaires

Partager

Partager