Centrer un élément

**raf_gug** · 30/01/2009, 08h50

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

**le_chomeur** · 30/01/2009, 09h06

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 :

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

1
2
3
4
5
6
7
.centrer{
width:200px;
height:200px;
position:fixed;
margin-left:50%;
left:-100px;
}

**raf_gug** · 30/01/2009, 09h08

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

Merci!

Raf

**le_chomeur** · 30/01/2009, 09h11

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

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
 
<!-- Code CSS pour Internet Explorer 6 -->
 
 
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
 
	.modalBox {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
		width: 100%;
		height:100%;
		background: #000000;
	}
 
	</style>
	<![endif]-->

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

**raf_gug** · 30/01/2009, 09h12

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

Merci bien! :-)

**raf_gug** · 30/01/2009, 09h56

J'ai du rater qqch, ca apparait bcp trop bas, voici ce que j'ai fait:

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
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!

**le_chomeur** · 30/01/2009, 10h03

code source html ??

**raf_gug** · 30/01/2009, 10h15

Le code de ma page est:

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

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

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 :

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

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;
 
}

Centrer un élément

JavaScript

Discussions similaires

Partager

Partager