Impossible de se débarrasser de l'espace au bas de la page HTML avec style CSS

Question

J'ai récemment posté une question sur le centrage d'une page avec CSS. J'ai compris comment faire et ça a l'air génial, mais maintenant, il y a un tas d'espace inutile au bas de ma page. Je ne peux pas comprendre comment m'en débarrasser.

Je l'ai téléchargé sur un hébergeur gratuit pour que vous puissiez y jeter un coup d'œil. Voilà ce que je suis en train de travailler avec: http://eric.200u.com/index.html

Ceci est mon CSS en ce qui concerne le centrage de la page:

html, body 
{ 
    padding: 0; 
    margin: 0; 
} 

#container 
{ 
    width: 700px; 
    margin: 0 auto; 
    text-align: left; 
} 

Answer 1

C'est parce que vous utilisez le positionnement par rapport à placer des éléments sur le dessus de l'autre . Lorsque vous faites cela, les éléments sont affichés ailleurs que dans leur position d'origine, mais ils prennent toujours de la place dans le flux de documents où ils auraient été.

Utilisez le positionnement absolu à la place afin de retirer les éléments du flux de documents.

Answer 2

Le problème est dû à l'arrière-plan div

<div id="bg"></div> 

parce que le sommet est réglé sur -190px, un espace de taille 190 est faite au fond. Pour le réparer, définissez margin-bottom: -190px pour ce div.

Answer 3

Une solution plus simple est de style les éléments les plus externes comme suit

body 
{ 
    padding: 0; 
    margin: 0 auto; 
    width: 700px; /* px is bad here, but I'm keeping things simple for now */ 
} 

#container 
{ 
    position: absolute; 
    background: url(images/pixel_down.jpg); 
    height: 100%; 
} 

et de supprimer le positionnement CSS de tous les autres éléments. Et pourquoi avez-vous tellement alambiqué le code barre de nav que le rendre inaccessible au lieu d'utiliser une simple rangée d'images?

Vous pouvez également essayer de trouver un hébergeur gratuit dont la publicité ne gâche pas la mise en page. Je crois que http://www.webs.com/ est un tel, mais je ne suis pas sûr si cela a changé depuis la dernière fois que j'ai regardé.