Centrer un élément

Version imprimable

30/01/2009, 08h50
raf_gug

Centrer un élément

Bonjour,
je chercher à centrer un élément en javascript... J'ai essayé:
divMajReval.style.top = document.documentElement.scrollTop + ( screen.availHeight - 500 ) / 2 + 'px';
(500 est la hauteur de l'élément que je veux centrer).

Ca fonctionne assez bien sauf quand je modifie la taille du navigateur pour qu'elle ne soit pas maximale: dans ce cas, screen.availHeight ne change pas, donc mon div est beaucoup trop bas)... J'ai aussi essayé à la place de screen.height mais c'est idem...

Comment faire?

Merci!

Raf
30/01/2009, 09h06
le_chomeur
ton élément est positionné en absolute ??
si oui la méthode la plus simple, est de le placer en fixe ( +patch pour combler les bug sous ie ) et de le positionner en css exemple pour une div de 200px de largeur :
Code:

1 2 3 4 5 6 7 .centrer{ width:200px; height:200px; position:fixed; margin-left:50%; left:-100px; }
30/01/2009, 09h08
raf_gug

Salut et merci pour ta réponse!
Désolé pour mon ignorance, mais qu'entends tu par patch?

Merci!

Raf

ie 6 ne prennant as en compte la position fixed il faut feinter :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17  
ce code te montrer comment avoir une div faisant 100% de hauteur et largeur , et étant toujours positionnée en haut malgrès le scroll de la barre

30/01/2009, 09h12
raf_gug

Oki, je vais regarder tout ça et te tenir au courant!

Merci bien! :-)
30/01/2009, 09h56
raf_gug
J'ai du rater qqch, ca apparait bcp trop bas, voici ce que j'ai fait:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 div#wheel{ /*position: absolute; */ display: none; width: 553px; height: 257px; position: fixed; margin-left: 50%; left: -277px; margin-top: 50%; top: -129px; }
Au moment, d'un click, je fais un display: block et c'est bcp trop bas...

Qu'ai-je mal compris?

Merci!
30/01/2009, 10h03
le_chomeur

code source html ??

Le code de ma page est:

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>GECO</title>
 
<link href="resources/CSS/main.css" rel="stylesheet" />
<link href="resources/CSS/table.css" rel="stylesheet" />
 
<script src="resources/JS/params.js" type="text/javascript"></script><script src="resources/JS/js.js" type="text/javascript"></script></script>
</head>
 
<body>
 
<!-- ICI, le click permet d'afficher mon div -->
<img src="images/colors.jpg" style="vertical-align: middle;" onClick="inWheel=true; displayPalette( 'pdfColSubtitleBg' );" />
 
<div id="wheel" style="border: 1px solid #000;" onMouseOver="inWheel=true;" onMouseOut="inWheel=false;"><a href="#" onclick="inWheel=true; pickColor( ); return false;"><img alt="color wheel (hsv)" src="images/blank.gif" style="width: 553px; height: 257px; border: 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hsvwheel.png', sizingMethod='scale')" /></a></div>
 
</body>
 
</html>

Dans params.js:

Code:

1
2
3
4
5
6
7
 
function displayPalette( id )
{
	var palette = document.getElementById( 'wheel' );
	palette.style.display = 'block';
	idClick = id;
}

Et le .css correspodant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
div#wheel{
	/*position: absolute; */
	display: none;
	width: 553px; height: 257px;
 
	position: fixed;
 
	margin-left: 50%;
	left: -277px;
 
	margin-top: 50%;
	top: -129px;
 
}