Espace incompréhensible

Bonjour,

je travaille sur un nouveau site et j'ai un petit problème : j'ai un espace de quelques pixel entre mon div navigation et mon div centre

voici la css

* { padding: 0;	margin: 0; }


body {
	font-size: 0.7em;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	background: url(Images/ToutesPages/FondStriesGrises.bmp);
	color: gray;
	}


#conteneur {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	border: 2px solid #636563;
	background: #FFFFFF;
	}

#header {
	margin: 0px;
	padding: 0px;
	height: 100px;
	border-bottom: 1px solid #636563;
	background: url(Images/ToutesPages/logo_petit.gif) no-repeat 5% 50%;
	}

html>body #navigation {
	height: auto;
	min-height: 400px;
	}

#navigation {
	float: left;
	width: 160px;
	height: 40px;
	margin: 0px;
	padding: 0px;
	}

html>body #centre {
	height: auto;
	min-height: 400px;
	}

#centre {
	height: 400px;
	margin-left: 160px;
	padding: 0px 0px 45px 10px;
	background: url(Images/ToutesPages/numeros.gif) no-repeat 50% 100%;
	border-left: 1px solid #636563;
	}
	
#footer {
	margin: 0px;
	padding: 0px;
	height: 20px;
	line-height: 20px;
	border-top: 1px solid #636563;
	color: gray;
	text-align: center;
	}

Si qu'elqu'un peut m'expliquer le pourquoi du comment ?

Je précisie je suis sous IE

Merci

raphmen a écrit :
en tous cas franchement b1 TON SITE....bravo....!!!

"b1" ??

Rafmen, sans vouloir être désagréable, pourrais-tu écrire en français et surtout éviter de poster pour ne rien dire ?
Tu nous fais 3 posts de suite alors que tu aurais pu tout regrouper en un, et qui ne font pas du tout avancer le sujet.
L'élément <div> a par défaut des marges égal à zéro; inutile de le lui repréciser.

@GuizBizet > peux-tu proposer aux membres un peu plus que ton code CSS, par exemple un vrai aperçu de ton problème car c'est assez difficile à deviner ainsi
Modifié par Raphael (27 Jun 2005 - 13:53)

Je suppose que cela signifie "ben"...

Voilà je suis au boulot et je n'ai pas de ftp dc je ne peut pas mettre en ligne

voiic une image qui montre mon problème

il y a un déclage entre le div nav et le div centre de quelques pixels et j'aimerais qu'il n'y en ai pas.

Voici la css :

* { padding: 0;	margin: 0; }


body {
	font-size: 0.7em;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	background: url(Images/ToutesPages/FondStriesGrises.bmp);
	color: gray;
	}


#conteneur {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	border: 2px solid #636563;
	background: #FFFFFF;
	}

#header {
	margin: 0px;
	padding: 0px;
	height: 100px;
	border-bottom: 1px solid #636563;
	background: url(Images/ToutesPages/logo_petit.gif) no-repeat 5% 50%;
	}

html>body #navigation {
	height: auto;
	min-height: 400px;
	}

#navigation {
	float: left;
	width: 160px;
	height: 400px;
	margin: 0px;
	padding: 0px;
	}

html>body #centre {
	height: auto;
	min-height: 400px;
	}

#centre {
	height: 400px;
	margin-left: 160px;
	padding: 0px 0px 0px 10px;
	border-left: 1px solid #636563;
	}
	
#footer {
	margin: 0px;
	padding: 0px;
	height: 20px;
	line-height: 20px;
	border-top: 1px solid #636563;
	color: gray;
	text-align: center;
	}

#centre p	{
	margin: 5px 0px 0px 0px;
	padding: 0px 5px 0px 0px;
	}

/* ------------------------------------------------------------- */
/* -------------------------- Le menu -------------------------- */

#navigation dl {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 1em;
	text-decoration: none;
	}

#navigation dt	{
	display: block;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 20px;
	line-height: 18px;
	background-color: #F75100;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	}
