28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Décallage entre mes DIVs (IE7 et Firefox v2) ?

Bonjour,

Je rencontre quelques difficultées avec le positionnement des DIVs de mon site (avec Firefox v2 car sous IE7 ça fonctionne) comme vous pouvez le constater ci-dessous :
http://cjoint.com/data/lqoiQUmrDB_probleme.PNG

Que dois-je faire pour corriger ce problème ?

Merci par avance,
Mathieu
Modifié par ZiP (20 Nov 2006 - 11:46)
Bonjour,

En effet, j'ai oublié de vous le mettre...

Le voici :

CSS :

body
{
	background-color	: #C7E7D5;
	color				: #000000;
	font-family			: Verdana, sans-serif;
	font-size			: 11px;
}

img
{
	border				: none;
}

#global
{
	margin-left			: auto;
	margin-right		: auto;
	width				: 760px;
}

#header
{
	background-color	: #FFFFFF;
	border				: 1px #000000 solid;
	color				: #000000;
	width				: 759px;
}

#header_menu
{
	margin				: 0;
	padding				: 0;
}

#gauche
{
	background-color	: #00913E;
	background-image	: url(images/gauche_fond.jpg);
	background-repeat	: no-repeat;
	border-left			: 1px #000000 solid;
	color				: #000000;
	min-height			: 320px;
	width				: 160px;
}

#navigation
{
	padding-top			: 5px;
	margin-top			: 10px;
	min-height			: 35px;
	text-align			: center;
}

#centre
{
	background-color	: #E2EFBA;
	background-image	: url(images/centre_fond.jpg);
	background-repeat	: no-repeat;
	border-right		: 1px #000000 solid;
	color				: #000000;	
	margin-left			: 160px;
	margin-top			: -320px;
	min-height			: 320px;
	width				: 600px;
}

#footer
{
	font-size			: 10px;
	text-align			: center;
}

.menu
{
	list-style-type		: none;	
	margin				: 0;
	padding				: 0;
}

.menu a
{
	display				: block;
	color				: #FFF300;
	font-weight			: bold;
	height				: 20px;
	padding-top			: 7px;
	padding-right		: 1em;
	text-align			: right;
	text-decoration		: none;	
}

.menu a:hover
{
	background			: #007BC1;
}

.menu li
{
	list-style-type		: none;
}


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" xml:lang="fr" lang="fr">
	<head>
		<title>site</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-language" content="fr" />
		<link rel="stylesheet" href="site.css" />
	</head>
	<body>
		<div id="global">
			<div id="header"><img src="images/logo.png" alt="" /><div id="header_menu"></div></div>
			<div id="gauche">
				<div id="navigation">
					<a href="./"><img src="images/menu_sommaire.gif" alt="" onmouseover="this.src='images/menu_sommaire_dessus.gif'" onmouseout="this.src='images/menu_sommaire.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="./index.php?page=contact"><img src="images/menu_contact.gif" alt="" onmouseover="this.src='images/menu_contact_dessus.gif'" onmouseout="this.src='images/menu_contact.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.back();"><img src="images/menu_back.gif" alt="" onmouseover="this.src='images/menu_back_dessus.gif'" onmouseout="this.src='images/menu_back.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.next();"><img src="images/menu_next.gif" alt="" onmouseover="this.src='images/menu_next_dessus.gif'" onmouseout="this.src='images/menu_next.gif'" /></a>
				</div>
				<ul class="menu">
					<li><a href="#">xxxx</a></li>
					<li><a href="#">yyyy</a></li>
					<li><a href="#">zzzz</a></li>
					<li><a href="./index.php?page=contact">Contactez-nous</a></li>
					<li><a href="./index.php?page=emploi">Offres d'Emplois</a></li>
				</ul>
			</div>
			<div id="centre"></div>
			<div id="footer">
				<br/>Copyright © 2005-2006 site. Tous droits réservés.<br/>
				<br/><br/><a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_xhtml11.png" alt="Valide XHTML 1.0 Strict"/></a>&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css.png" alt="Valide CSS"/></a>&nbsp;<a href="http://www.getfirefox.com" onclick="window.open(this.href); return false;"><img src="images/get_firefox.png" alt="Téléchargez Firefox !"/></a><br/>&nbsp;
			</div>
		</div>
	</body>
</html>


Le décallage se trouve entre le DIV "header" et "gauche+centre".

Merci,
ZiP
Modifié par ZiP (16 Nov 2006 - 14:33)
Bonjour,

Je ne vois vraiment pas comment faire... Smiley confused

Quelqu'un pourrait-il me mettre sur la voie ?

Merci,
ZiP
Bonjour.

Je viens de faire une maquette de votre page.

Je n'ai pas d'explication, mais j'ai identifié une propriété qui génère le décalage sur ma maquette:


#navigation
{
	padding-top			: 5px;
	/* margin-top			: 10px; */[crash] 

	min-height			: 35px;
	text-align			: center;
}


Je n'en sait pas plus...
Mais si ça peux vous mettre sur la voie.. Smiley cligne
Sujet clos
Aller à