28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je sais bien que mon problème a dû être poser une bonne vingtaine de fois, mais je n'ai pas trouvé de solution.
En fait, j'essai simplement de centrer mon site verticalement, et que soit pris en compte par tous les navigateurs.
J'ai bien lu les infos sur http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html[/url]
mais pas de solutions.
Je pensais arriver en faisant comme le centrage horizontal, mais sans succès. Ou mettre un div en haut, et un autre en bas, en jouant sur le height (auto ou 100%) mais ca ne marche pas non plus.
Une solution efficace ?

Merci Smiley lol
Le premier point de cet élément de la FAQ (merci de corriger l'adresse du lien au passage), à savoir "Pour aligner tout élément (bloc de préférence) dans un bloc…", répond, il me semble, parfaitement à ta question.
Modérateur
bonsoir,

piste proposé il y a peu .
http://gcyrillus.free.fr/essai/contenuOcentre.html
mais ceci n'est pas sans bugs :
L'usage de commentaires conditionnel aide a la mise en oeuvre , mais IE7 conserve un scroll horizontal due au premier déplacement relatif (IE6 et inferieurs , ne montrent pas ce scroll suplémentaire, c'est un bug , effet secondaire du position:relative , qui ne survient plus dans IE7.)

Un autre exemple (sans scroll surdimensionné pour IE7 Smiley smile ) :
http://gcyrillus.free.fr/gabarits/fausses_colonnes_extensibles_au_centre.html
qui bug dans opera , car si le centrage est appliquée a partir des balises html et/ou body , certaines regles ou comportement peuvent etre zappée ou mal interprétés. (dans cette exemple , pas de scroll horizontal pour html ou body)... Juste pour dire ou rappeler en passant , qu'il vaut mieux partir sur un conteneur global div ou table dés que l'on veut positionné ou redimensionné l'espace d'affichage du site.

Une autre piste , nécessitant 2 éléments cote a cote , ce qui permet de centré verticalement un élément par rapport a un autre dans IE , en conférant un comportement de type 'inline' a un ou plusieurs élément de type block :
http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html
(cette exemple commence a daté ) .
L'élement servant de référence au centrage (dans IE) est coloré en rouge .

la solution la plus solide et simple a mettre en œuvre (pour un centrage verticale) est encore le tableau d'une cellule , en width et height à 100%; (table , td ainsi que body et html) et une remise a zero des marges pour : html , body , table , td . et un border-collapse:collapse; pour le tableau (table).

<edit> et j'oubliais le vertical-align:middle; pour td .</>
Voilou pour les tests et une mise en garde pour une option css sans tableau.

GC
Modifié par gcyrillus (21 Dec 2007 - 23:48)