28172 sujets

CSS et mise en forme, CSS3

Espace en trop

Bonjour à tous !! Smiley smile

Alors voilà je suis en plein dans la création d'un site web perso, le hic c'est que j'ai voulu appliquer une méthode pour caler le footer toujours en bas de ma page mais cela fait, un grand espace se créé automatiquement sur certaines pages :

Mon site : http://blackhf.free.fr

Une des pages en question : http://blackhf.free.fr/fr/computerbuild
(C'est l'espace vide sous le bloc en border violet)

Code HTML de base d'une page de mon site :

<html>

  <head></head>
  
<body>

  <header></header>

<div id="container">

  <div id="main"></div>
  
  <div id="footer">
    <div id="links"></div>
    <div id="end"></div>
  </div>
  
</div>

</body>
</html>


Code css qui correspond :

html, body {height: 100%;}
#container {
	position: relative;
	height:auto!important;
	min-height:100%;
	height: 100%;
	height: auto;
	}
html>body #container {height: auto;}
body {
	margin: 0;
	padding: 0;
	}
header {
	display:block;
	position:relative;
	height: 305px;
	padding:5px 10px 15px 10px;
	margin: -10px auto auto auto;
	}
#main{
	border:solid #F6F;
	display:block;
	margin:0px auto auto auto;
	}
#footer {
	position:absolute;
	bottom:0;
	height: 140px;
	width:100%;
	overflow:visible;
	}

J'ai une autre question tant que j'y suis : mon footer ne colle pas complètement en bas, comment le résoudre ?

Merci de votre aide !!!



EDIT !! :

Voilà une page qui résume le problème :

http://blackhf.free.fr/fr/001.html
Modifié par blackhf (05 Sep 2012 - 21:12)
Bonsoir,

comme le footer est dans le container, il se colle en bas du container.
Si tu veux qu'il soit en bas de l'écran, il faut le placer après le container.
Euhmm..

Mon but n'est pas de mettre le footer en bas de l'écran mais plutôt en bas de la page.

J'ai fait ce que tu m'as dis mais ça me met le footer en bas de l'écran quand on charge une page, puis quand on descend dans cette page le footer reste fixé là où il étais..
Ahhhhhhhhhhhhhhhhhhhhhhh !!!!! Smiley biggrin Smiley biggrin Smiley biggrin

Enfin !!! 10H que je bosse dessus Smiley biggol Smiley biggol Smiley biggol


Bon je mets quand même la solution pour pas que des gens se suicident Smiley sweatdrop !

Le code HTML de base pour la page :

<html>
  <head></head>
  
<body>
<div id="container"><!-- Conteneur principal contenant votre header/content/footer -->

  <div id="header"></div>

  <div id="content"></div>

  <div><!-- marge nécessaire pour ne pas que le content enjambe le footer  --></div>
  <div id="footer"></div>

</div>
</body>
</html>


et le code CSS de base pour cette page : (Attention tout est important)

html, body {height: 100%;}
#container {
	position: relative;
	height:auto!important;
	min-height:100%;
	height: 100%;
	height: auto;
	}
html>body #container {height: auto;} /* ----- Code pour IE5 ----- */
body {
	margin: 0;
	padding: 0;
	}
#header {
	display:block;
	}
#content{
	display:block;
	margin:0px auto auto auto;
	padding-bottom: /* TAILLEDUFOOTER */;

	}
#footer {
	position:absolute;
	bottom:0;
	height: /* TAILLEDUFOOTER */;
	width:100%;
	}



Merci à Google et surtout à Alsacréations !!
Sujet clos
Aller à