Discussion :

[Ctesias]

Bonjour,

alors voila, j'ai un script qui est sence me centrer ma page web. Mais voila, copmme il y a toujours un chargement et un decalage de ma page, j'ai essayé de passer en paramètre de session une certaines valeur qui evitera ce decalage.

VOila mon script:

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
33
34
35
36
37
38
39
40
41
42
window.onload = function ()
{
 
 
 
 
	var lmt = document.getElementById('centrage');
	var container = document.documentElement;
 
  if(lmt && container)
	{
	    var containerHeight;
	    if (container.innerWidth)
	    {
            containerHeight = container.innerHeight;		
		}
		else
		{
            containerHeight = container.clientHeight;
		}
	    var lmtHeight;
	    if (lmt.innerWidth)
	    {
            lmtHeight = lmt.innerHeight;
			lmtHeight = 600;
		}
		else
		{
            lmtHeight = lmt.offsetHeight;
			lmtHeight = 600;
		}
		var y = Math.ceil((containerHeight - lmtHeight) / 2);
		var y = Math.ceil((containerHeight - 700) / 2);
		if(y < 0)
		{
			y = 0;
		}
		lmt.style.position = "relative";
		lmt.style.top = y + "px";
 
   		$('a').attr("href", "?myheight="+ y);
	}

et dans ma page php:

Code php :

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
<?php session_start(); ?>
<?php include("header.php"); ?>
<script type="text/javascript" language="javascript" src="script/script.js"> </script>
 
<?php include("lightbox.php") ?>
<link rel="shortcut icon" type="image/x-icon" href="images/sittelles.png" />
<title>Hôtel, restaurant "Les Sitelles ***"</title>
<?php 
if(isset($_GET['myheight'])){
	$_SESSION['hauteur_page']=$_GET['myheight'];
	}
if(isset($_SESSION['hauteur_page'])){ ?>
<style type="text/css">
<!--
#centrage {
	top:<?php echo $_SESSION['hauteur_page']; ?>px;
}
-->
</style>
<?php } ?>

Dans mon url, on obtiens bien: ".php?myheight=132".

Le problème, c'est qu'il semble que cette valeur ne soit pas récupérer...

Si quelqu'un saurait m'aider...


Cordialement,

Ctesias

[NoSmoking]

Bonsoir,
si le centrage est horizontal alors en pur CSS cela est jouable, si il y a également un centrage vertical cela devient un peu plus délicat mais avec les marges négatives, entre autre c'est jouable.

La mise en position relative entraine des contrainte, que fais tu en cas de redimensionnement de la fenêtre du navigateur par le visiteur???

[Bovino]

Code :

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

1
2
lmt.style.position = "relative";
lmt.style.top = y + "px";

Code php :

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

1
2
3
#centrage {
	top:<?php echo $_SESSION['hauteur_page']; ?>px;
}

Tu n'as pas l'impression qu'il manque une propriété pour ton élément centrage ?

Et au passage :

Code php :

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

1
2
3
if(isset($_GET['myheight'])){
	$_SESSION['hauteur_page']=$_GET['myheight'];
}

Utiliser une entrée utilisateur (paramètre GET) sans vérifier son format, c'est pas top

Code php :

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

1
2
3
if(isset($_GET['myheight']) && is_numeric($_GET['myheight'])){
	$_SESSION['hauteur_page']=$_GET['myheight'];
}

est un minimum !

[Ctesias]

Salut a tous!

@bovino:

Quel propriété manque? sachant que le centrage horizontal est deja déclaré?

Code :

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

<div id="centrage" style="position:relative; margin-left:auto; margin-right:auto; width:   955px; box-shadow:4px 4px 2px #B3B3B3;">

Edit: Le fait de la verification du type marche bien et permet bien d'influencer sur la Style, mais impossible de changer de page, avec les differents liens :s

@NOsmoking:

ET bien je ne fais rien... c'est aussi ca le problème ^^
Parce que tu fais comment toi? ^^'

