Mise en forme d'un menu en CSS
Bonjour,
Je sollicite votre aide pour régler mon petit problème.
J'essaye de réaliser un menu simple en CSS, mais je bloque au niveau de la mise en forme. J'aimerais ajouter un cadre noir entre chacun de mes boutons comme sur l'image suivante :
http://img515.imageshack.us/img515/3...stitre2mi5.jpg
Mais je n'arrive pas à obtenir ce résultat.
Voici l'image affichée de mon menu :
http://img522.imageshack.us/img522/2...nstitrefn0.jpg
Mon code 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
|
div#menu
{
}
div#menu ul
{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 30px;
white-space: nowrap;
}
div#menu li
{
list-style-type: none;
display: inline;
}
div#menu li a
{
text-decoration: none;
color: black;
padding: 7px 6px;
}
div#menu li a:hover
{
color: white;
background-color: #B17046;
} |
Mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="menu">
<ul>
<li><a href="link1.html">Accueil</a></li>
<li><a href="link1.html">Présentation du 4L Trophy</a></li>
<li><a href="link2.html">Présentation de la CusTrophy</a></li>
<li><a href="link3.html">Planning</a></li>
<li><a href="link3.html">Photos</a></li>
<li><a href="link3.html">Carnet de bord</a></li>
<li><a href="link3.html">Nos sponsors</a></li>
<li><a href="link3.html">Contact</a></li>
</ul>
</div> |
Merci pour votre aide.
