Discussion :

[Torpedox]

Bonjour,

J'ai un problème : je n'arrive pas à supprimer l'espace en haut et en bas d'un bloc ul. J'ai pourtant les margin/padding à 0.

Voici le code :

html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id='haut'>
Logo
<br><br><br>
</div>
 
<div id='menu_haut'>
<div class='spacer'> &nbsp; </div>
<ul>
<li><a href='#'>Voici</a></li>
<li><a href='#'>Voila</a></li>
</ul>
<div class='spacer'> &nbsp; </div>
</div>

Et la 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
32
33
34
35
36
37
38
39
40
41
 
#haut {
background:blue;
margin:0;
padding:0;
}
 
 
#menu_haut {
background:red;
margin:0;
padding:0;
margin-bottom:100px;
}
 
#menu_haut a {
background:orange;
display:block;
padding:10px;
padding-right:10px;
border-width:1px;
border-style:solid;
border-color:black;
width:120px;
}
 
#menu_haut a:hover {
background:green;
}
 
#menu_haut ul {
background:green;
display:block;
padding:0;
margin:0;
}
 
#menu_haut li {
float:left;
list-style-type:none;
}

Si je mets une taille au div menu_haut, sous mozilla l'espace en bas disparait (mais pas en haut) et sous IE nada.


Comment faire ?

Merci de votre aide !

[Nesmontou]

Salut, j'avais eu un problème identique, il me semble que pour y remédier, il faut mettre tout le code de la liste en ligne

Code :

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

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

Ca marche :

[Torpedox]

Négatif J'avais déja lu cela par rapport à IE mais là aucun résultat.

Même si je mets une valeure minuscule pour la hauteur (genre 2px), sous Mozilla il rapetisse mais il conserve une marge en haut en bas (mais non colorée cette fois) et sous IE il ne change même pas la taille.

Doit bien avoir une astuce quand même ???

Merci de votre aide.

[Nesmontou]

Tu as essayé en mettant margin: 0; pour les balises <li> : Voire peut-être padding: 0;

[Torpedox]

Tu as essayé en mettant margin: 0; pour les balises <li> Question Voire peut-être padding: 0;

Hé non ça ne marche malheureusement pas

J'ai beau mettre des margin:0 partout, rien.

Snif.

[chat hotplug]

Bonjour,

Et avec ça ?

Code :

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

1
2
3
4
5
6
 
.spacer{
margin :0;
border-width: 0;
padding : 0;
}

8)

[Nesmontou]

Au fait, ton spacer sert à quoi :

[Torpedox]

Le spacer sert à remplir l'espace autour des <li> car vu qu'ils sont en float:left ils n'occupent (en théorie) d'espace, donc le div ne se remplit pas.

En enlevant les spacer cela fonctionne, par contre j'aimerais que la bande horizontale crée par les <li> continue jusqu'au bord du div (donc de la page) mais cela ne se produit pas sous Mozilla, même en mettant un background au ul.

Si j'enlève le float:left au li cela fonctionne sous Mozilla et Explorer mais il y a retour à la ligne entre les <li>.

Le code suivant fonctionne cette fois sous explorer (plus d'espace et la bande qui se prolonge via le background du ul) mais le background du ul n'est pas appliqué sous Mozilla. une idée ?
La css reste la même (on change juste la couleur background du <ul> pour avoir la même que celle des <li>)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id='haut'>
Logo
<br><br><br>
</div>
 
<div id='menu_haut'>
<ul>
<li><a href='#'>Voici</a></li><li><a href='#'>Voila</a></li>
</ul>
</div>

Encore merci pour votre précieuse aide