Design centré avec CSS

Bonjour
J'ai une bannière dans mon site.
Je voudrais la centrer
Donc dans mon CSS j'ai

#header {
  width:760px;
  height:145px;
  background : url(design/header-chine-china.jpg) no-repeat;
  margin:0 auto;
  }

Mais impossible de le centrer, il reste à gauche de la page!

Merci pour l'aide
Modifié par Sim100 (21 Mar 2006 - 10:47)

Bonjour,

merci de placer le code dans des balises [ code] ... [ /code] (sans les espaces) comme indiqué dans l'Aide (en éditant ton message)

Felipe

Bonjour,
Avec quel(s) navigateurs as-tu ce problème ?
Peux-tu mettre un exemple en ligne ? Ton seul code CSS ne sera pas suffisant pour voir précisément d'où vient le soucis.

Salut,

Est ce que ton document html a une déclaration de type de document (DTD) ?

Si ce n'est pas le cas IE6 passera en mode quirck.

Bonjour
Je l'ai sous ie, avec lequel je fais mes testes. Je voudrais que àa marche sous ie.

Mais en fait c'est tout simple, j'ai juste la bannière.
Donc le CSS vous l'avez au dessus.

Dans le code de ma page j'ai juste

<div class="header"></div>

C'est tout

J'ai aussi essayé avec l'exemple de template sur ce site
Le template marche bien sur, mais avec ma bannière ça ne marche pas.

Dans l'exemple, le CSS est:

#conteneur {
position: absolute;
width: 760px;
left: 50%;
margin-left: -375px;
}

#header {
  height:145px;
  background : url(design/header-chine-china.jpg) no-repeat;
  }

Soit un conteneur de largeur 760 px qui est centré, et dedans je mets ma bannière (class header)

et donc dans ma page j'ai le code

<div class="conteneur">
<div id="header"></div>
</div>

Voila tout bibon, mais ça me laisse ma bannière à gauche !

Merci

Est ce que ton document html a une déclaration de type de document (DTD) ?
C'est quoi ça

Merci, je suis débutant

Doctype = DTD.
Pour centrer ta bannière dans IE, il est nécessaire de préciser

body{
text-align:center;
}

Ce qui aura pour effet de centrer tout ton texte. Il faudra donc des instructions contraires pour les autres éléments.
Pour FF et les autres, il faut indiquer

margin:0 auto;

à ta bannière, comme tu l'as déjà fait.

Salut

essaie ceci :

body {
    width: 760px;
   margin: 0 auto;
    }

@Jihel : Cette méthode fonctionne aussi pour IE (6 en tous cas), à partir du moment où le doctype est bien indiqué !
Modifié par Sopo (21 Mar 2006 - 12:21)

Bonjour,

Question bête mais est-ce que ton image "header-chine-china.jpg" fait bien 760px de large ?

Ah mais non

ce n'est pas #header que tu dois centrer avec margin:auto;

mais #conteneur lui même

de toute façon #header à la même largeur que son conteneur #conteneur donc il n'y a rien à centrer du coup.

Oups c'est vrai : j'ai zapé un bout du problème . C'est bien #conteneur qu'il faut centrer.
Ceci dit pour une compatibilité avec IE inférieur à 6, la technique des marges automatiques ne suffit pas. Il faudra bien adopter une autre méthode, comme celle du text-align:center.

On est bien d'accord pour IE less than 6.

Néanmoins il est important de préciser à chaque fois que hors le mode quirck IE6

1. interprète le margin auto.

2. rend un modèle de boite standard