Bonjour,
Comme le dit mon cher ami brüsellois, tu as mis tous les blocs en position "absolue". Cela veut dire que leur position est figée sur la page (par rapport à l'angle haut et gauche de l'écran).
Sur ton écran de pc, tu as "l'impression" que ton site est bien centré car tu as bidouillé pour lui donner cet aspect.
Mais c'est un leurre. Pour le vérifier, il suffit de diminuer la fenêtre de ton navigateur, et tu vas tout de suite voir que ta mise en page fout le camp!
Sur un site simple, il suffit de mettre les blocs (div, images, etc.) en position
"non defini(e)" et de positionner ces blocs avec des marges "auto".
Pour la balise <body>, un alignement centré du texte permettra de centrer tous les blocs situé dans cette balise body.
Pour le menu, la méthode est mauvaise: il ne fat pas aligner des mots et placer des espaces entre ceux-ci. La meilleure solution consiste à utiliser une liste non ordonnée (listes à puces), à positionner les items en ligne avec une règle de style pour <li>. Dans cette règle de style, tu pourras également demander le non affichage de la puce.
en gros, sans tout reprendre, ça peut donner ça:
Code : Tout sélectionner
<html>
<head>
<title>Bienvenue sur le site de l'EDG</title>
<meta name="Keywords"
content="rugby, cestas, cestadais, bouzet, entente des graves, leognan, la brede, gradignan, teuliere, balandrade, belascains, reichel, -17, U17, -19, U19, -22, U22">
<style type="text/css">
li {
display: inline;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body
style="width: 1036px; margin-right: auto; margin-left: auto; color: silver; background-color: black; text-align: center;"
alink="#ff33cc" link="#ff33cc" vlink="#ff33cc">
<img
style="width: 786px; height: 32px; margin-right: auto; margin-left: auto;"
alt="" src="images/system/cglbl.jpg"> <img
style="width: 1036px; height: 108px; left: 429px; top: 8px;" alt=""
src="images/system/edg.jpg">
<div style="color: rgb(255, 51, 204);">
<ul style="list-style-type: none;">
<li><small> <span style="font-family: Arial;"> <span
style="font-weight: bold; color: silver;"> <span
style="color: rgb(255, 51, 204);">Accueil</span></span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold; color: silver;"><span
style="color: rgb(255, 51, 204);"></span></span><span
style="font-weight: bold;"><span style="color: rgb(255, 51, 204);">U22</span></span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;"><span style="color: rgb(255, 51, 204);"></span></span><span
style="font-weight: bold;">U19</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">U17</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">Calendrier</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">Photos</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">LiensGoodies</span></span> </small>
</li>
</ul>
</div>
<br>
<br>
</body>
</html>
Il serait souhaitable que les règles de style ne soient pas définies en styles internes (définies pour chaque balise à partir d'un clic droit dans la barre de tâches), mais dans une feuille de style soit interne (c'est ce que j'ai fait pour <li>), soit mieux encore, externe ce qui crée un fichier séparé. La feuille de style se crée à l'aide de l'outil "editeur css..." (icone sous forme de palette de peintre).
Un petit tour vers les tutoriels habituels te donnera des pistes