#navigation dt.first	{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

#navigation dt a	{
	display: block;	
	width: 100%;
	color: #FFFFFF;
	text-decoration: none;
	}

#navigation dt a:hover	{
	display: block;	
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
	background-color: #FFCC33;
	color: #FFFFFF;
	}

#navigation dd {
	display: block;
	margin: 0px 0px 0px 7px;
	padding: 0px 0px 0px 0px;
	height: 15px;
	}

#navigation dd a {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-bottom: 1px dashed gray;
	background-color: #ffffff;
	text-decoration: none;
	color: gray;
	font-weight: bold;
	}

#navigation dd a:hover {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid gray;
	background-color: #9C9A9C;
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	}

et le 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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Welldone ! Accueil</title>
<link href="Welldone2_screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="conteneur">
	<div id="header"></div>
	<div id="main">
		<div id="navigation">
			<dl>
				<dt class="first"><a href="index_fr.htm" title="Présentation">Présentation</a></dt>
					<dd><a href="index_fr.htm" title="Qui sommes nous">Qui sommes nous ?</a></dd>
					<dd><a href="rejoindre.htm" title="Nous rejoindre">Nous rejoindre ...</a></dd>
					<dd><a href="welldoneeurope.htm" title="Welldone en Europe">Welldone en Europe</a></dd>
			</dl>
			<dl>
				<dt><a href="services.htm" title="Nos Services">Nos services</a></dt>
					<dd><a href="services.htm" title="Administratif">Administratif</a></dd>
					<dd><a href="services.htm" title="Loisirs">Loisirs</a></dd>
					<dd><a href="services.htm" title="Emmenagement">Emménagement</a></dd>
					<dd><a href="services.htm" title="Shopping">Shopping</a></dd>
					<dd><a href="services.htmservices.htm" title="Vie de la maison">Vie de la maison</a></dd>
					<dd><a href="" title="Voyages">Voyages</a></dd>
			</dl>
			<dl>
				<dt><a href="formules.htm" title="Nos formules">Nos formules</a></dt>
					<dd><a href="formules.htm" title="Formule bleue">Formule bleue</a></dd>
					<dd><a href="formules.htm" title="Formule rouge">Formule rouge</a></dd>
			</dl>
			<dl>
				<dt><a href="temoignages.htm" title="Témoignages">Témoignages</a></dt>
			</dl>
			<dl>
				<dt><a href="presse.htm" title="Presse">Presse</a></dt>
			</dl>
			<dl>
				<dt>><a href="contact.htm" title="Contact">Contact</a></dt>
			</dl>
		</div>
		<div id="centre">
			<h1>Vous êtes ici : <a href="index_fr.htm">Présentation</a> > Qui sommes nous ?</h1>
	</div>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

Merci de votre aide
Modifié par GuizBizet (27 Jun 2005 - 17:08)

Je me permets de faire un petit up car je tourne en rond et je ne trouve pas de solution à mon problème.

Vous pouvez visualiser le décalage en ligne sur cette page

sachant que ce décalage n'existe que sous IE

merci
Modifié par GuizBizet (30 Jun 2005 - 12:50)

Bonsoir.
En effet il y a un décalage de 10px ( précisement )
Je te met une correction avec explications ici.

Auréance merci

Ce décalage était fait exprès au début et il est revenu collé à la ligne verticale grise tu dois le voir d'ailleurs sur cette page mais celui qui me pose souci c'est le blanc entre le orange et la ligne verticale grise.

Pour expliquer la structure j'ai un #conteneur
#header
#navigation (en float) #centre (contenu)
#footer

ma ligne grise verticale c'est le border-left de #centre et j'ai un décalage de qq pixels entre #navigation et #centre

je précise que le problème n'est visible que sous IE

Merci
Modifié par GuizBizet (01 Jul 2005 - 00:44)

