Centrage d'une page html

**gege87270** · 13/05/2009, 16h08

Bonjour à tous,

J'ai un petit soucis avec le centrage de mes éléments sur une page web au format html. J'avoue que j'ai essayé pas de chose et je ne sais plus quoi changer. Il y a surement un truc qui m'échappe, mais je ne vois pas où. Je joint mon code, si quelqu'un avait une solution pour moi.

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
<html>
<!-- Date de cr?ation: 11/03/2009 -->
<head>
 
<!-- Script js pour permettre les effets rollover -->
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id)
{
var d = document.getElementById(id);
for(var i =1; i<=10; i++)
{
if(document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if(d)
{
d.style.display='block';
}
}
//-->
</script>
 
 
<!-- Script de la CSS pour la mise en forme -->
<style type="text/css" media="screen">
<!--
body {
margin: 2;
padding: 2;
background: white;
text-align: center; 
color : #4B4B4D; 
display: blockcenter;
}
dl,dt,dd,ul,li {
margin: 0;
padding: 0;
list-style-type: none; 
text-align: center;
}
#menu {
position: absolute; /* placement du menu, ? modifier selon vos besoins */
top: 0;
left:1;
z-index:1;
width: 100%; /* correction pour Opera */
}
#menudl {
float: left;
width: 12em; 
display: blockcenter;
}
#menudt {
cursor: pointer;
text-align: center;
font-weight: auto;
background: white;
border: 1px solid white;
margin: 1px;
display : blockcenter;
}
#menudd {
color: #4B4B4D;
border: 1px solid white; 
display : blockcenter;
}
#menuli {
text-align: center; 
color: #4B4B4D;
background: #fff; 
display : blockcenter;
}
#menulia,#menudta {
color: #4B4B4D;
text-decoration: none;
display: block;
height: 100%;
border: 0 none; 
display : blockcenter;
 
}
#menulia:hover,#menulia:focus,#menudta:hover,#menudta:focus {
background: white;
display : blockcenter;
 
}
#site {
position: absolute;
z-index: 3;
top : 70px;
left : 10px;
color: #4B4B4D;
background-color: #ddd;
padding: 5px;
border: 1px solid white; 
display : blockcenter;
 
}
-->
</style>
 
</head> 
 
<body scroll="no" > 
 
 
 
<div id="menu" style="text-align: center; width: 100% ; height: 100%; overflow:no; position: absolute;"> 
 
 
<div style="text-align: center; width: 100% ; height: 20%; overflow:no;">
<table summary="" border="0" width="100%">
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</div> 
<div style="text-align: center; width: 100% ; height: 30%; overflow:no;">
<table>
<tr>
<td valign="middle" nowrap scroll="no"><img src="images/copier.gif" border="0" width="680" height="116" alt=""></td>
</tr>
</table>
 
</div>
 
<div style="text-align: center; width: 100% ; height: 3%; overflow:no;">
<hr size="1" color="#4b4b4d">
</div>
 
 
 
<div style="text-align: center; width: 100% ;">
<dl>
 
<dt align = "center"><a href="FR/indexFR.html" title=""><font size="2" face="Helvetica">FRANCE<br><font size="2">(e-boutique)</font></a></dt>
</dl>
 
<dl> 
<dt><a href="EN/indexUS.html" title="</font></a></dt>
 
</dl>
 
 
<dl> 
<dt onmouseover="javascript:montre('smenu2');"><font size="2" face="Helvetica">OTHER COUNTRIES</font></dt>
 
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<br><li><a href="#" tittle=""><font size="2" face="Helvetica">Fran?ais</font></a></li> <br>
<li><a href="#" tittle=""><font size="2" face="Helvetica">English</font></a></li> <br>
<li><a href="#"><font size="2" face="Helvetica">??????? (Arabik)</font></a></li> <br>
<li><a href="#"><font size="2" face="Helvetica">?? (Chinese)</font></a></li> <br>
</ul>
</dd>
</dl></div>
</div>
</body>
</html>

En fait l'image est bien centrée, mais mes options (menu avec choix du pays) ne se centrent pas.

Merci d'avance

**gege87270** · 14/05/2009, 10h56

J'ai apporté quelques modif à mon code et cela à résolu mon problème.

Code :

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

1
2
3
4
5
6
7
8
9
10
#global {
position:absolute;
left:auto;
right:auto;
width:70%;
margin-top:50px;
margin-left:-330px;
padding:15px; 
 
}

et j'ai rajouté <div id="global">

**12monkeys** · 14/05/2009, 22h59

Bonsoir

Nul besoin d'une position absolute pour ça : http://xhtml.developpez.com/faq/?pag...orizontalement...

De plus la valeur blockcenter n'existe pas pour la propriété display.

Centrage d'une page html

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager