Bonjour je n'arrive pas à ecrire mon code javascript pour que mon bandeau de ma page html s'adapte à la résolution du client.
ci-dessous un bout de mon code html et le code css concerné:


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
<head>
<script type="text/javascript">
if (screen.width<=800) {
document.getElementById ('en_tete').className = 'res1';
} else if (screen.width>=1024) {
document.getElementById ('en_tete').className = 'res2';
} else if (screen.width>=1200) {
document.getElementById ('en_tete').className = 'res3';
}
</script>
</head>
 
<body>
<div id="en_tete">
 
</div>
  </body>
</html>


le CSS:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#en_tete
{
   width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}
.res1 /*800*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle1.jpg");
 
}
.res2 /*1024*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle2.jpg");
 
}
.res3 /*1200*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}

Voila je galère grandement car pour firefox j'ai palié au problème via la fonction "@media screen and (max-device-width: 1024px)" mais mon problème concerne IE8.
Espérant que quelqu'un puisse m'aider, merci par avance.