Menu de navigation

**demu73** · 03/10/2012, 15h32

Bonjour

J'ai un souci avec mon menu de navigation. J'ai lu attentivement le tuto de cette page mais malheureusement, avec les terme anglais, je comprend pas bien le script proposer en exemple. Aussi, je n'est pas trouvé une solution à un problème de longueur.

Je commence par le premier celui du menu déroulant à plusieurs niveaux. J'aimerais avoir le même résultat que celui du tuto. Et j'ai pas trouvé le code exact pour avoir la même chose. Je vous met mes codes HTML et CSS.

le HTML :

Code HTML :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styles.css" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">
 
	header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { 	
    display: block;
}
     </style>
		<![endif]-->
		<title>index</title>
    </head>
    <body>
 
	<ul id="menuDeroulant">
		<li>
		    <a href="index.php">Accueil</a>
		    <ul class="sousMenu">
		        <li><a href="contact.html">Contact</a></li>
			</ul>
			</li>		
		</li>
 
		<li>
			<a href="trains.html">Les trains</a>
			<ul class="sousMenu">
				<li><a href="cff.php">CFF</a></li>
				<ul>
				    <li><a href="re460.php">Re 460</a></li>
				    <li><a href="re44ii.php">Re 4/4 II</a></li>
				</ul>
				<li><a href="bls.php">BLS</a></li>
				<li><a href="mo.php">MO</a></li>
				<li><a href="tpf.php">TPF</a></li>
		        <li><a href="mc.php">MC</a></li>
			</ul> 
			</li> 
		<li>
			<a href="bus.html">les bus</a>
			<ul class="sousMenu">			      
				<li><a href="bernmobil.html">Bernmobil</a></li>
			    <li><a href="tl.html">TL</a></li>
			</ul>
		    </li>
		<li>
			<a href="infra.html">Infrastructure</a>
			<ul class="sousMenu">			      
				<li><a href="infra.html">En construction</a></li>
			</ul>
		    </li>
	    <li>
		    <a href="photo.html">Photos</a>
			</ul>
			</li>	
	</ul>
	</li>
 
 
	</body>
</html>

Le CSS

Code CSS :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
html, body 
{
  font: 11px verdana, sans serif;
  background: transparent url("http:www.triebzug.ch/divers(logobilde.jpg") top center no-repeat;
  margin:0;
  padding:0;
  height:100%; 
}
 
html>body #wrap {height:100%;} 
 
#header 
{
   width:100%;
   height:5em;
}
 
html>body #header 
{
  position:fixed;
  z-index:10; 
}
 
html>body #content-wrap {height:100%;} 
 
html>body #content {padding:6em 1em;} 
 
 
#menuDeroulant
{
   width : 644px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
   position: absolute;
   top: 0;
   left: 0;   
}
#menuDeroulant li
 {
    float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant  .sousMenu
{
    display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuderoulant .sousMenu li
{
    float: none; 
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent; 
	border-right: 1px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
   display: block;
   height: 1%;
   color: #090800;
   background: #EBDE13;
   margin: 0;
   padding: 4px 8px;
   border-right: 1px solid #090800;
   text-decoration: none;
 }
 #menuDeroulant li a:hover { background-color: #FCBF49; }
 #menuDeroulant li a:active { background-color: #EBDE13; }
 
 #menuDeroulant .sousMenu li a:link,
 #menuderoulant .sousMenu li a:visited
 {
    display: block;
	color: #090800;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("http://www.triebzug.ch/divers/logobilde.jpg");
}
#menuDeroulant .sousMenu li a:hover
{
   background-image: none;
   background-color: #FCBF49;
 }
 
 
div#article
{
    margin-left: auto;
	margin-right: auto;
	width: 50em;
    text-align: left;
}
body#footer 
{
   width:100%;
   height:5em;
}
 
html>body #footer 
{
  position:fixed;
  bottom:0;
  z-index:10; 
}

Mon deuxième soucis concerne la longeur de barre de menu, pour bien comprendre voir la pièce attachée (version miniature). Je souhaite que l'onglet "photos" soit à coté de l'onglet "infrastructure". Je cherche le code à modifier pour augmenter le nombre d'onglet au menu de navigation.

En vous remerciant d'avance pour votre aide.

Menu de navigation

CSS

Mode arborescent

Discussions similaires

Partager

Partager