Problème de footer incompréhensible !

Bonjour,

Tout d'abord, un grand merci pour tout ce beau projet d'Alsacréations !

Je suis actuellement en train de refaire le site d'un petit créateur, et pour l'instant je me débrouille assez bien (en grande partie grâce à vous). Je précise que je suis disons... débutante avertie, et du coup j'apprends toute seule, et parfois, y'a des bugs.

Mon problème est le suivant : j'essaye de faire un footer normal, tout fin, avec juste les mentions légales. Le souci est multiple et je m'arrache les cheveux !!!
- depuis que j'ai commencé à coder le footer, il y a une grande marge blanche sur le côté droit, qui implique un scroll horizontal, et qui n'a rien à faire là !
- cela ne peut pas venir de mes différents backgrounds, qui sont tous faits en gif très larges afin de s'adapter au différentes résolutions, puisqu'ils réagissent bien à l'étirement de ma fenêtre sur Firefox.
- je travaille avec Firefox, qui me fait une vilaine marge blanche en dessous du footer, et qui oh! surprise, n'apparait pas sur Safari.

Je ne sais pas si je suis assez claire ?!

Je vous joins les codes et des captures d'écran. Je voudrais bien vous montrer le site directement, si vous savez où je peux l'héberger sans le mettre en ligne, je suis preneuse.

HTML :

		<footer>		
				<div id="footerContent">
					<div id="credits">
						<h3>ï.de.m tous droits reservés, Copyright © 2010-2013.</h3>
					</div>		
				</div>
		</footer>

CSS :

footer{
	background:url(../images/F-footer.gif);
}

#footerContent{
	width:1200px;
	margin:0 auto;
	text-align:center;
}

/*--Mentions légales----*/

#credits{
	width:300px
	margin:0 auto;
	position:relative;
	padding:5px 0 5px 0;
}

(je peux mettre le code entier si besoin !)

Aperçu sur Firefox


Aperçu sur Safari



Merci d'avance pour vos réponses !

bonjour Citronks!

pour la marge à droite, essaie en remplacant la taille en pixels du width de "#footerContent" par width:100%;

pour la marge en bas, cela doit venir de le height de ta page. quel est-il?

Bonjour,

Je n'ai pas de réponse à ta question mais une remarque : pourquoi un <footer> englobant un <div id="footerContent"> englobant un <div id="credits"> englobant un <h3> ? Si c'est pour y mettre une simple phrase "ï.de.m tous droits reservés, Copyright © 2010-2013" avec un background coloré, un simple <footer> suffirait, il me semble.

Simplifier le code est une des manières d'éviter les problèmes de layout : moins il y a de code, moins il y a d'interactions indésirées.

Deuxièmement, si tes backgrounds sont monochromes (c'est en tout cas le cas de ton footer, pour les autres backgrounds, je ne suis pas sûr, ça ne m'est pas évident sur tes aperçus), pouruqo utilises-tu des images au lieu de définir la couleur en CSS ?

Snoopnshupa : merci, je vais essayer, mais vu que je n'ai mis aucune taille en pourcentage... Je mettrai le code entier dès que je récupère l'ordi.

Thierry : oui je sais j'avais mis plein de div inutiles dans le footer ! mais c'était pour faire des tests et j'ai oublié de les enlever. Pour la couleur du footer, j'avais bien mis le code couleur au tout début, mais comme ça ne marchait pas, j'ai édité un bgd de la couleur correspondante pour tester aussi. Mais bon rien ne marche... :s

Mea culpa moi, c'est le texte un peu au-dessus qui avait mis le bazar car je n'avais pas définit de taille, et ça provoquait une marge inutile.

Mais j'ai toujours un problème avec le footer, qui n'accepte aucune modification. J'ai vérifié tout mon code, mais je ne trouve pas la solution. Seul le code html est pris en compte, et pas la feuille de style.

Merci de votre aide !

			
		<footer>	
			<div id="credits">	
						<h3>ï.de.m tous droits reservés, Copyright © 2010-2013.</h3>
			</div>
		</footer>		
		
   </body>
</html>

footer{
	height:1200px;
	background-color:transparent;
}	
	
#footerContent{
	width:50px;
	margin: 0 auto;
	position:relative;
}

#credits{
	padding:5px 0;
}

Modifié par citronks (29 Jul 2013 - 16:02)