Mise en page

**tinoudu01** · 06/09/2009, 15h31

Bonjour,
Je cherche à centrer mon menu dans ma page (voir image) et pas moyen, j'ai essayé différentes méthodes mais sans succès...
Je fais donc appel à votre aide !

Vous trouverez le code html et le css ci-dessous :

Code 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
 
<body>
<div id="conteneur">
    <div class="container">
		<div id="text" align="right">
			<i>English version</i> <a href="#"><img src="flag-english.png" width="23px" height="15px" border="0px"></a>
		</div>
		<div align="center">
			<img src="palmier.jpg" width="780px" height="100px">
		</div>
		<br/>
        <ul id="navPyra">
			<li><a class="active" href="#">Accueil</a></li>
			<li><a href="chambres_busua.html">Chambres / Tarifs</a></li>
			<li><a href="resto.html">Bar / Restaurant</a></li>
			<li><a href="contact.html">Contact / Résèrvation</a></li>
			<li><a href="acces.html">Accès</a></li>
			<li><a href="galerie.html">Galerie photos</a></li>
			<li><a href="#">Brochure</a></li>
        </ul>
		<ul id="navPyra2">
			<li><a href="#">Surf</a></li>
			<li><a href="ghana.html">Le Ghana</a></li>
			<li><a href="#">Région de l'ouest</a></li>
			<li><a href="liens.html">Liens</a></li>
        </ul>
		<br/>
	</div>
</div>
</body>
 
</html>

Code 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
.container {
        width: 780px;
        padding: 15px;
        margin: 3px 0 10px 0;
        border: 1px solid #ccc;
        background: #fff;
}
 
/* pyramid */
 
#navPyra {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #9FB1BC;
}
 
#navPyra li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
}
 
#navPyra a:link, #navPyra a:visited {
        float: left;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #708491;
}
 
#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {
        color: #000;
        background: url(pyramid.gif) no-repeat bottom center;
}
 
/* pyramid 2 */
 
#navPyra2 {
        margin: 0;
        padding: 0 0 20px 10px;
}
 
#navPyra2 li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
}
 
#navPyra2 a:link, #navPyra2 a:visited {
        float: left;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 4px 12px 6px 12px;
        text-decoration: none;
        color: #708491;
}
 
#navPyra2 a:link.active, #navPyra2 a:visited.active, #navPyra2 a:hover {
        color: #000;
        background: url(pyramid2.gif) no-repeat top center;
}
 
/* code for presentation purpose (CSS preview) */
body {
        font-family: verdana, sans-serif;
        font-size: 11px;
        background: #EEE8AA;
}
 
#conteneur {
	margin: 20px auto;
	width: 780px;
}