Espace blanc dans le footer

Bonjour à tous,

J'ai un petit soucis que je n'arrive pas à résoudre.
En effet, j'ai un espace blanc en bas de page et je ne comprends pas pourquoi.
Si vous trouvez la solution ce serait top !
Bonne journée,

Voici le code CSS du footer :

footer {
	background-color: #f8f8f8;
	padding: 0 0;
	margin-bottom: -20px;
}

p.copyright {
	margin: 0 0 0;

Voici le code CSS de l'image en fond d'écran :

body, html {
	height: 100%;
	width: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
}

.lead {
	font-size: 18px;
	font-weight: 400;
}

.intro-header {
	padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
	padding-bottom: 50px;
	color: #f8f8f8;
	background: url(../img/intro-bg.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
}

Bonjour,

peux-tu nous envoyer une url que nous puissions consulter ? C'est beaucoup plus simple pour tout le monde de pouvoir voir en "live" comment ta CSS se comporte.

Perso, j'essaierais d'éviter qutant que faire se peut les marges négatives, comme tu l'as fait pour "footer"

Voici le site : viktorius.fr

En effet, j'aimerais bien aussi enlever la marge négative.
J'ai remarqué que l'espace blanc ne s'affichait pas sur Mozilla mais que sur Chrome.

Ok, cet "espace blanc" s'affiche sur Mozilla aussi chez moi.

Pour moi, le fond du problème est que ton image de fond pour .intro-header a une taille fixe. Du coup, dès que la fenêtre de l'utilisateur aura une hauteur supérieure à celle de ton image, un espace vide va se créer en bas de page.

Ce que tu peux faire, c'est donner à "body" une couleur ou une image-motif de fond, afin que cela moins moche qu'un fond blanc.

Il y a aussi manière de rendre l'image de fond extensible, mais perso je n'ai jamais essayé : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Bonjour,

Il faudrait déjà corriger toutes les erreurs HTML (</div> en trop juste après </nav>, balise <form> sans >, balise <form> imbriquée dans un div, balise <span> sans >, </span> en trop, pas de </body>, pas de </html>, ...)

Amicalement,
Modifié par parsimonhi (15 Jun 2014 - 17:06)

Merci PrOtOzOaire !

J'ai trouvé la solution :

.intro-header {
	padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
	padding-bottom: 50px;
	color: #fffc79;
	background: url(../img/intro-bg.jpg) no-repeat center center ;
	top:0;
	left:0;
	background-size: cover;
	text-align: center;
	min-height: 100%;
position: fixed;
width: 100%;
z-index: -999;
}

J'ai par la même enlevé le px négatif dans le footer.

En effet parsimonhi, le code n'est pas très propre, je vais faire du ménage ! Merci pour ta remarque.

Bonjour,

Est-ce que tu as pensé à supprimer les marges par défaut de body ? (pour info, body a un mrgin: 8px par défaut)