Modifier le centrage d'une page en fonction de la résolution
Bonjour a tous,
Tout nouveau sur votre forum, je me permets de faire appel à vos services pour un gros soucis "esthetique" sur mon site.
Pour faire simple, je souhaite que mon site soit parfaitement centré (verticalement et horizontalement) sur l'écran de l'utilisateur. J'utilise un format de page qui fonctionne tres bien sur les 3/4 des écrans (ma page fait 1002 x 582 pour des raisons techniques).
J'utilise la class CSS suivant pour obtenir un centrage vertical parfait (meme marge en haut et en bas)
Code:
1
2
3
4
5
6
7
8
9
10
| body {
width:1002px;
height:582px;
position:absolute;
top:50%;
margin-top:-291px;
left:50%;
margin-left:-501px;
background-color: #E8E8E8;
} |
MAIS, parce qu'il y a un mais, sur les écran de smartphone par exemple, dont la résolution n'est pas toujours au top, mon site s'affiche centré, mais coupé en haut et en bas quand la resolution verticale est inférieur 582)
Je voudrais donc, si la résolution est inférieur à 582, ne pas centrer verticalement et mettre la marge "top" à 0.
Je me débrouille bien en PHP & MYSQL mais je suis un chevre en JAVASCRIPT. et le seul moyen de gérer la hauteur. c'est le javascript.
Comment puis je modifier les balise CSS ci-dessus via un truc du genre
IF (screen.height < 582)
>>> j'affiche la class BODY sans centrage
ELSE
>>> j'affiche la classe BODY indiqué précedement.
J'espere que l'un d'entre vous pourra m'eclairer.
Merci d'avance !
