margin avec un div

Anonyme

7 juin 2006 à 18:22:49

Bonsoir,
Je ne comprends pas pourquoi mon div ne veut pas se centrer sous Internet Explorer:

#div { width: 785px; height: 163px; margin: 0px auto; }

J'ain tenté de faire margin-left: auto; et margin-right: auto; mais ça ne marche pas.

mick3y

7 juin 2006 à 18:29:51

Effectivement c'est bizarre. Logiquement, d'après les codes que tu as donné, ça devrait fonctionner.

As-tu essayé de mettre des propriétés à ta div dans ton CSS? Car dans ton exemple, tu as seulement mis ta div vide (à moins que c'était simplement pour ton exemple).

Sinon si tu pouvais nous montrer la page, ce serait bien.

Kolimang

7 juin 2006 à 18:33:15

Salut seb4

Je ne suis sûr de rien, mais je tente:
Les indications "0px" et "auto" ne sont-elles pas incompatibles ?

Ne faut-il pas mettre uniquement ceci ?

#div { width: 785px; height: 163px; margin: auto; }

Désolé si je suis complètement à côté de la plaque

Anonyme

7 juin 2006 à 18:37:05

oui, j'ai aussi essayé margin: auto; mais ça ne marche pas, et puis normalement c'est pas incompatible les px avec les auto.

salvat0, en fait le div restera toujours vide, c'est jsute pour afficher une bannière.

mick3y

7 juin 2006 à 19:22:27

Très bien. Le mieux serait que tu nous donnes le code HTML et le CSS en entier. Au moins ce sera plus simple pour voir l'ensemble.

Anonyme

7 juin 2006 à 19:24:02

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NeDoM</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="/nedom1/style.css" rel="stylesheet" type="text/css" media="screen, print, handheld" />
</head>

<body>
<div id="entete">
</div>

<div id="bloc">
<div id="menu-gauche">
<div class="menu-entete">
</div>

<div class="menu-corps">
</div>

<div class="menu-pied">
</div>
</div>

<div id="menu-droit">
<div class="menu-entete">
</div>

<div class="menu-corps">
</div>

<div class="menu-pied">
</div>
</div>

<div id="corps">
<div id="informations-entete">
</div>

<div id="informations-corps">
</div>

<div id="informations-pied">
</div>
</div>
</div>

<div id="pied">
</div>
</body>
</html>

body { margin: 0px; background: url("/nedom1/images/fond.gif"); }

#entete { width: 785px; height: 163px; margin: 0px auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/nedom1/images/entete.png', sizingMethod='scale'); }
html>body>#entete { background: url("/nedom1/images/entete.png"); }
#bloc { width: 785px; margin: 0px auto; }
#menu-gauche, #menu-droit { width: 160px }
#menu-gauche { float: left; }
#menu-droit { float: right; }
#corps { margin-left: 180px }
#informations-entete, #informations-corps, #informations-pied { width: 422px }
#informations-entete { height: 41px; background: url("/nedom1/images/infos`entete.gif"); }
#informations-corps { background: url("/nedom1/images/infos`corps.gif"); }
#informations-pied { height: 36px; background: url("/nedom1/images/infos`pied.gif"); }
#pied { width: 783px; height: 45px; margin: 0px auto; background: url("/nedom1/images/pied.gif"); clear: both; }

.menu-entete { height: 45px; background: url("/nedom1/images/menu`entete.gif"); }
.menu-corps { background: url("/nedom1/images/menu`corps.gif"); }
.menu-pied { height: 44px; background: url("/nedom1/images/menu`pied.gif"); }