Doctype (n'importe lequel) annule ma fonction

**Znojmo** · 03/06/2013, 00h40

Bonjour à tous,

J'essaie de faire un site avec une superbe function que j'ai trouvée et qui me permet de faire la mise en forme que je veux... J'ai énormément cherché pour obtenir cette function, parce que ma mise en forme est impossible sans! Regardez dans mon site, c'est la function chk

Mais quand je mets un DOCTYPE à mon site, n'importe lequel, ça annule cette function!

Quelqu'un peut m'aider?

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!-- saved from url=(0014)about:internet -->
 
<HTML>
<HEAD>
<TITLE>Mon site</TITLE>
 
 
<script type="text/javascript">
 
function chk(){
my_div=document.getElementById("textecentre")
top_space=document.getElementById("textecentre").offsetTop
bottom_space=4
my_div.style.height=document.documentElement.clientHeight-top_space-bottom_space
}
 
onresize=chk
 
</script>
 
 
<style type="text/css">
html           {height:100%;}
body           {text-align:center; height:100%;}
#overall       {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}
#textecentre   {position:absolute; top:10px; right:260px; width:450px; height:auto; background-color:#99CCFF; overflow:auto;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>
 
 
</HEAD>
 
<BODY onload="chk();">
 
 
<div id="overall">
 
<div id="textecentre">
 
<div id="IDpres"><pre>
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
</pre></div>
 
</div>
 
</div>
 
<div id="footer">
</div>
</BODY>
</HTML>

Mise à jour : Il y a pas mal de problèmes postés sur des forums concernant le document.body.clientHeight qui ne fonctionne pas sous IE. Mais contrairement à moi, tout le monde semble avoir merveilleusement réglé le problème en remplaçant ça par document.documentElement.clientHeight... je poursuis donc mes recherches et je le remplace dans mon code, pour que si quelqu'un trouve la solution ça soit susceptible de marcher. Du coup, mon message devrait probablement être déplacé dans le forum de javascript, je suis désolé je ne pouvais pas le savoir avant ces nombreuses heures de recherche.

**arnogues** · 03/06/2013, 08h23

tu le mets où ce doctype dans ta page ?

montre nous où et comment tu mets ce doctype dans ton code s'il te plaît.

**Bovino** · 03/06/2013, 08h34

Code :

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

my_div.style.height=document.body.clientHeight-top_space-bottom_space

En CSS, il est nécessaire d'indiquer les unités pour les dimensions...

une superbe function

Permets moi de ne pas vraiment partager cet avis...

**Znojmo** · 03/06/2013, 19h34

@Bovino : D'accord, ça pourrait être pour ça que tous les doctypes (en tout cas ceux que j'ai trouvés sur w3schools, y compris html transitional) ne permettent pas à IE (au moins lui) de voir ma fonction?

Est-ce que tu connais une alternative, ou une piste d'alternative? (mettre seulement height: 98%, par exemple, ça ne fonctionne pas pour donner ce que je veux : je veux que la DIV commence à 210px du haut et s'arrête en bas du viewport).

@arnogues :

Avec plaisir, et j'en ai profité pour valider ma page sur W3C, il n'y a plus aucune erreur. Donc, j'ai fait quelques modifications, et c'est conforme. Je ne mets pas la balise ''xml version'' au tout début parce que ça l'empêche de valider ma page.

Le tout va comme suit :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
<script type="text/javascript">
 
function chk(){
my_div=document.getElementById("textecentre")
top_space=document.getElementById("textecentre").offsetTop
bottom_space=4
my_div.style.height=document.documentElement.clientHeight-top_space-bottom_space
}
 
onresize=chk
 
</script>
 
 
<style type="text/css">
html           {height:100%;}
body           {text-align:center; height:100%;}
#overall       {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}
#textecentre   {position:absolute; top:210px; right:260px; width:450px; height:auto; margin:1% auto 0; background-color:#99CCFF; overflow:auto;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>
 
 
</head>
 
<body onload="chk();">
 
 
<div id="overall">
 
<div id="textecentre">
 
<div id="IDpres"><pre>
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
</pre></div>
 
</div>
 
</div>
 
<div id="footer">
</div>
</body>
</html>

**Candygirl** · 03/06/2013, 20h50

Envoyé par Znojmo

J'ai énormément cherché pour obtenir cette function, parce que ma mise en forme est impossible sans!

Quelle est exactement la mise en forme souhaitée ?

Envoyé par Znojmo

je veux que la DIV commence à 210px du haut et s'arrête en bas du viewport

Il y a des solutions sans JS. Par exemple:

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
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mon site</title>
 
 
<style>
html,body {height:100%;margin:0;padding:0;}
 
div {
        position:absolute;
        width:100%;
        top:210px;bottom:0;
        background:red;
}
        
 
</style>
 
 
</head>
 
<body>
 
 
<div>
texte
</div>
 
</body>
</html>

Après, il est bien clair que tout dépend du contexte; si tu nous en disais un peu plus ?

**Znojmo** · 03/06/2013, 23h47

Quoi?? Ça fonctionne sans JS??

Ça fait des jours, presque entiers, que j'essaie de trouver une solution pour que ça fonctionne avec JS.

Je suis con.

Mais j'avais que trop essayé de le faire fonctionner avec de l'aide sur un autre forum, sans trop de succès. On dirait que parce que ça paraissait que j'étais débutant, ceux qui me répondaient essayaient pas trop de voir mon problème...

En tout cas, toi t'as bien compris que j'avais un vrai problème...

Merci!

Voici mon code qui montre un peu ce que je veux faire avec ça :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
 
<style type="text/css">
html,body      {height:100%;margin:0;padding:0;}
#overall       {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}
#textecentre   {position:absolute; top:210px; bottom:0px; right:260px; width:450px; background-color:#99CCFF; overflow:auto;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>
 
 
</head>
 
<body>
 
 
<div id="overall">
 
<div id="textecentre">
 
<div id="IDpres"><pre>
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
 
présentation
</pre></div>
 
</div>
 
</div>
 
<div id="footer">
</div>
</body>
</html>

Doctype (n'importe lequel) annule ma fonction

JavaScript

Vue hybride

Discussions similaires

Partager

Partager