Centrer des div tout en gardant une couleur de fond uniforme

Bonjour à tous,

Je viens juste de m'inscrire sur le forum, mais je consulte déjà Alsacréations depuis plusieurs mois désormais.

J'aurais besoin d'un petit coup de pouce car je n'arrive pas à résoudre un problème de CSS situé sur cette page : http://checkshorturl.com

Je voudrais que la div "header" et la div "footer" soient centrées et avec un fond noir. J'ai suivi plusieurs conseils qui m'ont permis soient de faire en sorte que les div soient centrées, soit de faire en sorte que le fond soit noir sur toute la largeur de la page.

Mais je n'arrive pas à avoir les deux en même temps...

Pourriez-vous m'aider s'il vous plaît ?

Bonjour Kysban,

Heu ... pour moi ton header et ton footer sont sur fond noir et centré.
Sous IE7, FF, Opéra et Safari.
Ou alors je n'ai rien compris à ta question.

A+
DonVtt

Ils sont bien sur fond noir, mais ils ne sont pas centrés.

Si tu es en 1024 x 768 pour la résolution de ton écran, alors peut être qu'effectivement tu as l'impression que c'est centré (j'ai choisi une largeur de 1000 px).

Mais je t'assure que le footer et le header sont calés à gauche (je viens de retester avec IE, FF et Safari - je n'ai pas Opera). Et si je les centre, le fond noir ne prend plus la totalité de la largeur de l'écran.

Hello Kysban et bienvenue,

il suffit d'affecter le fond noir au body et de centrer le header et le footer. Par exemple :

#header {
   ...
   min-width: 1000px;
   width: 1000px;
   margin: 0 auto;
}

Oui mais je crois que dans ce cas, la partie centrale du site (le "container" entre autre) se retrouve avec des bordures verticales noires à gauche et à droite des 1000 px de largeur...

Kysban a écrit :
Oui mais je crois que dans ce cas, la partie centrale du site (le "container" entre autre) se retrouve avec des bordures verticales noires à gauche et à droite des 1000 px de largeur...

Ben il suffit de le placer lui-même dans un conteneur ayant un fond blanc et dont la largeur n'est pas fixée pour qu'il prenne 100%...

Voilà, c'est ce que je viens de faire, merci beaucoup !

Je suis désolé de poser tant de questions, mais du coup...

C'est le container qui n'est plus centré. Comment je peux résoudre ça ?
Modifié par Kysban (28 Apr 2009 - 13:18)

Kysban a écrit :
C'est le container qui n'est plus centré. Comment je peux résoudre ça ?

Ben comme tu as fait pour les autres.

html

<div id="centre">
   <div id="container">
   </div>
</div>

css

#centre {
   background-color: white;
}

#container {
   width: 1000px;
   margin: 5px auto;
}

Effectivement, je n'avais pas du tout pensé à contenir la div à centrer dans une div ayant width: 100% et un fond blanc.

C'est nickel, merci !

Kysban a écrit :
Si tu es en 1024 x 768 pour la résolution de ton écran, alors peut être qu'effectivement ...

Heu oui ...désolé. J'avais omis ce petit détail.

DonVtt