placer un bloc à une hauteur qui dépend de résolution écran

**NoSmoking** · 20/05/2011, 00h16

je confirme bien évidement ce qui est dit
Ca plante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var top = 50;
// ICI cela ne marche pas BODY n'est pas encore defini
document.body.innerHTML += '<div style="position:absolute;top:' +top +'%">ICI<\/div>'
</script>
</head>
<body>
</body>
</html>

Ca marche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var top = 50;
// ICI cela marche BODY est defini
document.body.innerHTML += '<div style="position:absolute; top:'+top +'%">ICI<\/div>'
</script>
</body>
</html>

ou encore

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.createElement('DIV');
  oDiv.style.position = 'absolute';
  oDiv.style.top = '50%';
  var oTxt = document.createTextNode('ICI');
  oDiv.appendChild( oTxt);
  document.body.appendChild( oDiv);
}
</script>
</head>
<body>
</body>
</html>

**laurentSc** · 20/05/2011, 00h36

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>test</title>
 
 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 
</head>
 
 
<body>
 
<script type="text/javascript"> var top, res = screen.height;
alert(res);
switch(res) {
case 800 :
top = 20; alert('ici');
break;
default :
top = 60;
break;
}
document.body.innerHTML +='<div style="position: absolute; top:'+top+ '%">';
</script>
<p>coucou</p>
</div>
 
</body>
</html>

En théorie, ça devrait donc marcher...Et ben, non...

**Watilin** · 20/05/2011, 01h05

En fait, qu'est-ce que c'est censé faire pour marcher ? Ta div doit-elle contenir quelque chose ? À quoi correspond le </div> de la ligne 27 ?

**Watilin** · 20/05/2011, 01h13

Encore autre chose : c'est à mon avis plus intéressant de regarder la taille de la fenêtre plutôt que la taille de l'écran, car la barre des tâches, les bords de la fenêtre, les différentes barres d'outils et que-sais-je-encore réduisent la partie visible de ta page.

Le problème c'est que les navigateurs ont chacun leur avis là-dessus (un aperçu du bordel). Pour simplifier les choses, on va déjà mettre ta page en mode standard. Sous Firefox, fais clic-droit > informations sur la page, tu verras cette ligne :

Mode de rendu : Mode de compatibilité (quirks)

C'est parce que ton DOCTYPE n'est pas complet. Utilise celui-ci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

Avec ta page en mode standard, il ne reste plus que deux cas. Dans le cas le plus courant, on a accès à la variable window.innerHeight. Si celle-ci n'est pas définie, on se rabat sur les versions 6 à 8 d'IE qui utilisent document.documentElement.clientHeight. Ce qui donne un bout de code à peine plus long :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var top, res;
if (window.innerHeight) {
	res = window.innerHeight;
} else {
	res = document.documentElement.clientHeight;
}

À ma connaissance, les seuls navigateurs qui passent à la trappe sont IE4 et 5, mais avec de tels ancêtres, connaître la hauteur de la fenêtre est le cadet de nos soucis

**laurentSc** · 20/05/2011, 18h04

À quoi correspond le </div> de la ligne 27 ?

Vu que la div est ouverte ligne 24, il vaut mieux la refermer...

En fait, qu'est-ce que c'est censé faire pour marcher ?

que la div soit bien à la position verticale donnée par la variable js top.

c'est à mon avis plus intéressant de regarder la taille de la fenêtre plutôt que la taille de l'écran

Mon idée est de placer un truc (un pied de page) en bas de le fenêtre, sachant que la mise en page est "cradement" faite avec des tables html, et donc que si le contenu de la page est tout petit, cela remonte le pied de page ; donc même si la mise en page est crade (elle est faite par l'outil générateur de site web utilisé), utiliser une div placée verticalement uniquement en fonction de la taille de la page devrait placer le pied de page là où il faut. (L'idée tient-elle la route ?)

**laurentSc** · 20/05/2011, 18h09

Je viens de coder ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var top, res;
if (window.innerHeight) {
res = window.innerHeight;
} else {
res = document.documentElement.clientHeight;
} 
alert(res);

et le alert(res) donne 0...

**laurentSc** · 20/05/2011, 22h00

Ca marche comme il faut en reprenant le code de NoSmoking :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
var top, res;
if (window.innerHeight) {
res = window.innerHeight;
} else {
res = document.documentElement.clientHeight;
}
//res=screen.height;
alert(res);
switch(res) {
case 800 :
top = 150; alert('ici');
break;
default :
top = 260;
break;
}
window.onload = function(){
var oDiv = document.createElement('DIV');
oDiv.style.position = 'absolute';
oDiv.style.top = top;
var oTxt = document.createTextNode('coucou');
oDiv.appendChild( oTxt);
document.body.appendChild( oDiv);
}
</script>

