margin auto css qui coupe les sites !

[ideezik]

Bonsoir les gens !

Je reviens vous embeter avec mes problèmes de css

Pour centrer mon site sous les navs autres que IE, j'utilise :

Code: Tout sélectionner

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

Bon, ca marche nickel, je vous rassure... Seulement ! Voila le code entier du div :

div#header {
background-image: url(img/ban.gif);
width: 875px;
height: 64px;
padding: 0px;
margin-left:auto;
margin-right:auto;
text-align:justify;
}

Quand je test le site en 800x600, que vois-je ? Le site a perdu un bout à gauche ! En fait, le margin auto me redimensionne le site en 800px ! Donc il enlève gentillement 75px du site (a gauche).
Et il ne fait ca QUE quand il y'a un background-color ou background-image.

C'est fort quand meme !!!!

Si vous voulez, une preuve, ouvrez tout autre nav que IE en 800x600 sur -www.ideezik.com/v2

J'ai essayé de comprendre ce bug tout l'apres-midi et là je sèche !

Il m'embete ce css

David

[ideezik]

Apparement, je suis pas le seul à sécher !!!

Meme pas le début d'une idée de solution ?

[ludoanimation]

Salut,

essaye de preceder ton div par un :

Code: Tout sélectionner

body { margin: 0px auto; text-align: center;}

ensuite :

Code: Tout sélectionner

div#header {
background-image: url(img/ban.gif);
width: 875px;
height: 64px;
padding: 0px;
margin: 0px;
text-align:justify;
}


en fait c'est le text align de ton body qui va centrer les ton header.

pour ma part, je suis en train de reecrire tous le site en xhtml et css et j'ai pris le parti de ne JAMAIS utiliser de MARGIN ou de PADDING, je prefere alourdir le code avec des blocs en plus la ou je veux des espacements, et jouer avec les align span et clear ... enfin tant que tous les brouteurs ne sont pas aux normes.

Ludo

[ideezik]

J'ai déjà un text-align: center dans les propriétés de mon body. C'est la raison pour laquelle ca marche avec IE.
J'ai essayé de rajouter ton margin auto 0px mais ca n'a pas résolu mon pb...

David

[yannouk]

div#header c'est valable ca? Moi j'ai jamais vu, je connais que #header div {...

ca pourrait quand meme pas venir de la?
pour etre sur que ce soit pas un probleme de margin ou padding du contenants, tu peux toujours essayer:

* {
margin:0;
padding:0;
}

[yannouk]

euh...attend avec opera, j'ai redimensionné la fenetre, et tout est normal!!! ca reste centré tant qu'on reduit pas plus que la largeur définie, et ensuite, ca se calle a gauche et ca croppe la droite, normal
A+!

[ideezik]

C'est bien la le plus étrange ! Moi aussi j'ai fait ce test. Et ca fonctionne nickel. Sauf.... en 800x600 ! Si tu te mets en 1024 ou en 1280 et que tu réduis la fenetre (meme en dessous de 800x600) ca marche nickel mais en 800x600 (reel) ca merde !
Y'a de quoi rien comprendre moi je vous le dit !!!

David

[ideezik]

Bon bah après trois quatre jours d'essais... Impossible d'afficher un site qui fait plus de 800px en résolution 800x600 avec des margin-auto et des background-color ou background-image....
J'irais pas jusqu'a dire que ca m'enerve.... mais j'suis pas loin là !
Du coup, les gens qui utilisent un vrai navigateur n'auront pas le site centré ! Super...

David