Canvas dans un fieldset problème ascenseur
Bonjour,
Je ne suis pas très doué en html et j'ai un problème simple je pense.
J'ai un canvas avec un menu dans un fieldset et je voudrais que le canvas soit toujours a coté du menu et ne passe pas en dessous selon que l'on change d'écran, de résolution, de mobile ...
Voici mon code :
Code:
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<html>
<head>
<style>
video
{
display: none;
}
</style>
<title>Learning WebGL </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="Javascript/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Javascript/sylvester.js"></script>
<script type="text/javascript" src="Javascript/outil.js"></script>
<script type="text/javascript" src="Javascript/glUtils.js"></script>
<script type="text/javascript" src="Javascript/webgl-utils.js"></script>
<script type="text/javascript" src="Javascript/shader.js"></script>
<script type="text/javascript" src="Javascript/Casse_brique.js"></script>
<script type="text/javascript" src="Javascript/Texture.js"></script>
<script type="text/javascript" src="Javascript/Buffers.js"></script>
<script type="text/javascript" src="Javascript/Figure.js"></script>
<script type="text/javascript" src="Javascript/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="Javascript/Picking.js"></script>
<script type="text/javascript" src="Javascript/Evenement.js"></script>
<script type="text/javascript" src="Javascript/Pile.js"></script>
<script type="text/javascript" src="Javascript/drawScene.js"></script>
<script type="text/javascript" src="Javascript/Camera.js"></script>
<script type="text/javascript">
</head>
<body onload="webGLStart();">
<fieldset style="max-width:1800px">
<legend>Test webGL</legend>
<div id="framerate"></div>
<div style="float:right;overflow:hidden" >
Position de la souris dans le Canvas : <span id="MouseX"></span> / <span id="MouseY"></span>
<br/>
<input type="checkbox" id="scene" checked /> scene<br/>
<input type="checkbox" id="specular" checked /> Matiere speculaire<br/>
<input type="checkbox" id="Lumiere" /> Eclairement<br/>
<input type="checkbox" id="Texture" /> Texture<br/>
<h4>Direction de la lumiere</h4>
<table>
<tr>
<td><b>Direction:</b>
<td>X: <input type="text" id="lightPositionX" value="-10.0" />
<td>Y: <input type="text" id="lightPositionY" value="4.0" />
<td>Z: <input type="text" id="lightPositionZ" value="-20.0" />
</tr>
<tr>
<td><b>Puissance spéculaire:</b>
<td><input type="text" id="shininess" value="32.0" />
</tr>
</table>
<h4>Couleur </h4>
<table >
<tr>
<td><b>Ambiante:</b>
<td>R: <input type="text" id="ambientR" value="0.4" />
<td>G: <input type="text" id="ambientG" value="0.4" />
<td>B: <input type="text" id="ambientB" value="0.4" />
</tr>
<tr>
<td><b>Speculaire:</b>
<td>R: <input type="text" id="specularR" value="0.8" />
<td>G: <input type="text" id="specularG" value="0.8" />
<td>B: <input type="text" id="specularB" value="0.8" />
</tr>
<tr>
<td><b>Diffuse:</b></td>
<td>R:<input id="diffuseR" type="text" value="0.8">
<td>G:<input id="diffuseG" type="text" value="0.8">
<td>B:<input id="diffuseB" type="text" value="0.8">
<td>
</tr>
</table>
<input type="checkbox" id="Tourner" /> Tourner
<br/>
<input type="checkbox" id="Transparence" /> Transparence
<br/>
<input type="checkbox" id="anim" /> Animer
<br/>
<input type="checkbox" id="Video" /> Video
<br/>
Alpha level <input type="text" id="alpha" value="0.5" /><br/>
<br/>
<input type="checkbox" id="Cube" /> Cube
<br/>
<input type="checkbox" id="Sphere" /> Sphere
<br/>
<input type="checkbox" id="Theiere" /> Theiere
<br/>
<input type="checkbox" id="objet" /> objet
<br/>
<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button>Confirmer</button>
</span>
</div>
<canvas id="Test_Canvas" tyle="border: none; position:absolute; left:20px; top:20px" width="800" height="800" ></canvas>
<div id="loadingtext">Loading world...</div>
</fieldset>
<canvas id="text" style="border:none; display:none" width="512" height="512" ></canvas>
<video id="video" autoplay>
<source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" />
Your browser doesn't support the HTML5 <code>video</code> element.
</video>
<script type="text/javascript" src="Javascript/obj.js"></script>
</body>
</html> |
Comment je dois procéder ?
Je pense que c'est dans les arguments du fieldset mais je ne sais pas plus.
Merci d'avance :)
