Menu horizontal en CSS
Un grand classique en HTML : comment faire un menu horizontal un peu "stylé" en CSS
Il y a beaucoup d'exemples sur le net !
J'en ai fait un rapide. Il n'est pas encore très stylé mais au moins il y a les grands principes.
Par contre le div qui encapsule le menu n'arrive pas à contenir totalement le menu. Il "déborde" du fait du padding. Je n'arrive pas à comprendre, je pensais que le padding de l'élément contenu oblige l'élément parent à s'agrandir. A suivre...
Voir le résultat
1: <html>
2: <head>
3: <title>Test menu</title>
4: <style type="text/css">
5: <!--
6: body { margin: 0;
7: padding: 0;
8: font: 1em "Trebuchet MS",Arial,sans-serif ; }
9: div#head {
10: background: #c00; }
11: ul#menu {
12: margin: 0;
13: padding: 0;
14: list-style: none;
15: text-align: center; }
16: ul#menu ul {
17: padding: 0;
18: margin: 0; }
19: ul#menu li {
20: display: inline;
21: margin-right: 1px;
22: color: #fff;
23: background: #aaa;
24: padding: 0;
25: margin: 0; }
26: ul#menu li a {
27: padding: 4px 20px;
28: background: #000;
29: color: #fff;
30: text-align: center;
31: text-decoration: none; }
32: ul#menu li a:hover, #menu li a:focus, #menu li a:active {
33: background: #900;
34: border-bottom: 3px solid #000; }
35: -->
36: </style>
37: </head>
38: <body>
39: <div id="head">
40: <ul id="menu">
41: <li><a href="#">Menu 1</a></li>
42: <li><a href="#">Menu 2</a></li>
43: <li><a href="#">Menu 3</a></li>
44: <li><a href="#">Menu 4</a></li>
45: </ul>
46: </div>
47: <br/>
48: <div id="body">
49: Mon blabla50: </div>
51: </body>
52: </html>
0 Response to "Menu horizontal en CSS"
Enregistrer un commentaire