Mettre un DIV toujours en plein milieu de l'écran

guilhem_mdg · Message par **guilhem_mdg** » 04 oct. 2006, 17:10

Bonjour,
Ma question est simple :
Je souhaite avoir

<div id="mondiv">Mon texte</div>

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

Message par **Benoit** » 04 oct. 2006, 23:23

Code : Tout sélectionner

position:fixed

Ne fonctionne pas sous IE <7.0

Kazé · Message par **Kazé** » 05 oct. 2006, 08:51

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...

calimo · Message par **calimo** » 05 oct. 2006, 08:57

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

guilhem_mdg · Message par **guilhem_mdg** » 05 oct. 2006, 09:45

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

guilhem_mdg · Message par **guilhem_mdg** » 05 oct. 2006, 09:55

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

calimo · Message par **calimo** » 05 oct. 2006, 14:11

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

guilhem_mdg · Message par **guilhem_mdg** » 05 oct. 2006, 14:48

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

Message par **Benoit** » 06 oct. 2006, 08:19

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.

guilhem_mdg · Message par **guilhem_mdg** » 06 oct. 2006, 10:15

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>

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

Message par **Benoit** » 06 oct. 2006, 21:50

Oui, et même un "lte 6" sur la version d'IE, si tu vois que ça fonctionne sans sous IE7

Geckozone

Mettre un DIV toujours en plein milieu de l'écran

Mettre un DIV toujours en plein milieu de l'écran

Qui est en ligne ?