Merci de vos réponses en tout cas .

[dukej]

Ce n'est certainement pas en PHP que tu dois gérer ton bricolage de centrage
ça doit être fait en 100% JS, et tu dois gérer une méthode qui tourne sur un setInterval pour gérer ça

[NoSmoking]

@NOsmoking:
ET bien je ne fais rien... c'est aussi ca le problème ^^
Parce que tu fais comment toi? ^^'

je ne fais pas

sinon il y a la technique des marges négatives pour le centrage verticale, mais c'est du CSS.

[Ctesias]

SAlut et désolé pour le temps de réponse!

@dukej: Mais je ne fais pas que ca en php, j'ai un javascript... LE problème, c'est qu'il ne retourne pas la valeur correctement.

[Ctesias]

J'aimerais bien récupérer une valeur contenu dans une variable javascript. SI cela est possible bien sur? Pour en faite, la remettre dans une variable de Session Php... J'ai beau chercher sur le net, je ne trouve que peu de sujet, et mal expliqué sur la récupération de variable de javascript...

Cordialement,

Ctesias

[NoSmoking]

essaies ce qui suit sur base des marges négatives

Code html :

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
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Centrage Elément]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body{
  width : 100%;
  height : 100%;
  margin : 0;
  padding : 0;
  font-family : verdana;
  font-size : 1.0em;
}
#element{
  width : 500px;
  border : 1px solid #c0c0c0;
  padding : 1em;
  background-color : #eef;
}
</style>
</head>
<body>
<div id="element">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script type="text/javascript">
var oElem = document.getElementById( 'element');
if( oElem){
  var oStyle = oElem.style;
  var haut   = oElem.offsetHeight;
  var larg   = oElem.offsetWidth;
  oStyle.position = 'absolute';
  // centrage vertical
  oStyle.top = '50%';
  oStyle.marginTop   = -(haut>>1) +'px';
  // centrage horizontal
  oStyle.left = '50%';
  oStyle.marginLeft  = -(larg>>1) +'px';
}
</script>
</body>
</html>

[Ctesias]

Bonjour,

Je viens d'essayer ta solution. Elle marche, a condition que la page tienne sur l'ecran. Si elle est trop grand et que la scrollbar apparait, elle est coupé sur le haut car trop remonté.

Merci a tous ceux qui me répondent.

Ctesias

[Ctesias]

Hop hop op!

Up and Down!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var id_div = 'centrage2';
var hauteur = document.getElementById(id_div).offsetHeight;
 
document.getElementById('centrage2').style.position = "relative";
hauteur_window = ( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight);
if(hauteur > hauteur_window)
{
	document.getElementById('centrage2').style.top= "0 px";
}
else
{
document.getElementById('centrage2').style.top = ((( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight)-hauteur)/2)+"px";
}

[NoSmoking]

un peu d'optimisation ne nuit pas au 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 id_div = 'centrage2';
 
var oDiv = document.getElementById( id_div);
var hauteur = oDiv.offsetHeight;
var hauteur_window = ( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight);
 
oDiv.style.position = "relative";
if(hauteur > hauteur_window){
  oDiv.style.top = "0 px";
}
else{
  oDiv.style.top = (( hauteur_window -hauteur)/2)+"px";
}

peut mieux faire mais bon...

Juste une petite remarque, pourquoi dérouter l'internaute avec un coup le centrage et un coup le non centrage si la taille est supérieure à la fenêtre, ce n'est pas top pour peut qu'il y ait un menu.
Dans le cas d'un centrage exclusivement horizontal cela se traite en CSS, mais bon ce n'est qu'une remarque.

[Ctesias]

Salut!

Tout d'abord, merci de ta réponse. Le centrage horizontal se traite déjà par css. Le problème, c'est qu'il y a des pas qui peuvent tout simplement tenir sur une fenetre, donc je les centre verticalement pour que cela soit plus esthétique.