|
|
|
|
Salut.
Comme le dit le titre de mon message, je chercher à centrer un bloc <div> dans la fenêtre de mon navigateur.
Après quelques recherches, j'ai bien réussi à trouver un début de réponse, qui me permet de centrer ma balise dans la page plutôt que dans la fenêtre.
( voir : http://css.alsacreations.com/... pour le tuto, et http://css.alsacreations.com/xmedia/exemples/centrer/csscentrer.htm pour l'exemple )
C'est déjà pas mal, mais ce qui me manque dans ce script css, c'est le moyen de garder mon <div> au milieu de ma fenêtre quand le contenu de la page est assez long et implique de "scroller" vers le bas pour tout lire (comme c'est le cas dans un blog, par exemple.)
Quelqu'un sait-il comment s'y prendre ??
Configuration: Windows XP Firefox 3.0.5
Salut,
#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 |
Salut Pazz.
|
Voila comme sa
<!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 |
Mais qu est ce que tu veux faire ??
|
Pazz,
|
Oui grace a position absolute mais il ne faut pas que contenu soi aussi en position absolute.
<!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>
|
C est ca que tu veux en gros ! ?
|
Je crois que j'ai trouvé ce que je cherchais.
|
Centre de service sms sfr Centrer div absolute Centrer div resolution ecran Centrer une div navigateur Centrer une image css Comment ajuster les fenêtres windows 7 Comment supprimer les fenetres publicitaires Css centrer div Dvd ezmaker usb gold voir dans une fenetre Fenêtre de confirmation de suppression php forum Fichiers div Firefox a rencontré un problème et a planté. nous essaierons de restaurer vos onglets et fenêtres lors de son redémarrage Gestionnaire de fenêtrage désactivé Image au centre de la fenetre css Image au centre de la fenetre du navigateur css Impossible de démarrer microsoft office outlook. impossible d'ouvrir la fenêtre outlook Probleme d'espace debut une page php pas centrer Www.ca-centreloire.fr
