Discussion :

[munch.fr]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[SylvainPV]

Ce que tu cherches à faire, ça s'appelle une media query CSS. Pas besoin de JavaScript pour ça.

http://objetdirect.developpez.com/tu...onsive-design/

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
	width:1002px; 
   	height:582px;
   	position:absolute; 
   	top:50%; 
   	margin-top:-291px; 
   	left:50%; 
   	margin-left:-501px;
	background-color: #E8E8E8;
}
@media screen and (max-height:582px) {
   body {
      top: 0;
      margin-top : 0;
   }
}

[munch.fr]

Tu es mon idole !!! Ca marche impecable !!!
Et dire que je me galere depuis un moment pour essayer de trouver une solution... alors qu'une simple ligne suffit.....

MERCI MILLE FOIS !

[SylvainPV]

Ben mille fois de rien.

Tu peux cliquer sur ?