[HTML] centrer un DIV sur l'écran

Version imprimable

02/09/2008, 19h17
FredericB

[HTML] centrer un DIV sur l'écran
Bonjour,

J'ai un problème pour centrer mon DIV.
J'utilise le code suivant pour centrer un DIV que j'affiche quand je clique sur un bouton (en fait mon DIV contient un formulaire):
Code:

1 2 3 4 5 6 7 8 9 10 #monDiv { position:absolute; left: 50%; top: 50%; width: 700px; height: 400px; margin-top: -200px; margin-left: -350px; }
Ce code marche très bien sur une page qui a la taille de l'écran, mais quand ma page est plus grande que mon écran (donc utilisation du scrollbar vertical), et que je descend au bas de ma page, et que je clique sur mon bouton pour afficher le DIV centré, ce DIV n'est plus centré sur mon écran. Il apparait plus haut sur ma page.
Donc ma question est:
Comment faire apparaitre mon DIV centré par rapport à l'écran, même si ma page est plus grande que l'écran ?

Merci d'avance pour vos aides.
Fred
02/09/2008, 21h23
blueice

Sans code HTML ca va être dur, tu fais quoi ?
Une ancre html pour remonter ?
02/09/2008, 21h44
FredericB

salut,

non, je remonte ma page pour accéder à mon DIV (quand je clique sur mon bouton, je met ce DIV en visible) avec le scrollbar.

Pour l'instant je me suis dépanné en affichant le DIV à la position de la souris, comme ça plus de problème avec la hauteur de la page.

Mais j'aimerais quand même pouvoir afficher au centre de l'écran un DIV, même si la hauteur de ma page est plus grande que celle de l'écran.

Merci
03/09/2008, 02h23
Ksual

le positionnement est gérée par le navigateur et non par l'écran, l'écran affiche ce que le navigateur rend, et ton code est le bon.

autrement: http://www.ajaxrain.com/tagcloud.php?tag=popup#script 8-)
03/09/2008, 08h21
blueice

Pourquoi ne pas utiliser une greybox ?
Tu peux charger une autre page qui sera centrée.
03/09/2008, 15h13
goundoulf

il y a plusieurs façons de centrer, notamment les marges négatives, mais ça dépend de tes contraintes :)
03/09/2008, 19h06
FredericB

Bonjour,

Mon DIV contient un formulaire. Quand je clique sur mon bouton, je passe des valeurs dans mes inputs de mon formulaire.
Effectivement une greybox serait la bienvenue. Mais j'ai regardé les exemple avec vos liens, apparement c'est une page html qui est affiché dans la greybox.

Est-il possible de mettre seulement mon formulaire dans une greybox en passant mes valeurs dans les input, comme si il était sur la même page?

Merci
03/09/2008, 19h20
blueice

Tu devrais voir pour utiliser une ancre ce serait plus simple, tu donnes un id à ta div si ce n'est pas déjà fait et tu fais un bouton/lien quand on clique dessus on est amené à la div (pour éventuellement ne voir que la div, suffit d'utiliser le redimensionnement en JS
09/09/2008, 16h11
Helfima
ton positionnement de div est fixe hors quand tu scroll ben ta div est toujours positionnées par rapport au haut de ta page et non de ton affichage.
pour faire un centrage sur l'ecran il est nécessaire d'utiliser du javascript pour repositionner ta div en conséquence

il faut pour cela recupérer
1. la position des scroll
2. la taille de ton affichage
3. la taille de ta div
et ensuite tu calcul la positionde ta div
autant dire que c'est chiant a mon avis oriente toi sur un truc existant en jquery ou autre

C'est possible uniquement en CSS et c'est plus fluide qu'avec JS.
Pour que ça fonctionne aussi avec les scrollbars, il faut utiliser position=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
<style type="text/css">
 
body {
margin: 0;
padding: 0;
height: 2000px;
width: 2000px;
}
 
#global {
position: fixed;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px; /* moitié de la hauteur */
margin-left: -100px; /* moitié de la largeur */
border: 1px solid #333;
background-color: #eee;
}
</style>
</head>
 
<body>
<div id="global">
<p>Ici le contenu</p>
</div>
</body>
 
</html>

J'ai oublié, le doctype est important. Testé avec :

Code:

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

15/09/2008, 21h03
FredericB

Salut,

Merci Sub0, ca marche super bien.:D