28172 sujets

CSS et mise en forme, CSS3

[Résolu] Espace blanc en bas de page

Pages :
Salut !

Je reviens vers vous pour un nouveau problème.

J'ai un espace blanc en bas de page de mon site après le pied de page et du coup ça provoque l'apparition de la barre de défilement ...

Savez-vous d'où cela peut venir ?

Je colle ici le code CSS et le code html d'une des pages où le problème se pose.

Et un lien vers le résultat Dabblet pour voir le problème : Résultat sur Dabblet


html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    margin: auto;
    padding: 0;
    height: 100%;
}

section {
	margin:0;
	padding:0;
}

a img { 
	border: none; 
} 
	
#main {
	margin:auto;
	padding:0;
	width:980px;
}

#galerie {
	display:block;
	margin:0;
	width:980px;
	height:520px;
}

#galerie ul {
	margin-left:200px;
}

#galerie ul li{
	width:150px;
	height:150px;
	list-style:none;
	float:left;
	padding:10px;
}

#galerie ul li:nth-child(3n+1){
	clear:left;
}

#galerie ul li a{
	display:block;
	width:150px;
	height:150px;
	text-decoration:none;
	color:white;
}

#galerie ul li a img.bgimg{
	opacity:1;
	position:absolute;
	width:150px !important;
	height:150px !important;
	z-index:3;
}

nav {
	margin-left:50px;
    position: absolute;
    top: 260px;
	z-index:4;
}

nav ul.cat {
    list-style: none;
    display: block;
    position: relative;
}

nav ul.cat li a {
    padding: 7px 0 7px 0;
    width: 200px;
    display: block;
    text-decoration: none;
    margin: 20px 0 0 0;
    z-index: 2;
}

nav ul img {
    float: right
}

footer {
    text-align: center;
	position:absolute;
	bottom:0;
    margin: 0;
	padding:0;
	height:100px;
    max-width: 980px;
	z-index:9;
}

footer img {
    width: auto;
	border:0;
}

footer a {
	text-decoration: none;
}




<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>TITRE</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<nav>
<ul class="cat">
<li><a href="1.html">Azrouhzrgoubhzerg</a></li>
<li><a href="2.html">Bzrouhzrgoubhzerg</a></li>
<li><a href="3.html">Czrouhzrgoubhzerg</a></li>
<li><a href="4.html">Dzrouhzrgoubhzerg</a></li>
<li><a href="5.html">Ezrouhzrgoubhzerg</a></li>
</ul>
</nav>
<div id="main">
<section id="galerie">
<ul>
<li><a href="me1.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me2.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me3.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me4.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me5.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me6.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me7.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me8.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
<li><a href="me9.html"><img class='bgimg' src="img/.jpg" alt="" /></a></li>
</ul>
</section>
<footer><img id="footer" src="img/footer.png" alt="" /></footer>
</div>
</body>
</html>


Merci pour votre aide !
Modifié par timtim (05 Apr 2012 - 14:22)
Modérateur
94bri37 a écrit :
Il faut enlever le height: 100%;
de body et html !
ils servent à rien


Ça sert a avoir une page à 100% de la hauteur en minimum.
Modérateur
Ce sont des marges par défaut, de base.
ici c'est ul qui fait tout péter :

ul{
margin:0;
padding:0;
}


