Centrage vertical sur Opera

Bonjour,

Je souhaiterais centrer mon contenu verticalement sur ma page.
J'ai utilisé la méthode des marges négatives.
Ma page est parfaitement centrée sur Firefox, Safari, IE par contre sur Opera (version 6), le contenu s'effondre en bas de la fenêtre.
Quelqu'un aurait il une astuce ?
Voilà le code CSS:
#container {
height: 500px;
width: 800px;
margin-top: -250px;
position: absolute;
top: 50%;
margin-left: -400px;
left: 50%;
}

Merci beaucoup pour votre aide

Claire

bonjour,


Une le display:table; et une astuce sur le layout dans IE :

exemple :
http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html

autre piste :


plutot que d'utiliser les marges negatives et le positionnement absolu , tu peut essayer le positionnement relatif avec une valeur positive top de 50% sur le conteneur principal , puis une valeur negative top de -50% sur le second conteneur.

page de demo (pas zoli sous opera et safari pour la mise eb forme des textes) : http://gcyrillus.free.fr/essai/test-centre-vertical-align.html
Le centrage en position:relative; est appliqué a IE ,(Utilisable alors pour opera 6 j'imagine ) les autres ont droit au display:table; , puis pour les 3 zones centré verticalement relayout astuce pour IE.

Puis la technique la plus simple et sure a mettre en oeuvre : un tableau d'une cellule qui contient l'ensemble de la page en fixant , html , body et table en height:100%, width:100%; (avec un reset des marges et bordure +collapse) .
http://gcyrillus.free.fr/gabarits/menu-a-cheval.html
Pour un tableau , une dimension correspond a une taille minimale et peut s'étirer.

Pour les marges negatives tu en connais deja les effets

GC


pour une tentative d'explication sur le display:table et l'astuce du layout pour IE , en complement des infos presentes ou en liens sur la FAQ , voici une page qui viendra peut-etre en complement.

http://yidille.free.fr/plux/valign/index.php?2-complement-vertical-align
Modifié par gcyrillus (25 Jul 2007 - 22:07)