Page 1 sur 1
Mettre un DIV toujours en plein milieu de l'écran
Publié : 04 oct. 2006, 17:10
par guilhem_mdg
Bonjour,
Ma question est simple :
Je souhaite avoir
toujours en plein milieu de mon écran. Et ce même si l'utilisateur scrolle...
Est-ce possible ?
Si oui, comment ?
Merci !!!
[/code]
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 04 oct. 2006, 23:23
par Benoit
Ne fonctionne pas sous IE <7.0
Publié : 05 oct. 2006, 08:51
par Kazé
On peut émuler le "position: fixed" en javascript pour IE 5 et 6.
Par exemple,
sur mon site, je m'en sers pour fixer un bandeau en haut de page :
Code : Tout sélectionner
body {
background: url(null) fixed ;
}
#header {
position: absolute;
top:expression(documentElement.scrollTop+body.scrollTop);
}
Par contre, pour ce qui est de centrer un <div> verticalement, aucune idée...
Publié : 05 oct. 2006, 08:57
par calimo
Je n'aurai qu'un mot (un lien en fait) :
http://css.alsacreations.com/Faire-une- ... web-en-CSS 
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 05 oct. 2006, 09:45
par guilhem_mdg
Calimo merci de ta réponse mais cela ne marche pas sous IE...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 05 oct. 2006, 09:55
par guilhem_mdg
Je crois que je viens de trouver une réponse. Qu'en pensez-vous ?
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#popup{
border:1px solid #000000;
width:700px;
height:400px;
position:fixed;
left:50%;
top:50%;
margin-top:-200px;/* 1/2 hauteur */
margin-left:-350px;/* 1/2 largeur */
/* Hack IE */
_position:absolute;
_top:expression(documentElement.scrollTop+body.scrollTop+document.documentElement.clientHeight/2);
}
</style>
</head>
<body>
<p id="popup">Mon texte 1...</p>
<?php for($i=1;$i<100;$i++) echo "Bla...<br />";?>
</body>
</html>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 05 oct. 2006, 14:11
par calimo
guilhem_mdg a écrit :Calimo merci de ta réponse mais cela ne marche pas sous IE...
Tu es bien gentil guilhem_mdg, mais tu sais très bien ce que vaux IE
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 05 oct. 2006, 14:48
par guilhem_mdg
Calimo,
Oui, je sais qu'IE a du mal à respecter les standarts mais développer une application web ne doit pas délaisser les internautes possédant ce navigateur. Il faut donc (malheureusement) faire avec.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Publié : 06 oct. 2006, 08:19
par Benoit
guilhem_mdg a écrit :Je crois que je viens de trouver une réponse. Qu'en pensez-vous ?
Que tu devrais utiliser un commentaire conditionnel plutôt qu'un "hack" CSS.
Publié : 06 oct. 2006, 10:15
par guilhem_mdg
Comme ça ?
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#popup{
border:1px solid #000000;
width:700px;
height:400px;
position:fixed;
left:50%;
top:50%;
margin-top:-200px;/* 1/2 hauteur */
margin-left:-350px;/* 1/2 largeur */
}
</style>
<!--[if IE]>
<style>
#popup{
position:absolute;
top:expression(documentElement.scrollTop+body.scrollTop+document.documentElement.clientHeight/2);
}
</style>
<![endif]-->
</head>
<body>
<p id="popup" style="display:none;" onclick="this.style.display='none';">Mon texte 1...</p>
<?php
for($i=1;$i<100;$i++){
?>
<p onclick="document.getElementById('popup').style.display='block';">Bla...<br />
<?php
}
?>
</body>
</html>
Publié : 06 oct. 2006, 21:50
par Benoit
Oui, et même un "lte 6" sur la version d'IE, si tu vois que ça fonctionne sans sous IE7
