J'ai un petit problème que je n'arrive pas à résoudre mais peut etre pourrez vous m'y aider !
Je veux que le contenu de mon document HTML occupe toute la largeur et toute la hauteur de la fenetre. Je lui ai donc donné 100% en hauteur et largeur.
Dans mon document j'ai ensuite trois divs :Mon problème est le suivant : sous IE mon document s'affiche comme je le veux. Sous Firefox la taille 100% en hauteur comme en largeur est en réalité plus grande que la fenêtre et donc mon document dépasse. De plus mes 2 divs positionnées en float:left de largeur respectives 15% et 85% se trouvent en fait l'une en dessous de l'autre.
- une div au sommet de la page
- deux divs en dessus de la première positionnées en float:left
On dirait un problème de padding or je les ai tous mis à 0.
Voila ma feuille de style :
et voila le fichier html correspondant :
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 @CHARSET "ISO-8859-1"; html,body { margin: 0; padding: 0; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .menu ul,.menu li { margin: 0; padding: 0; list-style-type: none; } .header { margin: 0; padding: 0; width: 100%; height: 15%; border: thin solid #00ff00; float: left; } .menu { margin: 0; padding: 0; width: 15%; height: 85%; border: thin solid #00ff00; float: left; } .content { margin: 0; padding: 0; float: left; width: 85%; height: 85%; border: thin solid #00ff00; float: left; } .menu a { color: #323499; text-decoration: none; } .menu a:hover { background-color: #ff0000; } .menu a:visited { color: #323499; } .menuSubLinks { padding-left: 0.75em; position: relative; }
Si quelqu'un peut m'aider à résoudre ce problème merci d'avance
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="styles/baseStyles.css"> <script type="text/javascript"> window.onload = start function start() { $('smenu2').style.display = "none"; $('smenu3').style.display = "none"; $('smenu4').style.display = "none"; } function toggleSubLinks(subLinkDiv) { new Effect.toggle($(subLinkDiv),'appear'); } </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script> </head> <body> <div id="header" class="header">a </div> <div id="menu" class="menu"> <div><a href="#">Menu 1</a></div> <div><a href="#" onclick="toggleSubLinks('smenu2');">Menu 2</a></div> <div id="smenu2" class="menuSubLinks"> <div> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </div> </div> <div><a href="#" onclick="toggleSubLinks('smenu3');">Menu 3</a></div> <div id="smenu3" class="menuSubLinks"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.2</a></li> <li><a href="#">Sous-Menu 3.3</a></li> <li><a href="#">Sous-Menu 3.4</a></li> <li><a href="#">Sous-Menu 3.5</a></li> <li><a href="#">Sous-Menu 3.6</a></li> </ul> </div> <div><a href="#" onclick="toggleSubLinks('smenu4');">Menu 4</a></div> <div id="smenu4" class="menuSubLinks"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.2</a></li> </ul> </div> </div> <div id="content" class="content">a </div> </body> </html>
Partager