mais juste avec la hauteur de l'écran, pas celle de la fenêtre : qu'est-ce qui ne va pas ?

**Watilin** · 23/05/2011, 17h01

Envoyé par laurentSc

et le alert(res) donne 0...

Tu as bien mis le DOCTYPE que je t'ai donné ?

Envoyé par laurentSc

Vu que la div est ouverte ligne 24, il vaut mieux la refermer...

Ah ok, j'ai compris sur quoi on se comprenait pas

En fait, la <div> de la ligne 24 est bel et bien fermée. Je t'ai déjà parlé de la console F12, regarde l'onglet HTML : tu vois le DOM, la représentation arborescente des éléments de la page. Le innerHTML ne fait rien de plus qu'insérer des objets dans le DOM, et pour ça, il doit refermer les balises qui sont laissées ouvertes.

Envoyé par laurentSc

utiliser une div placée verticalement uniquement en fonction de la taille de la page devrait placer le pied de page là où il faut. (L'idée tient-elle la route ?)

Oui, elle est tout à fait pertinente. Cependant, il y a beaucoup plus simple : la propriété CSS bottom

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS bottom</title>
<link rel="stylesheet" type="text/css" href="footer.css" />
</head>
<body>
 
<div id="content">
	<div id="orange"></div>
	<div id="vert"></div>
	<div id="bleu"></div>
</div>
 
<div id="footer">
	<p>coucou</p>
</div>
 
</body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
html
{
	/* important pour positionner le footer */
	position: relative;
}
body
{
	/* doit être égal à la hauteur totale du footer
	(hauteur + padding) */
	padding-bottom: 3em;
}
#footer
{
	height: 2em;
	/* je rajoute un padding pour que les marges des éléments internes
	ne dépassent pas */
	padding-bottom: 1em;
	position: absolute;
	bottom: 0;
	left: 0;
}
 
/* le dernier élément du footer doit avoir une marge inférieure au
padding du footer */
#footer p { margin: 0.8em; }
 
/* le reste c'est juste pour mieux voir */
body { width: 150px; margin: 0; }
#footer { width: 100%; background: gray; color: white; } 
#content div { width: 200px; height: 500px; margin: 1em; }
#orange { background: #fd9; }
#vert { background: #df9; }
#bleu { background: #ccf; }

Il reste un léger problème : cette solution ne marche pas sous IE7 et moins. Si tu penses que tu ne peux pas te permettre de laisser de côté tes visiteurs qui utilisent toujours IE7-, on repartira sur la solution JavaScript

**laurentSc** · 23/05/2011, 18h10

Je n'ai pas encore regardé la solution CSS (je ne sais pas s'il est important que ça marche pour IE7 ou moins, vu que ce n'est pas pour moi), mais j'ai regardé la solution js ; en effet le doctype n'était pas à jour ; je l'ai fait, mais encore problème : avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var top, res;
if (window.innerHeight) {
	res = window.innerHeight;
} else {
	res = document.documentElement.clientHeight;
} 
 
 
alert('res='+res);

(désolé, pas encore passé à la console) Le alert me donne 0...

**Watilin** · 23/05/2011, 23h04

Hmm

Je ne comprends pas. Que t'indique la console pour « mode navigateur » et « mode de document » ?

**laurentSc** · 23/05/2011, 23h16

c'est en anglais, même si la langue du PC est le français
Browser mode : IE8
Document mode : Quirks

**Watilin** · 23/05/2011, 23h28

Tu es toujours en mode quirks (= non standard), donc c'est normal que ça donne 0. Re-vérifie ton DOCTYPE, ça ne peut venir que de là

Et vérifie aussi qu'il n'y aucun caractère avant, pas même un espace ou un saut de ligne.

Ça peut être aussi un problème d'encodage, regarde la config de ton éditeur de texte : il y a un mode UTF8 bizarre qui rajoute un caractère invisible en début de fichier.

**laurentSc** · 23/05/2011, 23h43

Bien vu : avant le doctype, il y avait des lignes de PHP et notamment des echos ; je les ai déplacés juste après le doctype, et maintenant, ça affiche 571...
Et pour un étudiant, tu en connais un rayon...

**Watilin** · 24/05/2011, 00h13

Merci du compliment

Ça fait pas mal de temps que je bourlingue sur les fora d'entraide, et j'aime bien vérifier ce que je dis avant de répondre. En passant du temps sur Google, j'ai appris des tas de trucs…

placer un bloc à une hauteur qui dépend de résolution écran

JavaScript

Discussions similaires

Partager

Partager