[POO] Placer un objet au centre de l'ecran meme avec scrollbar

**le_chomeur** · 30/05/2008, 16h29

et pourquoi pas une position fixed ?????

**SpaceFrog** · 30/05/2008, 16h33

c'est crossbrowser ça ?

**le_chomeur** · 30/05/2008, 16h44

oui ie6 /7 / FF /SAFARI & co ^^
voir contribution des css

**SpaceFrog** · 30/05/2008, 16h48

mais à priori ça ne répond pas à son attente ???
enfin d'après ce que j'ai compris, il ne cherche pas une div flottant, mais juste à centrer le div dans l'écran

**identifiant_bidon** · 30/05/2008, 16h50

C'est désespérant, j'ai essayé avec position a fixed mais la div s'affiche toujours tout en bas de ma page

**identifiant_bidon** · 30/05/2008, 16h52

Envoyé par SpaceFrog

mais à priori ça ne répond pas à son attente ???
enfin d'après ce que j'ai compris, il ne cherche pas une div flottant, mais juste à centrer le div dans l'écran

oui c'est tout ce que je veux

**le_chomeur** · 30/05/2008, 16h55

heu oui mais qu'elle soit tout le temps centrée ?
donc fixed répond a la problématique ....

de plus si ton objet apparait tout en bas , cela veut dire qu'il est a l'intérieur d'un élément qui lui n'a pas les bonne propriété , montre nous le code complet

**tusssss** · 30/05/2008, 17h06

Envoyé par le_chomeur

heu oui mais qu'elle soit tout le temps centrée ?
donc fixed répond a la problématique ....

de plus si ton objet apparait tout en bas , cela veut dire qu'il est a l'intérieur d'un élément qui lui n'a pas les bonne propriété , montre nous le code complet

Si quelque soit la méthode utilisée, le div apparait en bas, en effet, l'erreur doit surement venir du div conteneur de celui-ci.

**SpaceFrog** · 30/05/2008, 17h17

qu'entends tu par en bas de page ??? les scrollbars sont à fond en bas et le div est collé au bas de la page ou il y a encore du scroll vertical en dessous ?

**le_chomeur** · 30/05/2008, 17h18

haaa j'me sens moins seul d'un tout d'un seul

**SpaceFrog** · 30/05/2008, 17h31

peut être un début d'eclaircissement :

Code :

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

1
2
3
4
5
<body style="height:2000;width:2000;overflow:auto">
 
<div style="position:absolute;top:1000;left:1000;width:200;height:200;background-color:red">&nbsp;</div>
 
</body>

et du coup il faut mettre un div fake en bas à gauche:

Code :

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

1
2
3
4
5
6
<body style="height:2000;width:2000;overflow:auto">
 
<div style="position:absolute;top:1000px;left:1000px;width:200;height:200;background-color:red">&nbsp;</div>
<div style="position:absolute;top:2000;left:2000;width:1px;height:1px;">&nbsp;</div>
 
</body>

**cyrilskof** · 29/10/2008, 20h01

Ayant le même problème, je suis trés proche de la réponse, il me manque juste une donnée :
Comment obtenir le scrollTop du navigateur ?

Je m'explique : lorsqu'on scroll une page web vers le bas, il y a une valeur de scroll ( par exemple : 500 px du haut du document).

J'ai essayé avec la fonction :
document.scrollTop ou encore document.body.scrollTop mais ça ne fonctionne pas.

Une idée???

**cyrilskof** · 29/10/2008, 20h28

Bon voilà, aprés de nombreuses recherches je suis arrivé à faire quelquechose qui fonctionne assez correctement :

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
 
 var largeur = 800; // largeur du div a afficher
     var hauteur = 600;	 // hauteur du div
	 var top=0; // initialisation
 
		if (navigator.appName == "Microsoft Internet Explorer") // si c'est MIE 
                {
                top=((screen.availHeight-  hauteur)/2) +document.body['scrollTop']; // on calcul la marge du haut : 
				}
            else
                {				
				top=((screen.availHeight-hauteur)/2)+window.pageYOffset;  /// autre methode pour ! de IE
                }
var left=(screen.width-largeur)/2; /// marge gauche
 
cadre.set('margin-top', top); /// on affect le style à l'element souhaité (div)
		cadre.set('margin-left', left);

Voilà j'espère que ça pourra en aider certains.

Au fait pour le css :

Code :

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

1
2
position: absolute;
z-index:200;

++

**Sub0** · 29/10/2008, 21h40

Salut!

Je n'ai pas lu le sujet en entier, je ne sais pas si votre problème est maintenant résolu...
J'ai réalisé ceci sous Firefox si ça peut vous aider (sait-on jamais) :

http://sub0.developpez.com/html/popup.htm

A+

[POO] Placer un objet au centre de l'ecran meme avec scrollbar

JavaScript

Discussions similaires

Partager

Partager