Menu liste vertical & espacement entre chaque item
Bonjour à tous,
J'ai adapté un menu sous forme de liste (ul li) avec des coins arrondis.
Seulement, l'ensemble des menus sont collés les uns aux autres et je souhaiterai mettre un espace entre chaque item...
J'ai donc créé 2 class différentes suivant le type (une classe spacer et une classe menu).
Le résultat est OK sur IE7 mais pas bon sous FF, quelqu'un aurait une idée d'ou cela peut-il provenir ?
CSS :
Code:
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
44
45
46
47
48
49
50
51
52
53
54
|
ul.crn{
float: left;
list-style: none ;
width:215px;
}
ul.crn li.menu{
background: #ccc url(../images/crn_05.gif) no-repeat top right;
float: left;
height: 30px;
width:100%;
margin: 0 20px;
text-align: center ;
}
ul.crn li.spacer{
padding-top:10px;
height: 10px;
width:100%;
color:#FFFFFF;
background-color:#FFFFFF;
}
ul.crn li.spacer:hover{
height: 10px;
width:100%;
color:#FFFFFF;
background-color:#FFFFFF;
}
ul.crn li.menu a:link, ul.crn li.menu a:visited{
background: url(../images/crn_03.gif) no-repeat top left;
color: #333;
float: left;
font-weight: bold;
line-height: 30px;
padding: 0 10px;
text-decoration: none
}
ul.crn li.menu:hover{
background: #333 url(../images/crn_10.gif) no-repeat top right
}
ul.crn li.menu a:hover, ul.crn li.menu a:focus{
background: url(../images/crn_09.gif) no-repeat top left;
color: #EBD938;
text-decoration: none
}
ul.crn li.menu img{
float: left;margin-top:2px
} |
HTML
Code:
1
2
3
4
5
6
7
8
9
10
|
<ul class="crn">
<li class="menu"><a href="#" >Les Statuts</a></li>
<li class="spacer"></li>
<li class="menu"><a href="#" title="link">Devenir Chauffeur</a></li>
<li class="spacer"></li>
<li class="menu"><a href="#" title="link">Devenir Exploitant</a></li>
<li class="spacer"></li>
<li class="menu"><a href="#" title="link">Le C.C.P.C.T.</a></li>
</ul> |
Merci pour votre aide