Je viens, il y a peine deux secondes, d'ouvrir ton lien sous IE (qui est loin d'être mon navigateur par défaut ( ou plutôt : c'est mon navigateur plein de défauts (ieMac)) Aucun décalage...
Alors ces 10px de décalage viennent d'ou ?
Je ne vois pas de barre verticale : juste 6 barres horizontales orange ( dans #navigation ) et 1 horizontale grise ( dans #centre )
J'ai plusieurs navigateurs (mac), désires-tu des captures d'écran pour peaufiner ?
Modifié par Aureance (01 Jul 2005 - 01:42)

Merci Aureance de m'aider à résoudre ce problème.

Voilà pour mieux comprendre j'ai tout simplifié

css

* { padding: 0;	margin: 0; }


body {
	font-size: 0.7em;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: gray;
	}

#conteneur {
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	border: 2px solid #636563;
	background: #FFFFFF;
	}

#header {
	margin: 0px;
	padding: 0px 0px 0px 10px;
	height: 100px;
	border-bottom: 1px solid #636563;
	}

html>body #navigation {
	height: auto;
	min-height: 400px;
	}

#navigation {
	float: left;
	width: 160px;
	height: 400px;
	margin: 0px;
	padding: 0px;
	border: 1px solid green;
	}

html>body #centre {
	height: auto;
	min-height: 400px;
	}

#centre {
	height: 400px;
	margin-left: 160px;
	padding: 0px 0px 50px 0px;
	border: 1px solid yellow;
	}
	
#footer {
	margin: 0px;
	padding: 0px;
	height: 20px;
	line-height: 20px;
	border-top: 1px solid #636563;
	color: gray;
	text-align: center;
	}

#postfooter {
	height: 15px;
	}

et xhtml

<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Welldone ! Services</title>
<link href="test2.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="conteneur">
	<div id="header"></div>
	<div id="main">
		<div id="navigation">
		</div>
		<div id="centre">
		</div>
	</div>
	<div id="footer"></div>
</div>
<div id="postfooter"></div>
</body>
</html>

tu verras sous IE + PC un décalage entre #navigation et #centre et c'est cet espace que je ne m'explique pas
Modifié par GuizBizet (01 Jul 2005 - 10:03)

Je crois que le problème vient d'un manque d'espace :
html>body #navigation {
html > body #navigation {
c'est incroyable parfois.

Non. Les espaces dans html>body ne sont pas significatifs.

le bug d'IE est dû au height: 400px; de #centre

Solution simple: laissez les hauteurs être fonction du contenu, ce qui est nettement plus facile, tout aussi agréable à consulter, et franchement beaucoup plus conforme à l'idée de base du flux/float CSS

Le html > body #centre en question mesure "auto".
Et #centre "400px" une ligne plus loin, Peut être là, de quoi désorienter le navigateur

Aureance a écrit :
Le html > body #centre en question mesure "auto".
Et #centre "400px" une ligne plus loin, Peut être là, de quoi désorienter le navigateur

IE n'implémente pas le combinateur > dans les sélecteurs CSS. Il ignore donc tout bloc de règle CSS commençant par un sélecteur de descendant, du type html>body. ça ne le perturbe pas du tout

Il ne lira que le bloc ayant pour sélecteur #centre (d'ailleurs, le bug se maintient, comme il se doit, dans la page lorsque les blocs html>body sont supprimés de la CSS )

Laurent Denis
Donc si je comprend bien pour IE; il ne voit pas le signe ">" ( combinateur: c'est chouette comme nom ) mais alors, que va t'il choisir ? la mention "auto" indiquée en premier ou la mention "400 px" indiquée en second ?
A mon avis 400px. Chez moi le IE n'est pas embèté par ces 400px.
Je pensais avoir répondu à la question qui concernait le décalage souligné sur la capture d'écran, de mon coté, je ne vois plus de décalage... est-ce une erreur de Macintosch ?
Modifié par Aureance (03 Jul 2005 - 03:54)