Préciser le titre du sujet pourrait être utile, effectivement.
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
position: relative;
top: 50%;
margin-top: -240px;
background-color: #000002;
}
Houlà...
Déjà, est-ce que le
html, body {height: 90%;} sert à quelque chose ?
Mieux vaut ne pas parasiter le code de propriétés inutiles mais qui risquent d'être mal interprétées par certains navigateurs.
Ensuite, la technique utilisée semble être celle du centrage vertical d'un bloc. Pour commencer, je conseillerais d'englober la page dans une <div id="page"> pour lui passer ce genre de propriétés CSS, il est probable que l'on évite ainsi des désagréments (pas d'idée précise en tête, mais il se pourrait que le positionnement relatif ou absolu de l'élément <body> soit aléatoire...).
Ensuite, pour que ce truc de centrage vertical fonctionne, il me semble qu'il faille utiliser
position: absolute; plutôt que
position: relative;... mais pas de certitude là dessus. J'essaierais quand même pour voir ce que ça donne.
Enfin, ce centrage vertical ne fonctionnera pas dans IE 5 Mac, qui ne prend pas les marges négatives : le haut du bloc sera positionné à 50% de la hauteur, et c'est tout.
À titre indicatif, j'ai réalisé il y a quelques semaines, pour un exercice, un site positionné de cette manière. On le trouve ici :
http://web.covertprestige.info/desire/ (contenu récupéré à droite et à gauche, je n'ai aucun droit de diffusion dessus, merci de ne pas diffuser).
Et le CSS qui nous intéresse :
div#page
{
width: 750px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -375px;
margin-top: -250px;
}
Au passage, le choix de cette technique pour le centrage horizontal également est une erreur : il y a des techniques plus simples et plus compatibles pour le centrage horizontal.
Modifié par mpop (15 Jan 2006 - 17:14)
