Centrer un <div> dans la !! fenêtre !!
Résolu/Fermé
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
-
15 janv. 2009 à 14:31
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 15 janv. 2009 à 17:34
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 15 janv. 2009 à 17:34
A voir également:
- Centrer un <div> dans la !! fenêtre !!
- Fenêtre hors écran windows 11 - Guide
- Raccourci réduire fenetre - Guide
- Fenêtre - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
- Div c++ - Télécharger - Langages
13 réponses
salut,
je ne suis pas sur d'avoir bien compris mais je tente.. :D
se que tu peux faire c'est de le positioné en absolute et de lui donné une taill relative (%) et de faire la difference
exemple:
car: 100-20 = 80 ---- 80 / 2 = 40;
sinon ta toujour la position fixed mais elle ne fonctione pas sur IE
pour fini il y a aussi javascript qui peut le faire
par exemple:
html
Javascript
voila j'ai pas testé mais sa devrai allez c'est fait un peu a larache
pazz
je ne suis pas sur d'avoir bien compris mais je tente.. :D
se que tu peux faire c'est de le positioné en absolute et de lui donné une taill relative (%) et de faire la difference
exemple:
#div_fix{
position: absolute;
left:40%;
top:40%;
height:20%;
width:20%;
}
car: 100-20 = 80 ---- 80 / 2 = 40;
sinon ta toujour la position fixed mais elle ne fonctione pas sur IE
pour fini il y a aussi javascript qui peut le faire
par exemple:
html
....
<body onload="PositionFix('div_fix')>
<div id="contenu">
<div id="div_fix" style="position:absolute;"></div>
</div>
</body>
....
Javascript
function PositionFix(id){
var OBJ=document.getElementById;
var Wco=OBJ(id).offsetWidth;
var Wfix=OBJ('div_fix').offsetWidth;
var Hfix=OBJ('div_fix').offsetHeight;
OBJ('div_fix').style.left=Wco/2-Wfix/2
OBJ('div_fix').style.top=document.body.offsetHeight/2-Hfix/2;
}
voila j'ai pas testé mais sa devrai allez c'est fait un peu a larache
pazz
voila comme sa
je texplique le calcule ,
tu a le dic conteneur qui va contenir ton div_fix, on va l'appeler "X"
Pour centrer div_fix il nous faut connaitre le centre de "X" donc la largeur de X / 2
pui ensuite il nous faut aussi connaitre le centre de div_fix donc la meme chose, div_fix.offsetWidth/2
et pour finir il faut simplement faire la moitier de X moi la moitié de div_fix
----- > OBJ('div_fix').style.left=Wco/2-Wfix/2+"px";
et tu procède de la meme manière pour le top sauf que la jai pris la tail de la fenetre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>centrer ds la fenetre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#conten{
width:100%;
}
#div_fix{
position: absolute;
top:0px;
left:0px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function PositionFix(id){
var OBJ=document.getElementById;
var Wco=OBJ(id).offsetWidth; // ligne 21
var Wfix=OBJ('div_fix').offsetWidth;
var Hfix=OBJ('div_fix').offsetHeight;
OBJ('div_fix').style.left=Wco/2-Wfix/2+"px";
OBJ('div_fix').style.top=document.body.offsetHeight/2-Hfix/2+"px";
alert(Wco);
}
</script>
</head>
<body onload="PositionFix('contenu');">
<div id="contenu">
<div id="div_fix">test</div>
</div>
<p>plein de blabla pour forcer le scroll</p>
</body>
</html>¨
je texplique le calcule ,
tu a le dic conteneur qui va contenir ton div_fix, on va l'appeler "X"
Pour centrer div_fix il nous faut connaitre le centre de "X" donc la largeur de X / 2
pui ensuite il nous faut aussi connaitre le centre de div_fix donc la meme chose, div_fix.offsetWidth/2
et pour finir il faut simplement faire la moitier de X moi la moitié de div_fix
----- > OBJ('div_fix').style.left=Wco/2-Wfix/2+"px";
et tu procède de la meme manière pour le top sauf que la jai pris la tail de la fenetre
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 15:29
15 janv. 2009 à 15:29
Salut Pazz.
La réponse que tu me fais là me paraît très intéressante.
Je me doutais bien que j'aurais besoin de javascript.
Mais on dirait qu'il reste un petit bug dans ton code, que je n'arrive pas à identifier. (Il faut dire que vu mon niveau, un script donnée "à l'arrache", c'est encore tout un casse-tête).
Voilà ce que me rapporte la console d'erreur de Firefox :
Erreur : uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://localhost/centrer-un-div.htm :: PositionFix :: line 21" data: no]
La ligne 21, dans ma page, c'est : var Wco=OBJ(id).offsetWidth;
Je sais pas trop quoi faire de cette erreur... Est-ce que tu pourrais m'éclairer là encore ?
Je te redonne le code de ma page, un peu moins "à l'arrache", pour que tu puisses repérer le genre d'erreur que j'aurais pu faire :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>centrer ds la fenetre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div_fix{
position: absolute;
left:40%;
top:40%;
height:20%;
width:20%;
}
</style>
<script type="text/javascript">
function PositionFix(id){
var OBJ=document.getElementById;
var Wco=OBJ(id).offsetWidth; // ligne 21
var Wfix=OBJ(id).offsetWidth;
var Hfix=OBJ(id).offsetHeight;
OBJ(id).style.left=Wco/2-Wfix/2;
OBJ(id).style.top=document.body.offsetHeight/2-Hfix/2;
}
</script>
</head>
<body onload="PositionFix('div_fix');">
<div id="contenu">
<div id="div_fix" style="position:absolute; border:1px solid red;">test</div>
</div>
<p>plein de blabla pour forcer le scroll</p>
</body>
</html>
La réponse que tu me fais là me paraît très intéressante.
Je me doutais bien que j'aurais besoin de javascript.
Mais on dirait qu'il reste un petit bug dans ton code, que je n'arrive pas à identifier. (Il faut dire que vu mon niveau, un script donnée "à l'arrache", c'est encore tout un casse-tête).
Voilà ce que me rapporte la console d'erreur de Firefox :
Erreur : uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://localhost/centrer-un-div.htm :: PositionFix :: line 21" data: no]
La ligne 21, dans ma page, c'est : var Wco=OBJ(id).offsetWidth;
Je sais pas trop quoi faire de cette erreur... Est-ce que tu pourrais m'éclairer là encore ?
Je te redonne le code de ma page, un peu moins "à l'arrache", pour que tu puisses repérer le genre d'erreur que j'aurais pu faire :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>centrer ds la fenetre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div_fix{
position: absolute;
left:40%;
top:40%;
height:20%;
width:20%;
}
</style>
<script type="text/javascript">
function PositionFix(id){
var OBJ=document.getElementById;
var Wco=OBJ(id).offsetWidth; // ligne 21
var Wfix=OBJ(id).offsetWidth;
var Hfix=OBJ(id).offsetHeight;
OBJ(id).style.left=Wco/2-Wfix/2;
OBJ(id).style.top=document.body.offsetHeight/2-Hfix/2;
}
</script>
</head>
<body onload="PositionFix('div_fix');">
<div id="contenu">
<div id="div_fix" style="position:absolute; border:1px solid red;">test</div>
</div>
<p>plein de blabla pour forcer le scroll</p>
</body>
</html>
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 15:57
15 janv. 2009 à 15:57
Déso, mais même en copiant-collant le code que tu viens de me donner, ça ne marche pas.
C'est toujours la même ligne qui buggue.
J'ai bien corrigé la faute de frappe (à une autre ligne) dans " #conten{ " mais comme je m'y attendais ça ne vient pas de là.
Est-ce que ça marche chez toi ?
C'est toujours la même ligne qui buggue.
J'ai bien corrigé la faute de frappe (à une autre ligne) dans " #conten{ " mais comme je m'y attendais ça ne vient pas de là.
Est-ce que ça marche chez toi ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
15 janv. 2009 à 16:07
15 janv. 2009 à 16:07
Mais qu est ce que tu veux faire ??
je t avoue ne pas comprendre ? tu veux que la page s ouvre toujours au milieu ?? c est a dire que si ta page fais 4OOOpx de haut tu veux qu elle s ouvre a 2000px du top ! ?????????????????? c est etrange ?
je t avoue ne pas comprendre ? tu veux que la page s ouvre toujours au milieu ?? c est a dire que si ta page fais 4OOOpx de haut tu veux qu elle s ouvre a 2000px du top ! ?????????????????? c est etrange ?
sur IE il me met aucune faute .. mais je peut pas test sur FF je les pas sous la main mais essaie de remplacer offsetWidth et offsetHeight par clientHeight et clientWidth
re
sa pourait aussi venir de sa:
var OBJ=document.getElementById;
donc remplace les OBJ par Document.getElementById(id)....... et enlève le var OBJ=document.getElementById;
voila
pazz
sa pourait aussi venir de sa:
var OBJ=document.getElementById;
donc remplace les OBJ par Document.getElementById(id)....... et enlève le var OBJ=document.getElementById;
voila
pazz
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 16:30
15 janv. 2009 à 16:30
Ah bah oui, tiens comme ça ça règle le bug.
Par contre
le résultat est assez rigolo
mais c'est pas ce que je cherchais à faire ! :)
Est-ce que l'explication que j'ai donnée à Rad Zone te paraît plus claire ?
Par contre
le résultat est assez rigolo
mais c'est pas ce que je cherchais à faire ! :)
Est-ce que l'explication que j'ai donnée à Rad Zone te paraît plus claire ?
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 16:25
15 janv. 2009 à 16:25
Pazz,
avec clientHeight ça n'a pas l'air de marcher mieux sous Firefox...
Je viens d'essayer sous IE. Le code à l'air de s'exécuter (avec offsetHeight), puisque l'alert() se déclenche, mais le div semble ne pas répondre quand je scroll, ni même quand je redimentionne ma fenêtre.
Rad Zone,
merci de t'intéresser aussi à mon petit souci.
Mon idée c'est de centrer mon div non pas par rapport aux 4000px de haut de la page, mais par rapport aux 600px de haut de ma fenêtre, de telle manière qu'il reste visible quand je lis les premières lignes de ma page aussi bien que quand je lis les dernières lignes.
Est-ce que c'est plus clair ? (Et si ça l'est, est-ce que tu sais comment faire ?)
Pazz,
En répondant à Rad Zone je me rends compte que je ne me suis peut-être pas bien fait comprendre de toi non plus.
Est-ce que le code que tu me propose permet de garder le div au milieu de la fenêtre même quand on fait défiler la page ?
avec clientHeight ça n'a pas l'air de marcher mieux sous Firefox...
Je viens d'essayer sous IE. Le code à l'air de s'exécuter (avec offsetHeight), puisque l'alert() se déclenche, mais le div semble ne pas répondre quand je scroll, ni même quand je redimentionne ma fenêtre.
Rad Zone,
merci de t'intéresser aussi à mon petit souci.
Mon idée c'est de centrer mon div non pas par rapport aux 4000px de haut de la page, mais par rapport aux 600px de haut de ma fenêtre, de telle manière qu'il reste visible quand je lis les premières lignes de ma page aussi bien que quand je lis les dernières lignes.
Est-ce que c'est plus clair ? (Et si ça l'est, est-ce que tu sais comment faire ?)
Pazz,
En répondant à Rad Zone je me rends compte que je ne me suis peut-être pas bien fait comprendre de toi non plus.
Est-ce que le code que tu me propose permet de garder le div au milieu de la fenêtre même quand on fait défiler la page ?
oui grace a position absolute mais il ne faut pas que contenu soi aussi en position absolute.
pour que sa marche lorsque tu resize la fenetre il te faut soi le faire en relative donc la premiere solution
exemple:
div_fix{
position:absolute;
top:20%;
left20%;
height:60%;
width60%;
}
100-60 = 40
40 / 2 = 20;
sinon avec javascript tu utilise onresize dans body "<body onresize="ta fonction()">
j'ai fait des correction sur le script peut être qu'il marchera redi moi
pour que sa marche lorsque tu resize la fenetre il te faut soi le faire en relative donc la premiere solution
exemple:
div_fix{
position:absolute;
top:20%;
left20%;
height:60%;
width60%;
}
100-60 = 40
40 / 2 = 20;
sinon avec javascript tu utilise onresize dans body "<body onresize="ta fonction()">
j'ai fait des correction sur le script peut être qu'il marchera redi moi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>centrer ds la fenetre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#contenu{
width:100%;
}
#div_fix{
position: absolute;
top:0px;
left:0px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function PositionFix(){
var Wco=document.body.clientWidth; // ligne 21
var Wfix=document.getElementById('div_fix').clientWidth;
var Hfix=document.getElementById('div_fix').clientHeight;
document.getElementById('div_fix').style.left=Wco/2-Wfix/2+"px";
document.getElementById('div_fix').style.top=document.body.clientHeight/2-Hfix/2+"px";
}
</script>
</head>
<body onload="PositionFix();" onresize="PositionFix();">
<div id="contenu">
<div id="div_fix">test</div>
</div>
<p>plein de blabla pour forcer le scroll</p>
</body>
</html>
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
15 janv. 2009 à 16:44
15 janv. 2009 à 16:44
c est ca que tu veux en gros ! ?
exemple fausse frame en css
exemple fausse frame en css
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 17:11
15 janv. 2009 à 17:11
Non.
Le lien que tu me donnes est intéressant. Il m'est en effet déjà arrivé de chercher à faire ça.
Mais ça n'est pas ce que je recherche aujourd'hui.
Alors je vais essayer de m'expliquer autrement :
Tu vois comment se positionne une alerte javascript de type : alert('blabla');
Dans un blog, que tu sois en train de lire le premier ou le dernier post de la page, ce genre d'alerte prendra toujours place au milieu de la fenêtre. C'est je genre de positionnement que je recherche.
Mais j'ai aussi besoin que quand on tourne la roulette de la souris, mon <div> se repositionne au fur et à mesure, pour rester toujours au milieu de la fenêtre. (C'est la différence avec une alert javascript, qui empêche de faire défiler la page avec la souris).
Est-ce que je suis clair ce coup-ci ?
Le lien que tu me donnes est intéressant. Il m'est en effet déjà arrivé de chercher à faire ça.
Mais ça n'est pas ce que je recherche aujourd'hui.
Alors je vais essayer de m'expliquer autrement :
Tu vois comment se positionne une alerte javascript de type : alert('blabla');
Dans un blog, que tu sois en train de lire le premier ou le dernier post de la page, ce genre d'alerte prendra toujours place au milieu de la fenêtre. C'est je genre de positionnement que je recherche.
Mais j'ai aussi besoin que quand on tourne la roulette de la souris, mon <div> se repositionne au fur et à mesure, pour rester toujours au milieu de la fenêtre. (C'est la différence avec une alert javascript, qui empêche de faire défiler la page avec la souris).
Est-ce que je suis clair ce coup-ci ?
juanou
Messages postés
137
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
23 août 2013
58
15 janv. 2009 à 17:31
15 janv. 2009 à 17:31
Je crois que j'ai trouvé ce que je cherchais.
Je dois partir dans une minute alors je prends pas le temps de regarder de plus prêt.
Mais cette fois je crois que c'est la bonne.
Je donne le lien :
* pour Pazz et Rad Zone, afin qu'ils voient enfin ce que je voulais dire. Merci à vous, et désolé de ne pas avoir su mieux me faire comprendre.
* pour tout ceux que ça intéresse.
http://slayeroffice.com/code/custom_alert/
à plus
ps :
Bon, en fait c'est pas parfait parce que j'aurais aimé que ça réagisse autrement au redimensionnement de la fenêtre. Mais le plus important c'était la réaction au scroll.
Avec ça plus lles codes que vous m'avez donné, Pazz et Rad Zone, j'arriverais peut-être à avoir tout à fait ce que je recherche.
Merci encore
Je dois partir dans une minute alors je prends pas le temps de regarder de plus prêt.
Mais cette fois je crois que c'est la bonne.
Je donne le lien :
* pour Pazz et Rad Zone, afin qu'ils voient enfin ce que je voulais dire. Merci à vous, et désolé de ne pas avoir su mieux me faire comprendre.
* pour tout ceux que ça intéresse.
http://slayeroffice.com/code/custom_alert/
à plus
ps :
Bon, en fait c'est pas parfait parce que j'aurais aimé que ça réagisse autrement au redimensionnement de la fenêtre. Mais le plus important c'était la réaction au scroll.
Avec ça plus lles codes que vous m'avez donné, Pazz et Rad Zone, j'arriverais peut-être à avoir tout à fait ce que je recherche.
Merci encore
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
15 janv. 2009 à 17:34
15 janv. 2009 à 17:34
looool a bas oui !!
si tu avais directement demander comment customiser une alert ca aurais ete plus simple !! ;-))
A+
si tu avais directement demander comment customiser une alert ca aurais ete plus simple !! ;-))
A+
