28172 sujets

CSS et mise en forme, CSS3

[Résolu]Largeur non prise en compte + différence pixel IE/Firefox ?

Bonjour,

Je n'en suis pas à mon coup d'essai en intégration de site, mais sur ce coup je sèche totalement.

Si vous regardez ici : http://dev.les-ames-usees.com/test/

Vous verrez que l'alignement à droite entre la plaque bleu du bandeau et l'image en dessous n'est pas correct.

Et pourtant tout fait la même largeur. De plus le résultat et même différent entre IE (1px de moins) et Firefox (1px de plus).

J'ai épuré tout le code pour faire un exemple basique dont voici le code :

<!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" xml:lang="fr" lang="fr">
	<head>
		<title>test</title>		
		<link href="test.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>		
  		<div id="global">
  			<div id="content">
  				<div id="scene-background"></div>	 				
  			</div>
  			<div id="header">				
				<div class="header">
					<div class="anim-flash">
						Flash
					</div>
					<div class="auth"></div>
				</div>
  			</div>			
  			<div id="footer">
  				
  			</div>
  		</div>
	</body>
</html>


Et le css:

/* --- STYLES DE BASE --- */

/* Pages */
body, html {height:100%;}
html {
	overflow-y:scroll;
	font-size:100%; /* bug IE 6-7 */
}

body {
	/* centrage du contenu */
	margin:0 auto; padding:0;
	text-align:center; /* IE6 */
	/* fond */
	background:white;
	/* polices/fonts */
	color:#000000; font-family:Arial, Helvetica, FreeSans, sans-serif;
	font-size:.8em;
	text-decoration:none; font-weight:normal;
}

body div {margin:0; padding:0;}
body img  {border:0;}
body form {margin:0; padding:0;}

#global {
	position:relative;
	margin:0 auto; text-align:center; /* centrage du contenu */
	width:100%;
	height:auto;	
}

#global .content, #header .header,  #footer .footer {
	width:948px;
	margin:0 auto; text-align:center; /* centrage du contenu */
}

#content {
	position:relative; top:171px;
	overflow:hidden; 
	min-height:672px; _height:672px;	
	height:auto;
	background:#F8F9FB url('images/body-bg.jpg') repeat-x left top;	
}

#scene-background {
	width:100%; height:131px;
	margin:0 auto; text-align:center;
	background:transparent url('images/scene-background.png') no-repeat center top;
}

#header {
	position:absolute; top:0; left:0;
	width:100%; height:171px;
	background:transparent url('images/header-bg.jpg') repeat-x left top;
}

#header .header {
	/* surchage ici  */
	overflow:hidden;
}

#header .header .anim-flash {
	float:left;
	width:797px; height:171px;
	text-align:left;
}

#header .header .auth {
	float:right;
	width:151px; height:171px;
	background:transparent url('images/auth-bg.png') no-repeat center top;
}


Vraiment, cette fois je sèche complètement. J'ai l'impression que c'est un oubli, ou une connerie mais je ne vois vraiment pas.

Une idée ?


Merci beaucoup,


A+ benjamin.
Modifié par bd.webdev (12 Mar 2009 - 18:08)
Bon ben voilà, j'ai trouvé en composant mon post.

Une erreur ici :

#global .content, #header .header,  #footer .footer {
	width:948px;
	margin:0 auto; text-align:center; /* centrage du contenu */
}


C'est mieux avec :

#global {
	position:relative; top:0;
	width:100%; height:auto;
	margin:0 auto; text-align:center; /* centrage du contenu */
	background:#F8F9FB url('body-bg.jpg') repeat-x left 171px;
}

#content, #header .header,  #footer .footer {
	width:948px;
	margin:0 auto; text-align:center; /* centrage du contenu */
}


Avec le nez dedans pendant un moment on finis par ne plus voir ce qui est évident Smiley smile

Désolé pour le dérangement.

A+ benjamin.
Modifié par bd.webdev (12 Mar 2009 - 18:09)
Sujet clos
Aller à