[CSS 2] Affichage d'un jpg décalé vers le bas [Résolu]

[kersu]

Bonjour,

J'ai un problème d'affichage de gif.
Je divise mon écran en 3 bandes horizontales :

Code :

1
2
3
4
5
 
body {margin: 0px 0;padding: 0;text-align: left;font:14px Arial, Helvetica, sans-serif;	margin-top: 0px;} 
	#hecran{	width: 100% ;height: 247px ; background-color: #FFFFFF ;}	
	#mecran{	margin: 0px 0; padding: 0;width: 100% ;font-size:1px; height: 1px;background-color: #000000;}
	#becran{    	width: 100% ;height: 1000px;  background-color: #E1E2F4 ;}

Je centre ma page web sur ces 3 bandes :

Code :

1
2
3
4
5
 
 
#hconteneur{width: 770px ;height: 247px ;margin: 0 auto ;}
#mconteneur{width: 770px ; height: 1px;font-size:1px;margin: 0 auto ;}
#bconteneur	{width: 770px ;	height: 1000px;	margin: 0 auto ;}

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<div id="hecran">
		<div id="hconteneur">
			.....
		</div>
</div>
 <div id="mecran">
		<div id="mconteneur"><img src="image/editoligne.jpg" alt="" /></div>
</div>
 <div id="becran">
		<div id="bconteneur">
			.....
		</div>
</div>

Mon image editoligne.jpg est bien une image de 1pixel de haut et 770pixels de long. Mais cette image s'affiche 1 ligne au dessous de #mecran (bande du milieu de mon écran).

Je corrige cette erreur en positionnant mon image une ligne plus haut en utilisant margin-top, mais comme tout bidouillage cela marche sur IE, mais pas sur firefox.

Merci de m'aider.

[jreaux62]

Bonjour,
essaie :

Code css :

1
2
#mconteneur {width: 770px ; height: 1px; margin: 0 auto; padding: 0;}
#mconteneur img {width: 770px ; height: 1px; margin: 0 auto; padding: 0; border:0;}

Ou mieux, en mettant l'image en background :

Code css :

#mconteneur {width: 770px ; height: 1px; margin: 0 auto; padding: 0; background: url(image/editoligne.jpg) no-repeat;}

[kersu]

Merci jreaux62,

J utilise ta deuxième solution :

Code :

#mconteneur {width: 770px ; height: 1px; margin: 0 auto; padding: 0; background: url(image/editoligne.jpg) no-repeat;}

Cela marche nickel, t'es au top
A+ et encore merci.