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

Version imprimable

Voir 40 message(s) de cette discussion en une page

je confirme bien évidement ce qui est dit
Ca plante

Code:

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:

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:

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>

Code:

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

20/05/2011, 01h05
Watilin

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 ?
20/05/2011, 01h13
Watilin
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 :

Citation:

Mode de rendu : Mode de compatibilité (quirks)

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

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:

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 :roll:
20/05/2011, 18h04
laurentSc

Citation:

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

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

Citation:

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.

Citation:

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 ?)

Je viens de coder ça :

Code:

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

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

Code:

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 ?

Citation:

Envoyé par laurentSc

et le alert(res) donne 0...

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

Citation:

Envoyé par laurentSc

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

Ah ok, j'ai compris sur quoi on se comprenait pas :mouarf: 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.

Citation:

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:

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:

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 ;)

23/05/2011, 18h10
laurentSc
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:

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...
23/05/2011, 23h04
Watilin

Hmm :koi: Je ne comprends pas. Que t'indique la console pour « mode navigateur » et « mode de document » ?
23/05/2011, 23h16
laurentSc

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

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.
23/05/2011, 23h43
laurentSc

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...
24/05/2011, 00h13
Watilin

Merci du compliment :D Ç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…

Voir 40 message(s) de cette discussion en une page