bordure inférieure d'un menu

Version imprimable

Bonjour,

pour réaliser un menu, j'ai utilisé un code tout fait, mais il n'y a pas de bordure sur le bord inférieur, et je voudrais savoir comment en mettre une.
Code utilisé:

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
 <style type="text/css">
<!--
#menu12 {width: 200px;margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
font-style:bold;
}
#menu12 li a {
height: 32px;
voice-family: "\"}\""; voice-family: inherit;
height: 24px;
text-decoration: none;
} /* N'oubliez pas de renseigner l'adresse des images */
#menu12 li a:link, #menu12 li a:visited {
color: #000;
display: block;
background: url(http://docexterne.fr.schneider-electric.com/documentation/portail/images/menu12.gif);
padding: 8px 0 0 10px;
}
#menu12 li a:hover {
color: #111;
background: url(http://docexterne.fr.schneider-electric.com/documentation/portail/images/menu12.gif) 0 -32px;
padding: 8px 0 0 10px;
}
--></style>
            <div id="menu12">
            <ul>
              <li><a title=""
 href="xxx">Par
cote</a></li>
              <li><a title=""
 href="xxx">Base
compl&egrave;te</a></li>
              <li><a title="Biblioth&egrave;que"
 href="xxx">Biblioth&egrave;que</a></li>
              <li><a title="Conf&eacute;rences"
 href="xxx">Conf&eacute;rences</a></li>
              <li><a title="Etudes de march&eacute;s"
 href="xxx">Etudes
de
march&eacute;</a></li>
              <li><a title="Th&egrave;ses"
 href="xxx">Th&egrave;ses</a></li>
            </ul>
            </div>

06/05/2010, 15h16
obito

Bonjour, cette ligne nous interesse :

Code:

border-style: solid solid none solid;

Peut être mettre :

Code:

border:1px solid #000 ;

Donc vous pouvez enlever tous les autres border-* dans menul2
06/05/2010, 15h22
laurentSc

Merci, ça répond parfaitement ; pourrais-je avoir une explication pour ne pas mourir idiot ?
06/05/2010, 15h28
obito

Oui bien sur, alors premièrement :

Code:

border-style: solid solid none solid;

Cale signifie qu'il y aura une bordure partout sauf en bas justement (le none) tout bêtement vous auriez pu mettre:

Code:

border-style: solid solid solid solid;

Ca aurait mis des bordures sur chaque côté (bas y compris) du menu. Maintenant ce code :

Code:

border:1px solid #000 ;

signifie que dans menul2, on crée une bordure d'une largeur de 1 pixel (donc dans votre ancien code c'était border-width), de couleur noir (donc border-color) et le solid signifie que pour chaque côté du menu, on aura une ligne continue entourant le menu. Vous pouvez vous amusez à changer le solid par dotted, cela affichera des tiret au lieu d'un trait continu.

Comme je suis loin d'être un pro en CSS j'espère avoir été clair :D
06/05/2010, 15h36
laurentSc

Citation:

Envoyé par obito

Comme je suis loin d'être un pro en CSS j'espère avoir été clair :D

Oui, très clair, et en tout cas, plus pro que moi...