Discussion :

[Lionel_aw]

Bonjour,

j'ai parcouru le forum et aussi plein d'ouvrages sur JQuery et je ne trouve pas la solution à mon problème très simple :

J'ai une page web qui tient dans un div ( <div id="wrapper"> ), la taille de ce div est stable, environ 800 pixel de haut.
Je le centre horizontalement dans la page à l'aide du css ( margin-left:auto; et margin-right:auto.

Pour le centrage vertical, je voudrais pouvoir mesurer la taille de la fenêtre ( le viewPort ?? ) et suivant le cas, ajuster la propriété css margin-top du div.

Par exemple si la fenêtre fait moins de 800px de haut , je détermine une marge très faible et si j'ai une fenêtre plus haute, je fais un calcul pour déterminer une marge pour centrer verticalement (ou à peu près) le div, du genre margin-top = (hauteurFenetre-hauteurDiv) / 2

j'arrive pas à décoller pour faire ce petit bout de code...

En plus je ne dois pas être le seul à rencontrer ce problème....

Merci à tous

Lionel

[Lionel_aw]

J'ai progressé, j'ai écrit ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
               var $haut = $(window).height();
	       var $wrapH = $("#wrapper").outerHeight;
 
			if ($haut < $wrapH)
		{
		$("#wrapper").css("margin-top","10px");	
		}
		else
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

Ce code ne fonctionne pas, sauf si je remplace la déclaration dans le else comme ceci

Code :

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

1
2
3
4
5
		else
		{
		var $newMargin = ($haut - 800) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

en mettant 800 ( la hauteur à peu près du div) en dur ça marche, je ne comprend pas pourquoi il ne veut pas considérer $wrapH puisque cette valeur est correctement lue dans le test if ($haut < $wrapH) ... bizarre..

De plus, si je change la taille de la fenêtre comment réactiver le test pour réactualiser la marge??

Merci

[Lionel_aw]

Je mérite une paire de tartes, lol, j'avais oublié de mettre () après outerHeight()

voici mon code final

Code :

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

1
2
3
4
5
6
7
8
9
 
        	var $haut = $(window).height();
	        var $wrapH = $("#wrapper").outerHeight();
 
			if ($haut > $wrapH)
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

j'ai mis la valeur basse de margin-top dans le style css de base et je ne l'ajuste que si la fenêtre est plus haute que mon DIV.
et là ça marche !!

Par contre il me reste un problème, comment détecter le redimensionnement de la fenêtre pour ajuster à nouveau cette marge ?

Merci

[Lionel_aw]

Décidément je fais les questions et les réponses, j'ai fini par trouver ..
Si ça peut en intéresser parmi vous, voici mon code final pour la fonction init de Jquery

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$(function()		{
 
 
/*------------------------------------*/
	var checkHeight = function()
	{
	$("#wrapper").css("margin-top","10px");	/* force la marge avant redim  */
 
	var $haut = $(window).height();
	var $wrapH = $("#wrapper").outerHeight();
 
			if ($haut > $wrapH)
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",($haut - $wrapH) / 2 +"px");	
		} else {
		$("#wrapper").css("margin-top","10px");	
		}
	}		/* fin function checkHeight  */
 
/*----------------------------------*/	
 
	checkHeight();
	$(window).resize(checkHeight);
 
/* ici le reste de mon code JQuery  */
 
});

J'ai été obligé de forcer la marge à la première ligne de la fonction car ça marchait mal si on changeait
la taille de la fenêtre à partir du bouton de réduction de windows (en haut à droite de chaque fenêtre, bouton du milieu 'niveau inférieur').

Donc maintenant, et même sur un écran 1920x1200, mon site est centré dans la page, sans avoir à utiliser un tableau à une cellule pour mettre mon DIV, voir ici www.piano-concert24.fr

Bravo JQuery !!

[SpaceFrog]

heu un simple margin en % n'aurait pas fait l'affaire ?

[Lionel_aw]

heu un simple margin en % n'aurait pas fait l'affaire ?

Il me semblait que ça marcha

[Lionel_aw]

heu un simple margin en % n'aurait pas fait l'affaire ?

Il me semblait que ça marchait pas en vertical sur un DIV....

alors j'aurais fait tout ça pour rien???

[SpaceFrog]

align center ne fonctionne pas en vertical, mais un margin en % fonctionne

[Lionel_aw]

alors ça je savais pas..
au moins ça m'aura aidé à manipuler un peu JQuery...

mais si je veux centrer le div verticalement , alors je mets quoi en en valeur de pourcentage??
Je viens d'essayer en mettant une valeur de % pour margin-top mais ça ne redimensionne la marge que si je réduis la fenêtre sur la largeur, c'est insensible à une variation de hauteur.



merci

[SpaceFrog]

tu as un height sur le body ? quel doctype ?

[Lionel_aw]

Ben non, j'ai pas mis de "height" sur la balise body.

mon doctype, c'est le transitionnel, celui produit par Dreamweaver.

Le problème, si mon body a une hauteur de 900 pixels et que je cadre mon div verticalement dedans, lorsque la fenêtre du navigateur fera 1200 px de haut, mon body ne sera plus centré, lui, même si le div contenu dedans est centré..

Pour l'instant j'ai gardé ma solution Jquery qui fonctionne bien.

Dans le temps je faisais un tableau centré contenant un cellule unique dans laquelle était le site, mais quelle horreur au niveau des recommandations w3c!!

[SpaceFrog]

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
 
<style type="text/css">
html, body { height:100%;
                    width:100%;
                    }
body {margin:0;
         padding:0;
         background-color:silver;
         }                    
#ecran { position: relative;
		  width:90%;
		  margin-left:  auto;
		  margin-right:auto;
              height: 60%;
              top:20%;
              border: solid 1px gray;
               background-color:lightgreen;
 
 
              }
</style>
</head>
<body>
<div id="ecran"></div>
</body>
</html>

[Lionel_aw]

alors là chapeau bas, je ne connaissais pas cette astuce de css.

donc si j'ai bien compris, avec ce code le body prend tout l'espace de la fenêtre, le div #ecran prend 60% de cet espace, il est décalé avec une marge haut de 20%, donc il reste 20% pour la marge du bas et c'est centré!

Royal, en fait je ne savais pas vraiment utiliser la valeur en pourcentage, ça représente donc un pourcentage de la valeur correspondante du conteneur...

ça marche aussi avec du transitionnel !

Par contre, si on réduit la fenêtre en deçà de la taille du contenu réel du div, le div s'écrase et son contenu sort du div.........

[SpaceFrog]

overflow:auto ...

[Lionel_aw]

si je mets overflow:auto; le div se réduit et un ascenseur apparaît.

[SpaceFrog]

et tu veux quoi ?
overflow:hidden ???

[Lionel_aw]

Je veux juste que mon div ne soit pas aplati

finalement je trouve que ma solution avec Jquery est plus souple et je peux quand même affecter une marge minime si la fenêtre est moins haute que le Div.

Mais j'en tire un bénéfice, j'ai appris grâce à toi à me servir de la valeur en % dans le css !!

[SpaceFrog]

vivement que le css3 soit implémenté par tous ...
utopie je le crains vu que IE6 n'est pas encore mort bien que complètement suranné