positionnement dynamique d'un bloc

**blueskycorporation** · 23/12/2008, 10h58

Bonjour,

Je ne savais pas trop où poster sachant que ma page necessite trois langages differents.
j'ai un problème concernant le positionnement fixed en css. En effet, je me suis renseigné, et apparement ce positionnement marche sur internet explorer 7. J'ai également déjà fait des sites utilisant ce positionnement, et il marche, mais cette fois-ci, ça ne marche pas.
Voici le code de la feuille de style : (elle est générée en php)

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
.galerie_cache
	{
	position:fixed;
	z-index:100;
	top:0px;
	left:0px;
	background:url('./fond.png') repeat #999999;
	width:100%;
	height:100%;
	}
.galerie_image_apercu
	{
	position:fixed;
	z-index:200;
	top:50%;
	left:50%;
	border:#000000 1px solid;
	}

ainsi que le code javascript faisant apparaitre l'image qui doit etre positionnée en fixed :

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
function galerie()
	{
	this.afficher = function(nom,x,y)
		{
		cache = document.createElement('div');
		cache.className = 'galerie_cache';
		cache.id = 'galerie_cache';
		document.body.appendChild(cache);
		//alert(parseInt(cache.offsetWidth)+':'+parseInt(cache.offsetHeight));
		rapport_1 = x/parseInt(cache.offsetWidth);
		rapport_2 = y/parseInt(cache.offsetHeight);
		rapport = Math.max(rapport_1,rapport_2);
		if(rapport>1)//image trop grande
			{
			x = parseInt(x/rapport);
			y = parseInt(y/rapport);
			}
		image = document.createElement('img');
		image.src=nom;
		image.style.width=x+'px';
		image.style.height=y+'px';
		image.className = 'galerie_image_apercu';
		image.style.marginTop=-1*parseInt(y/2)+'px';
		image.style.marginLeft=-1*parseInt(x/2)+'px';
		cache.appendChild(image);
 
		}
	}
 
var photos = new galerie();

Enfin, voici le code de la page : (les noms de classe ont le prefixe galerie ajouté automatiquement, il est donc normal qu'ils soient un peu longs)

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
<html><head><title>Galerie</title>
<link rel="stylesheet" type="text/css" href="galerie.design.php" />
<script type="text/javascript" src="galerie.js.php" ></script>
</head>
<body>
<form action="galerie.php" enctype="multipart/form-data" method="post">
 
Titre : <input type="text" name="galerie[titre]"/><br />
photo : <input type="file" name="photo"/><br />
<input type="submit" name="galerie[submit]" value="valider"/><br /></form>
 
<div id="galerie_galerie">
<div class="item">
<h2>fleur</h2>
 
<div class="galerie_photo">
<img src="photos_min/1229896587.jpg" alt="fleur" onclick="photos.afficher('photos/1229896587.jpg',1000,750)" />
</div>
</div>
<div class="item">
<h2>lion</h2>
<div class="galerie_photo">
<img src="photos_min/1229883330.jpg" alt="lion" onclick="photos.afficher('photos/1229883330.jpg',1000,750)" />
</div>
</div>
<div class="item">
<h2>ordi</h2>
<div class="galerie_photo">
<img src="photos_min/1229963347.jpg" alt="ordi" onclick="photos.afficher('photos/1229963347.jpg',1000,750)" />
</div>
</div>
<div class="item">
<h2>tigre</h2>
<div class="galerie_photo">
<img src="photos_min/1229885320.jpg" alt="tigre" onclick="photos.afficher('photos/1229885320.jpg',1000,768)" />
</div>
</div>
</div>
</body>
</html>

Selon vous, pourquoi internet explorer 7 ne prend pas en compte le positionnement fixed dans cette page (alors qu'il est censé le faire) ? (la page fonctionne parfaitement sur firefox)

Merci d'avance

**E.Bzz** · 23/12/2008, 11h04

Bonjour,

Envoyé par blueskycorporation

Selon vous, pourquoi internet explorer 7 ne prend pas en compte le positionnement fixed dans cette page (alors qu'il est censé le faire) ? (la page fonctionne parfaitement sur firefox)

tout semblant correct (à première vue), as-tu essayé d'utiliser un autre nom que "image" ?
C'est un mauvais choix pour un nom de variable (déjà utilisé en JS), et ça peut poser problème à IE ...

A+

**blueskycorporation** · 23/12/2008, 11h42

Je viens de changer le nom de variable, et internet explorer ne comprend toujours pas le positionnement, tandis que Firefox affiche la page exactement comme avant.

**le_chomeur** · 23/12/2008, 13h15

va faire un tour ici :

http://xhtml.developpez.com/faq/?pag...ans_javascript

**blueskycorporation** · 23/12/2008, 14h22

merci,
j'avais aperçu cette technique, mais il me semblait qu'elle était nécessaire seulement pour internet explorer 6, le 7 prenant en charge le positionnement "fixed". Je voulais donc éviter de l'utiliser, en faveur de techniques plus générales. Apparemment, ce n'est pas possible, donc je vais faire comme dans le lien.

**le_chomeur** · 23/12/2008, 15h06

voici une mise a jour :

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
 
<style type="text/css">
	/*Pour ie7 , chrome , firefox	*/
	.fixed {
		position: fixed;
		left: 0; 
		top: 0; 
		right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
 
	</style>
 
 
	<!-- pour IE 6 -->
 
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
 
	.fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
 
	</style>
	<![endif]-->

:-)

positionnement dynamique d'un bloc

JavaScript

Discussions similaires

Partager

Partager