Discussion :

[joviper]

bonjour, j'utilise le script suivant avec les balises Div dans body pour centrer le contenu de mes pages web :

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
<style type="text/css">
<!--
 
div.centre
{
position:absolute;
left:50%;
top:50%;
width:836px;
height:706px;
margin-left:-418px; 
margin-top:-353px; 
background-color:#000000;
}
 
-->
</style>

le problème concerne les utilisateurs à faible définition d'écran (inférieur à 1024x768), ça me bouffe une partie de mon bloc centré (le haut du bloc)
je suppose que c'est du à l'utilisation de valeurs négatives..

comment stopper le phénomène ? merci

[AurelBUD]

Le problème que tu as est normal.

pour le centrage horizontal utilises plutôt :

Code :

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

1
2
3
4
5
6
7
8
9
 
div.centre
{
position:realtive;
width:836px;
height:706px;
margin:auto;
background-color:#000000;
}

Pour le centrage horizontal, il n'existe pas d'autre solution en CSS.


Mieux vaut utiliser javascript :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
function getPageSize(){
 
	var xScroll, yScroll;
 
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
 
	var windowWidth, windowHeight;
 
//	console.log(self.innerWidth);
//	console.log(document.documentElement.clientWidth);
 
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
 
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
 
//	console.log("xScroll " + xScroll)
//	console.log("windowWidth " + windowWidth)
 
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
//	console.log("pageWidth " + pageWidth)
 
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}
 
function resize(){
	var pagesize = getPageSize();
	var DivCentre = document.getElementById("centre");
	DivCentre.style.top = '50%';
	DivCentre.style.left = '50%';
	DivCentre.style.marginLeft = '-418px';
	DivCentre.style.marginTop = '-353px';
	if( pagesize[1] < 706){
		DivCentre.style.top = 0;
		DivCentre.style.marginTop = 0;
	}
	if( pagesize[0] < 836){
		DivCentre.style.left = 0;
		DivCentre.style.marginLeft = 0;
	}
}
 
window.onresize = resize;
window.onload = resize;

Dans ce cas le centrage ne se fait que si la résolution est suffisante.