Centrer un menu dynamique

**ludojojo** · 09/09/2009, 15h04

bonjour,
Voila je viens de créé ma première page web, j'ai utilisé les cours proposé sur ce site.
Il y a plusieurs cadres, j'ai essayé de m'en inspirer mais sans succès.
J'aimerais pouvoir créer un cadre sur la gauche de ma page, qui soit "transparent", sans fond en gros, qui me permettrais de gérer la navigation à travers plusieurs pages, où faire des redirections vers d'autres sites.

Mais je ne m'en sort pas.
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">
	<head>
		<title>Solczynski web site</title>
		<style type="text/css" media="screen,print"> 
			html,
			body {
				margin:0;
				padding:0;
				height:100%; 
			}
			html>body #wrap {height:100%;} 
			#wrap {
				width:40em;
				margin:0 auto;
			}
			#header {
				width:40em;
				height:5em;
			}
			html>body #header {
				position:fixed;
				z-index:10;}
			html>body #content-wrap {height:100%;} 
			html>body #content {padding:6em 1em;} 
			#footer {
				width:40em;
				height:5em;
			}
			html>body #footer {
				position:fixed;
				bottom:0;
				z-index:10;
			}
			html,
			body {
				color:#333;
				background:#fff url('bg.jpg') fixed;
			}
			body {font-size:12px, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;}
			h1, h2 {
				margin:0.25em 0;
				font:normal 1.5em/1.1 "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
				text-align:center;
				letter-spacing:1px;
			}
			p {
				margin:1em 0;
			}
			.underline {
				text-decoration:underline;
			}
			.info {
				position:relative;
				padding:0.5em;
				border:2px solid #999;
				background:#000;
				color:white;
				text-align:center;
				font-size:18px;
			}
			.navigation {
				position:left;
				padding:0.5em;
				border:2px solid;
				color:white;
				text-align:center;
				font-size:18px;
			}
			a:link,
			a:visited {
				border-bottom:1px dotted;
				color:#AE4F0C;
				font-weight:bold;
				text-decoration:none;
			}
			a:focus,
			a:hover {
				border-bottom-style:solid;
				color:#D03900;
			}
			#header,
			#footer {
				color:#FFffff; /*couleur du text des titres*/
				background:#ffc000; /*couleur de fond des cadre*/
				text-align:center;
			}
			#content-wrap,
			#footer a {color:black;} /*couleur du text*/
			.alinea {
				text-indent : 20px; 
				text-align : left;
			}
			.justifie { 
				text-align : justify; 
			}
			ol.niveau1 {
			  	list-style-type:square;
				font-size: 16px
			}
			ol.niveau1 li:before {
				list-style-type:none;
			}
			ol.niveau2 {
				list-style-type:disc ;
				ont-size: 13px
			}
			ol.niveau2 li:before {
				list-style-type:none;
			}
			.bg {
				background:#00ff90;
			}
 
		</style>
	</head>
 
	<body> 
		<div id="wrap"> 
			<div id="header"> 
				<h1>SOLCZYNSKI</h1> 
				<h2>---web site---</h2> 
			</div>
			<div class="navigation">
				<a href="http://www.developpez.com">Articles</a>
				<a href="http://xhtml.developpez.com/">Home</a>
			</div>
			<div id="content-wrap"> 
				<div id="content"> 
					<p class="info">
						Présentation</p>
					<div class="underline">
 					<p>But du site
					</div>
						<div class="alinea justifie">
							Ce site à été mis en place dans le but d'informer le commun des mortel
							des différentes innovations du monde informaticien. En effet les informaticiens
							utilisent tous un jargon peut compréhensible, nous allons tenter ici de vous proposer des
							articles simples, qui vous permettrons d'en apprendre un peut plus sur ce monde apart.
							<br>
						</div>
					</p>
					<div class="underline">
					<p>Participation
					</div>
						<div class="alinea justifie">
							Comme vous le savez, un site web demande beacoup d'entretien et son
							enrichissement est long. C'est pourquoi je vous invite tous à me proposer vos articles,
							à poser vos question, où à proposer des idée d'articles que vous aimeriez que l'on traite. 
							<br>
						</div>
					</p>
					<div class="underline">
					<p>Les nouveautés
					</div>
						<div class="alinea justifie">
							Ce site viens tout juste d'être mis en place, il est donc pour le moment assez pauvre.
							<br>
							Les prochains chantiers:
							<ol class="niveau1">
								<li>La mise en place de premiers articles.
									<ol class="niveau2">
									   <li>Section <strong>"Tutoriels"</strong></li>
									   <li>Section <strong>"Revues de presse"</strong></li>
									</ol>
								 </li>
								<li>La création d'un forum</li>
							</ol>
						</div>
					</p>
				</div> 
			</div> 
			<div id="footer"> 
				<div id="labfooter">
					<p>
					<a href="http://l.solczynski.free.fr/">Articles</a> | 
					<a href="http://l.solczynski.free.fr/">Home</a> | 
					Copyright © 2009 Ludovic Solczynski</p>
				</div>
			</div> 
		</div> 
	</body>
</html>

c'est la partie ".navigation" que je pensait être capable de faire ce que je voulais.

Merci par avance pour votre aide

**ludojojo** · 09/09/2009, 15h16

Juste une petite info complémantaire, pour faire un menu de ce style, il faut utiliser quel langage?

**ludojojo** · 09/09/2009, 16h15

Finalement, j'ai récupéré un des menu disponible sur le site.

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
#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 .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: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: #cccccc;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}

Je souhaiterais juste savoir si on peut centrer ce menu et si oui comment?
Merci par avance

**ludojojo** · 09/09/2009, 16h40

J'ai enfin trouvé la solution.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 padding-left: 320px;

Est il possible de le centrer plutôt que de le décaler d'un coté ou de l'autre?

**Macmillenium** · 09/09/2009, 17h01

Bonjour,

Pour centrer horizontalement un élément en absolue, il faut :

Renseigner le width (déjà fait) ;
Attribuer un margin-left = - (width/2) ;
Attribuer un left:50%

Ce qui donne :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#menuDeroulant
{
 width: 644px;
 top: 0;
 left: 50%;
 margin:0 0 0 -322px;
 list-style-type: none;
 padding: 0;
 border: 0;
 position: absolute;
}

**ludojojo** · 09/09/2009, 17h36

Merci beaucoup !

Centrer un menu dynamique

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager