28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
nouvellement convertie au Css2, j'entre après une immersion théorique dans la pratique avec la construction d'une page contenant un header fixe une partie contenu. Après avoir résolu (contourné parfois ..!) les pb rencontrés, je bute sur un dernier élément, à savoir le centrage du header et du contenu (tests sur IE et mozilla FF).
en effet, dans les 2 navigateurs, le header se centre en tenant compte de la place que prendrait un éventuel ascenseur, et le contenu non.

Pourtant les 2 parties fonctionnent sur le même principe avec un div qui occupe 100% de la largeur (#header et #contenu) et un autre à l'intérieur qui se centre (conteneurMenu et conteneurPage ).
la seule différence entre les 2 est le overflow de #contenu, mais le pb ne se règle pas si je teste en le supprimant.

Pour un aperçu du pb :
La page en question : http://www.clairelepoint.com/test/html/test_hauteur_variable.html
Le .css
http://www.clairelepoint.com/test/styleCharvet.css

Merci d'avance si vous avez le temps de me lancer sur une piste pour corriger cela.
bonne journée
Salut!

Essaye de donner une largeur fixe à ton élement à centrer.

#div {
width: 700px; /* exemple */
}


Et de lui attribuer des marges automatiques sur les côtés.

#div {
margin-left: auto;
margin-right: auto;
}


Mais tu peux raccourcir en faisant ainsi:

#div {
width: 700px;
margin: auto;
}


Enfin, je ne suis pas une réference en css mais je pense que ça devrait marcher.

Au pire, tu pourrais lire la F.A.Q d'Alsa, il me semble qu'il y a deux articles sur le centrage. =)

Bonne continuation.
merci pour ta réponse mais mon div centré (conteneurPage) a déjà une largeur fixe et des margin auto...j'arpente les tutoriaux mais ne trouve pas de solution...
Bonjour,

Pour ma part, je suis adepte d'un conteneur à contenant Smiley langue

Je m'explique : Je créé un conteneur #main qui contient tout, l'entête, le corps et le pied de page. Je centre le #main et pis c'est tout ^^

Cela m'evite ce genre de soucis Smiley smile
merci pour ton aide;
j'essaie de tester avec cette solution... Bon pour l'instant, c'est pas top, ça part dans tout les sens, a force de faire des tests, j'ai tout foutu en l'air, je pense que je vais recommencer ça calmement à zéro pour essayer de faire qqch de propre.