Probleme de fond sur design fixe centré

Bonjour a tous !

j'ai un petit probleme :

je refait le design de mon site : jai donc : une grande image de fond avec le contenu callé au bon endroit. Le probleme : c'est que je veux le centrer, et pour ne pas laisser de blan horrible, je veux combler le blanc par la couleure #333333.

Avant, le body contenait l'image de fond, donc jai ajouté un div " site " centré avec le fond, et comme fond du body la couleure #333333.

mais voila ce que donne la page ! http://www.dsvids.com/NGCvids/ngcvids.php

stupeur ! tout les divs sont bien placé, sauf le fond qui est comme décalé de 6cm vers le bas...

voila le code ( simplifié ) de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>NGCvids</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="gamecube" href="design-gamecube.css"/>
</head>
<body>

<div id="site">

<div id="header1">
<a href="">Nintendovids </a>
<a href="www.dsvids.com">DSvids</a>
<a href="">NGCvids</a>
<a href="">Wiivids</a>
<a href="">GBvids</a>
<a href="">SNESvids</a>
</div>

<div id="header2">
<p> ici une pub</p>

</div>

<div id="menu">
<h3>Menu</h3>
<ul class="liste">
<li><a href="index.php">Acceuil</a></li>
<li><a href="tests.php">Tests</a></li>
<li><a href="previews.php">Previews</a></li>
<li><a href="demos.php">Démos</a></li>
<li><a href="astuces.php">Astuces</a></li>
<li><a href="speciales.php">Spéciales</a></li>
<li><a href="tads.php">Ta DS</a></li>
<li><a href="pictoanim.php">Picto' Anim</a></li>
<li><a href="homebrews.php">Homebrews</a></li>
</ul>

<h3>Intéractif</h3>
<ul class="liste">
<li><a href="propose.php">Propose ta video</a></li>
<li><a href="javascript:comms(10000)">Livre d'or</a></li>
<li><a href="newsletter.php">Newsletter</a></li>
<li><a href="http://dsvids.free.fr/forum/index.php">Forum</a></li>
<li><a href="partenaire.php">Partenaires</a></li>
<li><a href="contacts.php">Contacts</a></li>
<script language="javascript"></script>

</ul>

</div>

<div id="pub">

</div>

<div id="centre">
<h2>Test de ce super Design NGCvids par Mubb</h2>
<h5> Mubb nous code ce fabuleux Design gamecube qui je l'espere marchera bien pour le lancement de tout ces sites le 1er octobre 2006 !</h5>

<p> Pour voir le design directement ouvrez les yeux </p>
<p> Pour le voir plus tard mettez <a href="http://www.dsvids.com/NGCvids/dsvids3.lol">CE LIEN</a> en favoris ! <br/><br/><img src="http://home.btconnect.com/hgi/nintendo-ds/gamecube-p2.jpg" alt="GC" /></p>
</div>

<div id="pied">
<p> Copyright DSvids.com reproduction interdite sans autorisation. <br/>
Webmasters Niko & Mubb, Design by Sheepdesign & Mubb special thanks to SnowZak for arrangemments ^^, PHP by TskD </p>
</div>
</div>
</body>
</html>

voila pour le HTML passons au CSS ( je suspecte ce css detre la source du probleme..

body
{
width: 100%;
height: 1500px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-bottom: 0px;
background-color: #333333;
}

#site
{
width: 1024px;
height: 1500px;
magin: auto;
background-image: url("Gamecube.jpg");
background-repeat: no-repeat;
}

#header1
{
float: left;
position: absolute;
width: 700px;
height: 30px;
left: 30px;
top: 130px;
}
#header1 a
{
font-size: 1.2em;
color: purple;
text-decoration: none;
font-weight: bold;
margin-left: 20px;
}
#header1 a:hover
{
font-size: 1.2em;
color: red;
text-decoration: underline;
font-weight: bold;
margin-left: 20px;
}
#header2
{
float: right;
position: absolute;
width: 500px;
height: 200px;
top: 10px;
left: 650px;
padding: 10px;
}

#header2 p
{
margin-left: 100px;
}
#menu
{
float: left;
position: absolute;
width: 100px;
top: 200px;
left: 5px;
padding: 0px;
margin-top: 30px
}
.liste
{
list-style-type: none;
list-style-position: outside;
}
.liste a
{
font-family: Onix;
font-size: 0.8em;
color: purple;
font-weight: bold;

}
h3
{
font-family: "Comic sans MS";
font-size: 1em;
color: black;
margin-left: 30px;
font-weight: bold;
}
#pub
{
float: right;
top: 180px;
width: 150px;
}
#centre
{
margin-top: 200px;
margin-left: 150px;
margin-bottom: 20px;
padding: 20px;
text-align: left;
}
#centre a
{
color: purple;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
}

#centre a:hover
{
color: purple;
text-decoration: underline;
background-color: gray;
}
#centre h5
{
font-size: 0.8em;
margin-left: 70px;
margin-right: 100px
text-align: left;
font-family: Verdana;
}
#centre img
{
margin-left: 100px;
}
#pied
{
margin-left: 100px;
margin-top: 500px;
background-color: purple;
border-left: 30px outset black;
border-right: 30px outset black;
border-bottom: 30px outset black;
border-top: 30px outset black;
}
#pied p
{
text-align: center;
font-family: "Comic sans MS";
text-size: 0.8em;
font-weight: bold;
}
#centre p
{
margin-left: 10px;
font-family: Verdana;
}
p
{
margin-left: 10px;
font-family: Verdana;
}

le fond est comme décalé vers le bas..!!

Probleme de fond sur design fixe centré

Supprimer

Modérer

Signaler le message aux modérateurs