positionnement dynamique d'un bloc
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:
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:
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:
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
