[DOM] div avant le body (donc avant le contenu du site)

**pas30** · 18/02/2009, 06h35

Bonjour,

J'essaie de créer une petite barre en haut de page mais je n'y arrive pas. L'idée c'est de créer donc une petite barre (div) de la largeur de l'écran et de 20 de hauteur qui s'afficherait au dessus du site sur lequel le code serait collé (insertbefore)
Voici mon code :

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
<?php
header("Content-Type: text/javascript");
?>
if (window.innerHeight) { 
 
		//Navigateurs sauf Explorer
 
		var fenHeight = window.innerHeight;
 
		var fenWidth = window.innerWidth;
 
	}
 
	else if (document.documentElement && document.documentElement.clientHeight) {
 
		//Internet Explorer mode Strict
 
		var fenHeight = document.documentElement.clientHeight;
 
		var fenWidth = document.documentElement.clientWidth;
 
	}
 
	else if (document.body && document.body.clientHeight) {
 
		//Autres Internet Explorer
 
		var fenHeight = document.body.clientHeight;
 
		var fenWidth = document.body.clientWidth;
 
	}
 
function scroll_fenetre()
{
if (window.innerHeight) { 
 
		//Navigateurs sauf Explorer
 
		var scroll = 0;
 
	}
 
	else if (document.documentElement && document.documentElement.scrollTop) {
 
		//Internet Explorer mode Strict
 
		var scroll = document.documentElement.scrollTop;
 
	}
 
	else if (document.body && document.body.scrollTop) {
 
		//Autres Internet Explorer
 
		var scroll = document.body.scrollTop;
 
	}
	  if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") {
    var scroll=0;
    }
	return scroll;
}
 
function IEFixedElementPos()
{
  // IE 7 en mode standard
  if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
  {
	 return ("fixed");
  }
  return ("absolute");
}
 
 document.write('<style type="text/css">\n'+
 '#leader_box \n'+
 '	{\n'+
 '	position:fixed;\n'+
 '	width:\n'+fenWidth+'px;\n'+
 '	height:20px;\n'+
 '	top:0px;\n'+
 '	left:0px;\n'+
 '	position: expression(IEFixedElementPos());;\n'+
 '	top: expression(scroll_fenetre());\n'+
 '	}\n'+
 '</style>');
 
var code="<table id='leader_box'><tr><td bgcolor=#FFFFFF>test</td></tr></table>";
var b = document.getElementsByTagName("body")[0];
b.insertbefore(code,b);

Si quelqu'un a une idée à ce petit problème je suis preneur je pense qu'il y a un petit quelquechose de pas logique dans mon code mais quoi

**SpaceFrog** · 18/02/2009, 08h23

position absolute zindex de premier plan et le div DOIT être dans le body ...

**franculo_caoulene** · 18/02/2009, 09h56

Salut,

Pourquoi le faire en javascript? C'est du pur css.

**Bovino** · 18/02/2009, 10h24

Envoyé par franculo_caoulene

Salut,

Pourquoi le faire en javascript? C'est du pur css.

Parce que les roues rondes ne plaisent pas à tout le monde !

**pas30** · 18/02/2009, 11h56

Tu récupères la largeur de la page comment en css ???
Et pourquoi je dois mettre le div en position absolute ???
J'aimerais qu'il soit en fixed position haute pour que lorsque l'on scrolle elle reste visible
Merci d'avance de votre aide

**franculo_caoulene** · 18/02/2009, 12h25

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>fixed</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   * {margin:0;padding:0;background:#000;color:#ccc;}
   body {height:2000px;}
   div {width:100%;position:fixed;}
   p {background:#333;}
   </style>
</head>
<body>
   <div><p>blah</p></div>
   <script type="text/javascript">
   </script>
</body>
</html>

Pour IE6 il y a la FAQ. Personnellement, vu mes utilisateurs, j'ai abandonné le développement pour IE6.

[DOM] div avant le body (donc avant le contenu du site)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager