28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai lu la FAQ sur le centrage vertical à cette adresse : http://forum.alsacreations.com/faq/#item3

Je veux centrer verticalement l'ensemble de mon site qui a une hauteur fixe.
La solution qui me convient est la 5ème (compatibilité IE 6, pas de hacks et pas de marges négatives) mais elle n'est malheureusement pas détaillée et je ne suis pas sûr de bien m'y prendre.
Si je comprends bien, il s'agit de mettre l'ensemble du contenu dans un tableau de hauteur 100% avec une seule cellule centrée verticalement (comme au bon vieux temps quoi...)
Mais le problème c'est que ça ne marche que si on vire le DOCTYPE ou si on force le html et le body à height:100%
Or je n'ai pas pu tester sur d'autres navigateurs que FF2 et IE7 et je ne suis pas sûr que cela soit vraiment la méthode évoquée dans cette FAQ car elle n'est pas si évidente que ne le suppose son évocation.

qu'en pensez-vous ?
Dans tous les cas, ce serait bien de décrire la méthode ...

Merci
Modifié par plancton (04 Dec 2007 - 14:13)
Salut,

Il n'y a aucune raison d'avoir à supprimer le doctype pour centrer ton site !
Aurais-tu une page en ligne pour qu'on puisse constater du problème et essayer de t'aider ? Smiley cligne
Modérateur
bonsoir,

la solution la plus solide est le tableau , et avec un doctype valide.

il ne faut pas oublier de remettre a zero marges internes et externes a html , body et table avec height et width a 100%.

un border-collapse:collapse a table , puis un vertical-align middle a td.

Avec ça on a une base qui permet de voir la suite.

Pour les 'solutions hasardeuses , il y a le display table , et pour IE un positionement en relatif a partir de 2 div imbriqué (en position relatif , on ne retrouve pas le probleme des marges negatives si doctype valide dans les versions 6 et 7 de IE).

test hasardeux Smiley smile : http://gcyrillus.free.fr/essai/contenuOcentre.html

(pas besoin de specifier une taille au contenu a centré)
avec plaisir, Mikachu
voici une série de 3 pages montrant clairement l'implication de chaque changement.
Le problème ne se pose que sur IE toutes versions, pas sur safari Apple ni Firefox.

http://217.167.201.241/tests/test-centrage-vertical.html

La solution proposée par gcyrillus me semble convenir avec l'avantage par rapport à la mienne de ne pas avoir à mettre une table en html et de ne jouer qu'avec les css mais elle confirme que ce n'est pas simple et qu'il faut bien mettre html et body à 100%

Merci
a plus
Bonjour,

Tu considères que ce sujet est [Résolu]?

Auquel cas, merci de bien vouloir l'indiquer dans le titre du sujet, sous la forme suivante: «[Résolu] Titre du sujet».

Tu peux modifier le titre du sujet en modifiant le titre du premier message du sujet.
c'est résolu d'une certaine façon mais si je mets résolu personne ne va plus réagir sur ce sujet or j'aurais aimé avoir l'avis d'Alsacréations ou d'autres sur le fait que le point 5 de la FAQ n'est pas détaillé (comme si il était évident alors qu'il semble ne pas l'être tant que ça et que c'est selon moi la méthode la plus compatible pour centrer verticalement un site).

tant pis, je mets résolu quand même Smiley decu

Merci