Plutôt que de sortir un par un ces blocages (qui entrainent un fort coup de débogage a chaque fois), je te conseille de nettoyer ton css. Une ligne css "reset" ou toutes les balise se mettent a 0.
Modérateur
Et je te conseille aussi vraiment un outil de débug (j'utilise Firebug sous FF), il met en évidence les eventuel padding et margin quand tu survol une balise (entre autres).
Merci Laurent, mais je ne suis pas sûr d'avoir bien compris.

J'ai essayé d'ajouter le code que tu m'as donné pour "ul" et ça n'a pas marché.
J'ai essayé d'ajouter un css reset comme tu me l'as conseillé, mais ça n'a pas marché non plus.

J'ai toujours ce scroll qui s'incruste Smiley ohwell

J'ai cherché avec firebug et même l'outile de développement d'IE, mais je n'ai pas réussi à identifier ce qui faisait cet espace blanc en bas de page.

Est-ce que j'ai mal fait quelque chose ?
Peut-être une autre idée ?


Merci en tout cas
_laurent a écrit :


Ça sert a avoir une page à 100% de la hauteur en minimum.


Regardes sur ton firebug ,enlèves le height:100% sur la balise body et la balise html et tu verras par toi même qu'ils ne servent strictement à rien du tout.
Modérateur
Étrange.

Avec le code que tu as donné j'ai juste a rajouter :

ul{
margin:0;
padding:0;
}


dans le css...

Du coup je suis plus très qur d'avoir répondu au bon problème...
Tu n'as pas un exemple en ligne ? (le lien que tu as donné est tout blanc avec un liste a gauche)


EDIT : je parle bien du <ul> en général, c'est celui du milieu qui bloque attention a ne pas appliquer la remise a zéro qu'au menu.
Modifié par _laurent (05 Apr 2012 - 16:10)
_laurent a écrit :
Ce sont des marges par défaut, de base.
ici c'est ul qui fait tout péter :

ul{
margin:0;
padding:0;
}


Plutôt que de sortir un par un ces blocages (qui entrainent un fort coup de débogage a chaque fois), je te conseille de nettoyer ton css. Une ligne css &quot;reset&quot; ou toutes les balise se mettent a 0.


si tu mets le margin à 0, tu remontes le ul ce qui n'est pas le but rechercher.
Pour corriger le problême proprement il suffit d'enlever le height: 100% , sur la balise body et la balise html.
timtim a écrit :
Merci Laurent, mais je ne suis pas sûr d'avoir bien compris.

J'ai essayé d'ajouter le code que tu m'as donné pour &quot;ul&quot; et ça n'a pas marché.
J'ai essayé d'ajouter un css reset comme tu me l'as conseillé, mais ça n'a pas marché non plus.

J'ai toujours ce scroll qui s'incruste Smiley ohwell

J'ai cherché avec firebug et même l'outile de développement d'IE, mais je n'ai pas réussi à identifier ce qui faisait cet espace blanc en bas de page.

Est-ce que j'ai mal fait quelque chose ?
Peut-être une autre idée ?



Merci en tout cas

Enlèves le height:100% sur la balise Body et HTML , cela résoudra ton problème. C'est la façon la plus simple et la plus propre.
Modifié par 94bri37 (05 Apr 2012 - 16:13)
@94bri37 : excuse-moi, je n'avais pas vu ton premier message.
Je viens d'essayer et le problème reste le même.

@Laurent : J'avais donc bien effectué ce que tu m'as conseillé et ça n'a pas marché. J'ai même essayer un mélange de vos 2 solutions (on sait jamais hein ? ^^) et ça n'a pas marché non plus.


Désolé, je n'ai rien de mieux. Le résultat final devrait ressembler à ça, avec plus de couleur et plus d'images. La structure sera exactement la même, mais sans l'espace blanc en bas de page j'espère ^^

Merci pour l'intérêt que vous portez à mon problème en tout cas !
Modérateur
94bri37 a écrit :
si tu mets le margin à 0, tu remontes le ul ce qui n'est pas le but rechercher.

C'est une marge par défaut, elle est donc descendu sans que ce soit voulu et fait foirer la mise en page. C'est cette marge qui n'est pas recherchée a mon sens.

94bri37 a écrit :
Pour corriger le problême proprement il suffit d'enlever le height: 100% , sur la balise body et la balise html.

Cela permet de placer le footer en bas d'une page qui dépasse la taille de l'écran. Si il retire cette propriété et que la page s'affiche sur plus de 100% de la hauteur de l'écran, le footer restera en plein milieu, et je ne pense pas que ce soit un effet désirable ca non plus. Smiley murf
J'ai essayé de simplifier davantage le CSS, et le problème persiste Smiley ohwell
J'ai réessayé ce code simplifié avec le padding et margin 0 pour "ul", j'ai réessayé en enlevant les height:100%, j'ai réessayé de combiner les deux, et le problème est toujours là ...

Smiley decu

Voilà le nouveau code CSS simplifié


html {
    margin: 0;
    padding: 0;
	height:100%;
}

body {
    margin: auto;
    padding: 0;
	height:100%;
}

#main {
	margin:auto;
	padding:0;
	width:980px;
}

