[résolu]Marges blanches en haut et en bas sur une Background image

Question

julien_lardon

3 Mar 2007 à 16:23

Bonjour,

Je me decide à poster parce que je n'arrive pas a savoir pourquoi j'ai des marges blanche en bas et parfois en haut de mon image(et peut etre plus génant, un scroll qui apparait).
Symptomes:
-sous mon portable(1920x1200) sous Firefox2 : marge en haut et en bas. Sous IE7: marges en bas.
-sous le pc de bureau(1280x1024) sous FF1.5: marges en haut et en bas (trés grosse), sous IE6:marges en bas(semblable à celle de mon portable).

Code :
-HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style_m.css" />
    <link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
    <title>Index</title>



  </head>

	<body>
	<p><img id="arriere" alt="" src="Css/images/background.png" /></p>
	<div id="main">
         	<div id="leftpane">
         		<div class="content">
                                   ....Mon menu
         		</div>
         	</div>
         	<div id="title">
                           .........rien mais une image
                </div>
                <div id="centerpane">
					<div class="text">
                		                     .....du texte
                	                 </div>
         	</div>
         	<div id="rightpane">
         		<div class="content">
                       		....du texte aussi

         		</div>
         	</div>
         </div>
	</body>
</html>

-Mon css


html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}

#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}


#main {
position : absolute;
top : 50%;
left : 50%;
margin-left : -500px;
margin-top : -400px;
width : 1050px;
height : 800px;
}
#leftpane {
float : left;
background-image : url(images/left_pane.png);
width : 150px;
height : 700px;
margin-right : 24px;
margin-left : 25px;
margin-top : 50px;
}
#title {
float : left;
height : 119px;
width : 299px;
margin-left : 150px;
margin-bottom : 31px;
background-image : url(images/titre2_299_119.png);
}
#centerpane {
float : left;
background-image : url(images/center_pane2.png);
right : 200px;
height : 600px;
height : 600px;
margin-right:25px;
width : 600px;
}
#rightpane {
float : left;
background-image : url(images/right_pane.png);
width : 150px;
height : 500px;
margin-top : 100px;
}
.content {
margin : 10px;
}

.....

Le site :
http://public.cranfield.ac.uk/sims/s091498/index.htm
(J'ai mis une bordure autour de mon paneau principal pour le visualiser)

http://public.cranfield.ac.uk/sims/s091498/index.htm

Si jamais c'est un probleme de browser, la priorité (contrairement à ce que j'ai écris) c'est ie6 Smiley smile

Voilà, j'espère que je suis assez précis....

Merci d'avance à ceux qui pourront faire avancer le chmilblik

EDIT: je poste, 4h aprés je trouve la solution (ça faisait déjà plusieurs jour que je cherchais...)...
Comme d'hab', le truc bête:pour faire plaisir au validateur xhtml, j'ai mis mon image dans un tag <p>, qui lui a des marges. J'ai donc donné un id au paragraphe contenant l'image, et j'ai fixé ses marges à 0. Il me restait plus qu'a déclarer mon image position:absolute (en trichant pour ie6) et c'est gagné.
Modifié par julien_lardon (04 Mar 2007 - 12:34)

Sujet clos

CSS et mise en forme, CSS3

[résolu]Marges blanches en haut et en bas sur une Background image