design au centre avec CSS

**le Mar Mar 21, 2006 10:08**

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

**le Mar Mar 21, 2006 10:14**

Dans IE il faut utiliser text-align: center dans l'élément parent il me semble

**le Mar Mar 21, 2006 10:16**

French Dread a écrit:Dans IE il faut utiliser text-align: center dans l'élément parent il me semble

Exact, il me semble aussi.

**le Mar Mar 21, 2006 11:12**

Essayes :
margin-left:auto;
margin-right:auto;

**le Mar Mar 21, 2006 11:18**

Pour les backgrounds, il faudrait voir :

Avec background-position: vous pouvez fixer où le coin supérieur gauche du graphique doit être. La position se rapporte à l'élément HTML pour lequel le graphique est défini. Une mention numérique est permise ainsi que les mentions suivantes:

top = aligné en haut verticalement.
center = centré horizontalement.
middle = au milieu verticalement.
bottom = aligné en bas verticalement.
left = aligné à gauche horizontalement.
right = aligné à droite horizontalement

Source : SELFHTML

Edité après m'être rendu compte de ne pas avoir bien saisie la question.

L'insertion de style="vertical-align:middle" dans la balise IMG devrait la centrer verticalement.. Non ?

**le Mar Mar 21, 2006 12:10**

madx a écrit:Essayes :
margin-left:auto;
margin-right:auto;

ça marche sous tout ce qui n'est pas IE ( encore faut il avoir défini width )
mais pour IE, il faut effectivement le text-align dans l'élément parent ;-)

**le Mer Mar 22, 2006 3:42**

phpmikedu83 a écrit:
madx a écrit:Essayes :
margin-left:auto;
margin-right:auto;

ça marche sous tout ce qui n'est pas IE ( encore faut il avoir défini width )
mais pour IE, il faut effectivement le text-align dans l'élément parent

Ca fait longtemps qu'IE n'a plus besoin de passer par ce bug d'IE5 pour ça, il suffit jute d'avoir une dtd correcte pour sa page (4.01 strict de préférence) pour que ça marche.

**le Mer Mar 22, 2006 8:20**

oberon a écrit:Ca fait longtemps qu'IE

Ca veut dire quoi: "ça fait longtemps" ???

POur moi, ça veut dire qu'il y a des ordis équipés de cet IE et qu'il faut s'en préoccuper...

**le Mer Mar 22, 2006 19:33**

Longtemps ça veut dire des années, 2001 pour être précis. Et moi je pense qu'au lieu de se "préoccuper" d'IE, il vaudrait mieux se préoccuper de l'état de ses connaissances en HTML/CSS, ça évite de faire du code crade et de sortir des bidouilles datant de 1998 pour régler des problèmes qui n'existent plus depuis l'invention du doctype switching.

Enfin bon, s'il y a encore des masos qui font des pages sans DTD comme à l'époque d'IE4 alors que toutes les versions d'IE utilisées actuellement se comporte presque correctement quand on fait du vrai html...

Ah oui, pour info IE7beta 2 vient de sortir, j'ai pas testé ce cas précis mais il y a 90% de chances que la bidouille du text-align ne marche plus du tout avec cette version.

**le Mer Mar 22, 2006 20:20**

oberon a écrit:Longtemps ça veut dire des années, 2001 pour être précis. Et moi je pense qu'au lieu de se "préoccuper" d'IE, il vaudrait mieux se préoccuper de l'état de ses connaissances en HTML/CSS, ça évite de faire du code crade et de sortir des bidouilles datant de 1998 pour régler des problèmes qui n'existent plus depuis l'invention du doctype switching.

Enfin bon, s'il y a encore des masos qui font des pages sans DTD comme à l'époque d'IE4 alors que toutes les versions d'IE utilisées actuellement se comporte presque correctement quand on fait du vrai html...

Ah oui, pour info IE7beta 2 vient de sortir, j'ai pas testé ce cas précis mais il y a 90% de chances que la bidouille du text-align ne marche plus du tout avec cette version.

Enfin, moi ce que j'en vois, c'est que la dernière fois que j'ai fait un design avec la même problématique, sur IE6 et avec une DTD XHTML 1.0 transitional, et bien j'avais besoin de passer par ce subterfuge spécialement pour IE, voilà...

**le Mer Mar 22, 2006 20:58**

phpmikedu83 a écrit:Enfin, moi ce que j'en vois, c'est que la dernière fois que j'ai fait un design avec la même problématique, sur IE6 et avec une DTD XHTML 1.0 transitional, et bien j'avais besoin de passer par ce subterfuge spécialement pour IE, voilà...

C'est bien ce que je dis, avant de chercher des bidouilles il faut que tu apprennes les bases :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>centre</title>

<style type="text/css">
#page {
width:400px;
border:1px solid black;
margin-left:auto;
margin-right:auto;

}
</style>

</head>
<body>

<div id="page">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</body>
</html>

design au centre avec CSS

design au centre avec CSS

Lectures recommandées sur ce thème :

Qui est en ligne