#galerie {
	display:block;
	margin:0;
	width:650px;
	height:520px;
	margin-left:200px;
}

#galerie ul li{
	width:150px;
	height:150px;
	list-style:none;
	float:left;
	padding:10px;
}

#galerie ul li a img.bgimg{
	position:absolute;
	width:150px !important;
	height:150px !important;
}

nav {
	margin-left:50px;
    position: absolute;
    top: 260px;
}

footer {
    text-align: center;
	position:absolute;
	bottom:0;
    margin: 0;
	padding:0;
	height:100px;
    width: 980px;
}
_laurent a écrit :

C'est une marge par défaut, elle est donc descendu sans que ce soit voulu et fait foirer la mise en page. C'est cette marge qui n'est pas recherchée a mon sens.


Cela permet de placer le footer en bas d'une page qui dépasse la taille de l'écran. Si il retire cette propriété et que la page s'affiche sur plus de 100% de la hauteur de l'écran, le footer restera en plein milieu, et je ne pense pas que ce soit un effet désirable ca non plus. Smiley murf



Heuu... Ne le prends pas mal mais ce que tu dis est incorrect...
As tu tester mes suggestions?
PS.: une
_laurent a écrit :
page s'affiche sur plus de 100% de la hauteur de l'écran
, c'est pas possible!
Une page s'affiche toujours sur 100% du navigateur, c'est la taille du contenu qui peut ou non dépasser la taille d'affichage.
bonjour,

c'est un souci de fusion de marge qui aurait pu apparaitre avec des <hx> ou des <p> , height n'y est pour rien Smiley smile .

Pour contenir ces marges, un petit test permettra de voir que height n'y est pour rien et qu'il suffit de contenir ces marges et de ne pas les laisser se répercuter a l’extérieur des parents.


/* TEST -pour contenir les marges externes */
nav, #main {padding:1px;/* une méthode parmi d'autres, comme border */}


Cordialement,
GC
timtim a écrit :
J'ai essayé de simplifier davantage le CSS, et le problème persiste Smiley ohwell
J'ai réessayé ce code simplifié avec le padding et margin 0 pour &quot;ul&quot;, j'ai réessayé en enlevant les height:100%, j'ai réessayé de combiner les deux, et le problème est toujours là ...

Smiley decu

Voilà le nouveau code CSS simplifié


html {
    margin: 0;
    padding: 0;
	height:100%;
}

body {
    margin: auto;
    padding: 0;
	height:100%;
}

#main {
	margin:auto;
	padding:0;
	width:980px;
}

#galerie {
	display:block;
	margin:0;
	width:650px;
	height:520px;
	margin-left:200px;
}

#galerie ul li{
	width:150px;
	height:150px;
	list-style:none;
	float:left;
	padding:10px;
}

#galerie ul li a img.bgimg{
	position:absolute;
	width:150px !important;
	height:150px !important;
}

nav {
	margin-left:50px;
    position: absolute;
    top: 260px;
}

footer {
    text-align: center;
	position:absolute;
	bottom:0;
    margin: 0;
	padding:0;
	height:100px;
    width: 980px;
}

