Modification site web: Centrage du site =>

Bonjour,

Voici ma question (courte je fait surtout du copié collé de code ^^) !

J'ai un site qui n'est pas centré. Ce site fait 700px de large et est collé sur la gauche de l'écran. Je veux le centrer. C'est un changement mineur dans la feuille css, nous sommes d'accord...mais j'ai un problème majeur ^^!

En fait, a droite du corps (body) du site qui fait donc 700px de largeur (je me répète) j'ai une image de 300px de largeur, qui est censé changer à chaque changement de page lorsque l'utilisateur navigue sur le site.
Sauf que quand je modifie le margin de mon body qui est à 0 à l'origine et que je met en auto pour qu'il ce centre, l'image de 300px à droite n'est pas prise en compte.

A LA BASE j'ai ce code dans ma feuille css (ça vous aidera à comprendre pourquoi):

html {
background: white url("../images/fond1.gif") no-repeat scroll 700px 0;
font: 80% Georgia, serif;
color: #333;
}

body {
max-width: 1000px;
margin: 0;
padding: 0;
background: transparent url('../images/bande.png') repeat-y scroll 150px 0; /*En dessous de la div texte, se répète en fonction de la taille en hauteur*/
}

L'image est inséré avec background dans html{ } et sa pose problème...elle est visiblement indépendante du body (c'est logique après tout) et quand le site se centre, elle, elle reste à 700px à droite par rapport à la bordure gauche de l'écran...en gros elle passe sous le site et on ne la voit plus.

J'ai donc pris une grande décision, créer une div! Lol.

Voici donc le code dans ma feuille css (modifié):

html {
font: 80% Georgia, serif;
color: #333;
}

body {
max-width: 1000px;
margin: auto;
padding: 0;
background: transparent url('../images/bande.png') repeat-y scroll 150px 0;
}

div<id="essai">{
width: auto;
height: auto;
background: white url("../images/fond1.gif") no-repeat scroll 700px 0;
}

Et dans ma page header.php (qui est le header du site que j'implante avec un include sur chaque page php de navigation) avant j'avais ça:

html {
background-image: url("images/'. $imgs[0] .'")
}

je l'ai supprimé pour mettre ceci:

div<id="essai"> {
background-image: url("images/'. $imgs[0] .'")
}

Mais ça ne marche pas, les différentes images n'apparaissent pas celons les différentes page.

J'ai testé plein de truc, même de mettre le background dans le body, mais l'image reste derrière le site.
A ma façon avec la div, l'image n'apparait même pas j'ai juste un gros cadre marron gris qui apparait derrière le site (de largeur de moitié du site a peu près) et continue jusqu'en bas de l'écran.

Par contre si je met juste

div {
background-image: url("images/'. $imgs[0] .'")
}

dans mon header, et ça dans ma feuille css:

div {
width: auto;
height: auto;
background: white url("../images/fond1.gif") no-repeat scroll 700px 0;
}

La ça marche sa m'affiche bien les différentes photos juste à droite du corps du site...mais...sa m'en affiche aussi de partout dans les zones de texte, et dans plein d'endroit incompréhensible...sa me modifie des polices de caractère, enfin bref autan dire, la merde quoi (si vous me permettez l'expression).

Je ne sais plus trop quoi faire, sa a l'aire de provenir du moment ou je donne un nom à ma div pour la reconnaitre je ne sais pas...ai-je oublié une étape celons vous? Quelque chose d'impératif à modifier?

Merci d'avance pour vos réponses et votre aide.

Cordialement,
VieTgOOx.