Menu horizontal passe sur deux lignes!

**pracede2005** · 11/11/2007, 20h59

Bonjour,

J'ai fait une page web avec CSS mais mon menu passe sur deux lorsque je diminue la fenetre de mon navigateur.
Voici mon code:

Code :

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<html>
<head>
<style type="text/css" media="all">
 
body {
     margin: 0px;
     text-align: center;
}
 
#header{
	border: 1px solid red;
	position:relative;
     margin-left: auto;
     margin-right: auto;
	width:98%;
	height:125px;
}
#global{
	border: 1px solid red;
	position:relative;
     margin-left: auto;
     margin-right: auto;
     width: 98%;
}
#menu_gauche{
	border: 1px solid red;
	float:left;
	position:relative;
	width: 10%;
	height:395px;
}
#menu_droite{
	border: 1px solid red;
	float:right;
	position:relative;
	height:375px;
	text-align:left;
	width: 14%;
}
#page_principale{
	border: 1px solid red;
	float:left;
	position:relative;
	left:0px;
	width:75%;
}
 
#footer{
	border: 1px solid red;
	position:relative;
	width: 100%;
	height:80px;
	clear:both;
}
#navigation {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	}
 
 
#navigation li {
	float: left ;
	width: 150px ;
	border: 1px solid #600 ;
	margin-right: 1px ;
	color: #fff ;
	background: #c00 ;
	}
 
#navigation li a {
	display: block ;
	background: #c00 ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
	text-align: center ;
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #900 ;
	text-decoration: underline ;
	}
p{
text-align:justify;
}
h1{
font-style:normal;
font-weigth:bold;
font-size:14;
color:#332bf1;
}
</style>
 
</head>
<body>
<div id="header">
contenu du header 
</div>
<div id="global">
 
<div id="menu_gauche">
contenu du menu de gauche
<img src="image1.jpg" heigth="98%" width="100%" border="0" align=center/> 
</div>
<div id="menu_droite" >
contenu du menu de droite
<IMG SRC="image1.jpg" NAME="bande" heigth="98%" width="100%" border="0" align=center/>
</div>
<div id="page_principale">
<div align=center> 
<ul id="navigation">
 
	<li><a href="presentation.html" title="aller à la section 1">PRESENTATION</a></li>
	<li><a href="savoirfaire.html" title="aller à la section 2">SAVOIR-FAIRE</a></li>
	<li><a href="certifications.html" title="aller à la section 3">CERTIFICATIONS</a></li>
	<li><a href="realisations.html" title="aller à la section 4">REALISATIONS</a></li>
	<li><a href="plandacces.html" title="aller à la section 5">PLAN D'ACCES</a></li>
	<li><a href="nouscontacter.html" title="aller à la section 5">NOUS CONTACTER</a></li>
</ul>
</div>
<br/>
<br/>
<p>
 
<br/>
 
<u>Titre:</u>
<br/>
 
<br/>
Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte
</p>
</div>
<div id="footer">
contenu du footer 
</div>
 
</div>
</body>
</html>

Merci de votre aide

**Auteur** · 11/11/2007, 22h28

bonjour,

donne une valeur en pixel (px) à l'attribut width de tes composants header, global et footer plutôt qu'une valeur en pourcent (98% dans ton cas).

Menu horizontal passe sur deux lignes!

CSS

Discussions similaires

Partager

Partager