Je te suggère de supprimer la position absolute sur ton footer . Vouloir absolument afficher un footer en bas de page est (à mon sens ...) une mauvaise idée. Il vaut mieux conserver le flux naturel du contenu(Les éléments s'affichant les uns après les autres...)
PS.:Si tu veux absolument, caller ton footer en bas de page, il me semble qu'il faut s'orienter sur du javascript (mais là je pourrais pas t'aider)
Bon alors j'ai continué mes tests, et il semblerait qu'en enlevant les height:100% de body seulement et le bottom:0 du footer, cet espace blanc disparaisse.

Par contre, mon pied de page remonte et n'est plus en bas de l'écran comme je le souhaite.

Une idée ?

Merci merci !
gc-nomade a écrit :
bonjour,

c'est un souci de fusion de marge qui aurait pu apparaitre avec des &lt;hx&gt; ou des &lt;p&gt; , height n'y est pour rien Smiley smile .

Pour contenir ces marges, un petit test permettra de voir que height n'y est pour rien et qu'il suffit de contenir ces marges et de ne pas les laisser se répercuter a l’extérieur des parents.


/* TEST -pour contenir les marges externes */
nav, #main {padding:1px;/* une méthode parmi d'autres, comme border */}


Cordialement,
GC
@gc-nomade : Merci de ton aide. Cependant, je viens d'essayer, et ça n'a rien changé Smiley ohwell

Ça semble bien compliqué Smiley decu
Le test que je te propose se base sur le code html et css de ton premier post Smiley smile .

En effet, pas toujours evident de bien voir ou comprendre ce qu'il se passe.

Je te propose (avec ton html ci-dessus) de tester cette feuille CSS (en partie la tienne avec quelques ajouts et modifications.
(fond de couleurs pour visualiser les éléments, un min-height sur body au lieu de height, un padding sur la galerie pour degager le pied , la gallerie flottante, etc ... et le nav,#main {padding:1px;} pour ton soucis initial:


html {
background:black;/* ex pour trancher avec body;*/
    margin: 0;

    padding: 0;

    height: 100%;

}



body {

    margin: auto;

    padding: 0;

    min-height: 100%;
position:relative;
background:#555;

}



section {

	margin:0;

	padding:0;

}



a img { 

	border: none; 

} 

	

#main, body  {

	margin:auto;

	padding:0;

	width:980px;

}



#galerie {

	display:block;

	margin:0;

	width:980px;

padding-bottom:105px;/* degage l'espace pour le pied */

}



#galerie ul {

	margin-left:200px;

background:green;overflow:hidden

}



#galerie ul li{

	width:150px;

	height:150px;

	list-style:none;

	float:left;

	padding:10px;

}



#galerie ul li:nth-child(3n+1){

	clear:left;

}



#galerie ul li a{

	display:block;

	width:150px;

	height:150px;

	text-decoration:none;

	color:white;


}



#galerie ul li a img.bgimg{

	opacity:1;

	position:absolute;

	width:150px !important;

	height:150px !important;

	z-index:3;background:red;

}



nav {

	margin-left:50px;

    position: absolute;

    top: 260px;

	z-index:4;background:yellow;

}



nav ul.cat {

    list-style: none;

    display: block;

    position: relative;

}



nav ul.cat li a {

    padding: 7px 0 7px 0;

    width: 200px;

    display: block;

    text-decoration: none;

    margin: 20px 0 0 0;

    z-index: 2;

}



nav ul img {

    float: right

}



footer {

    text-align: center;

	position:absolute;

	bottom:0;

    margin: 0;

	padding:0;

	height:100px;

    max-width: 980px;

	z-index:9;
background:gray;width:100%;

}



footer img {

    width: auto;

	border:0;

}



footer a {

	text-decoration: none;

}
nav, #main {padding:1px;}


Bonne continuation,
GC
Modifié par gc-nomade (05 Apr 2012 - 17:16)
Pages :
Sujet clos
Aller à