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