Problème de padding dans un footer en background-image

Bonjour à tous !

J'aurais besoin de votre aide s'il vous plait afin de corriger un petit problème de CSS sur mon footer. Mon background-image prend toute la longueur du footer mais pas toute la largeur .... A titre d'exemple, si je mets padding:1em 0; dans #footer il n'y a plus de problème, il prend bien 100% de l'espace en largeur mais du coup mes titres h3 sont décalés.

Un grand merci d'avance à tous.

#footer {
	float: left;
	width: 100%;
	text-align: center;
	background-image: url(../images/transparent.png);	
}
#footer-outer {
	clear: both;
	width: 940px;		
	margin: 0 auto;
	font-size: .6em;		
	text-align: left	
}
#footer-wrap {
	float: left;
	width: 920px;
	margin-left: 10px;	
	padding-top: 20px;	
	display: inline;
}

Hello Archimede2 et bienvenue,

du code css sans le code html correspondant ça ne sert pas à grand chose.

D'ailleurs comme tu as une image en background ça risque de ne pas être facile à tester de toute façon et l'idéal serait peut-être un lien vers une page en ligne.

Salut Heyoan !

Voici le code HTML :
Je suis sûr que la correction doit se faire sur #footer,#footer-outer ou bien #footer-wrap sur la feuille CSS mais que ajouter ?

<div id="footer">	

	<!-- footer-outer -->	
	<div id="footer-outer" class="clear"><div id="footer-wrap">
	
		<div class="col-a">
				
			<h3>Contact</h3>
			
			<p>
			<strong>Tel: </strong>+123456789
			</p>
			
			<p><strong>Adresse: </strong>123<br/><a href="#">Plan</a></p>
				
			<p><strong>mail: </strong>contact@contact.com</p>							
				
		</div>
		
		<div class="col-a">
		
			<h3>Rubrique</h3>
			
			<div class="footer-list">
				<ul>				
				<li id="current"><a href="index.html">Index</a></li>
				<li><a href="1.html">Mes dessins</a></li>
				<li><a href="2.html">Plan du site</a></li>
				<li><a href="3.html">Contact</a></li>	
				</ul>
			</div>			
				
		</div>		
	
		<div class="col-b">		
			<h3>Message</h3>			
			
			<p> 
			Blabla
			</p>			
			
		</div>		
		
		<div class="fix"></div>
		
		<!-- footer-bottom -->		
		<div id="footer-bottom">
	
			<div class="bottom-left">
				<p>
 Contacter moi si besoin 			
				</p>
			</div>		
	
			<div class="bottom-right">
				<p>		
					<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | 								
				</p>
			</div>

		<!-- /footer-bottom -->		
		</div>
	
	<!-- /footer-outer -->		
	</div></div>		

<!-- /footer -->
</div>

Je n'ai pas encore pris un hébergeur donc je fais ça en local.
Modifié par Archimede2 (03 Sep 2010 - 14:43)

Eh bien comme je le supposais ton code ne suffit pas pour reproduire le problème. Cela dit en relisant ton premier message et en remplaçant

Archimede2 a écrit :
Mon background-image prend toute la longueur du footer mais pas toute la largeur. A titre d'exemple, si je mets padding:1em 0; dans #footer il n'y a plus de problème, il prend bien 100% de l'espace en largeur mais du coup mes titres h3 sont décalés.

par

Archimede2 a écrit :
Mon background-image prend toute la largeur du footer mais pas toute la hauteur. A titre d'exemple, si je mets padding:1em 0; dans #footer il n'y a plus de problème, il prend bien 100% de l'espace en hauteur mais du coup mes titres h3 sont décalés.

cela ressemble alors au phénomène de fusion des marges.

Excuse moi Heyoan, mon commentaire est un peu confus, voici une image qui illustre mieux mon problème :
http://img696.imageshack.us/img696/9206/problemeum.jpg
Tu peux constater qu'il y a une marque d'environ 10px tout à fait en bas (encadrer en rouge) or je voudrais que le fond image gris foncé prennent toute la hauteur.

J'ai déjà un fond d'image dans le body et j'en rajoute un autre par dessus dans le footer, en effet.

Donc il fallait bien modifier ton premier message... par contre les codes css et html que tu donnes ne suffisent pas pour reproduire le problème (je te laisse essayer). Donc le mieux est de donner tout le code css et html.