Style déformé quand on redimensionne la fenêtre

**erox44** · 28/07/2011, 16h52

Bonjour,
j'ai la page html suivante :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<html>
	<head>Mon Titre</head>
	<body>
		<div id="bandeau"><h2>Titre Général</h2>
			<div id="menu">
			<a href="#lien1" >Lien 1</a>&nbsp;|&nbsp;
			<a href="#lien2" >Lien 2</a>&nbsp;|&nbsp;
			<a href="#lien3" >Lien 3</a>&nbsp;|&nbsp;
			<a href="#lien4" >Lien 4</a>&nbsp;|&nbsp;
			<a href="#lien5" >Lien 5</a>&nbsp;|&nbsp;
			<a href="#lien6" >Lien 6</a>&nbsp;|&nbsp;
			<a href="#lien7" >Lien 7</a>&nbsp;|&nbsp;
			<a href="#lien8" >Lien 8</a>&nbsp;|&nbsp;
			<a href="#lien9" >Lien 9</a>&nbsp;|&nbsp;
			<a href="#lien10" >Lien 10</a>&nbsp;|&nbsp;
			<a href="#lien11" >Lien 11</a>&nbsp;|&nbsp;
			<a href="#lien12" >Lien 12</a>&nbsp;|&nbsp;
			<a href="#lien13" >Lien 13</a>&nbsp;|&nbsp;
			<a href="#lien14" >Lien 14</a>&nbsp;|&nbsp;
			<a href="#lien15" >Lien 15</a>
			</div>
			<br>
			<table align=center>
				<input type="button" name="but1" value="Mon bouton 1" class="button" onclick="window.open('./ListeAppli.php4')"/> 
				<input type="button" name="but2" value="Mon bouton 2" class="button" onclick="window.open('./FicheTechnique.php4')"/>
				<input type="button" name="but3" value="Mon bouton 3" class="button" onclick="window.open('./Liste.php4')"/>
			</table>
			<img class='topRightButton' src='../images/livre_ouvert.gif' onClick='..' />
			<br/><br/>
			<img class='topRightButton' src='../images/up.gif' onClick='showHideAllBloc();' style='margin-right:6px;margin-bottom:5px;' />
		</div>
		<?xml version="1.0"?>
		<div id="fiche">
	  <form name="formFiche" method="post" action="./Fiche.php4" ENCTYPE="multipart/form-data">
		<div class="bloc_a">
		  <div id="lien1" class="titrebloc">
			<a name="lien1">AAAAAA</a>
		  </div>
		  <table>
			<tr id="a_indication_TR" class="indication">
			  <td class="indication" colspan="5">
				<font size="1"></font>
			  </td>
			</tr>
			<tr id="a_TR" style="display:block" >
			  <td class="libelle">a</td>
			  <td class="champ">
				<input name="a" type="text" value="aaa" readonly="" class="ro text"/>
			  </td>
			  <td class="help"/>
			  <td class="lien_info"/>
			  <td class="lien_info">
				<a href="#">
				  <img src="../images/icon_aide_transp.gif" width="25" height="25" onclick="openFicheCommentaire('a');" onmouseover="this.src='../images/icon_aide_transp_b.gif'" onmouseout="this.src='../images/icon_aide_transp.gif'"/>
				</a>
			  </td>
			</tr>
			...
		  </table>
		</div>
		<div class="bloc_b">
		  <div id="lien2" class="titrebloc">
			<a name="lien2" href="#" onClick="showHideBloc('lien2', this.getElementsByTagName('img')[0]);">BBBBB<img src="../images/down.gif" border="0"/></a>
		  </div>
		  <table>
			<tr id="d_indication_TR" class="indication">
			  <td class="indication" colspan="5">
				<font size="1"></font>
			  </td>
			</tr>
			<tr id="d_TR" style="display:block">
			  <td class="libelle">d</td>
			  <td class="champ">
				<input name="d" type="text" value="dddddddd" readonly="" class="ro text"/>
			  </td>
			  <td class="help"/>
			  <td class="lien_info"/>
			  <td class="lien_info">
				<a href="#">
				  <img src="../images/icon_aide_transp.gif" width="25" height="25" onclick="openFicheCommentaire('d');" onmouseover="this.src='../images/icon_aide_transp_b.gif'" onmouseout="this.src='../images/icon_aide_transp.gif'"/>
				</a>
			  </td>
			</tr>
			...
		  </table>
		</div>
		<div id="boutoncontrole">
		  <table>
			<tr>
			  <td>
				<input name="modif" type="button" value="Modifier" class="button" onclick="javascript:checkALL();"/>
			  </td>
			  <td>
				<input name="fermer" type="button" value="Fermer" class="button" onclick="javascript:window.close();"/>
			  </td>
			  <td>
				<input name="imprime" type="button" value="Imprimer" class="button" onclick="javascript:window.print();"/>
			  </td>
			</tr>
		  </table>
		</div>
	  </form>
	</div>
	</body>
</html>

Et son CSS associé :

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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
 
<style>
 
/******************
*	containers
*******************/
body
{
	/*overflow: hidden;*/
	margin: 0 0 5px 0;
	/*padding-top: 180px;*/
}
 
#bandeau
{
	height: 140px;
	/*height: 165px;*/
	/*left: 0;*/
	margin: 0;
	position: relative;
	/*position: absolute;*/
	/*top: 0;*/	
	width: 100%;
	background-color:#CCCCFF;
	FONT-WEIGHT: bold;	
	FONT-SIZE: 10px;	
	COLOR: #336699;	
	FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;
	/*z-index:10;	*/
}
 
#fiche
{
	height: 100%;	
	width: 100%;
	overflow: auto;
	position: relative;
}
 
.bloc_b
{
	margin: 20px 10px;
	padding: 10px;
	background-color:#96D4E7;
	border: 2px solid #724098;
}
 
.bloc_a	
{
	margin: 20px 10px;
	padding: 10px;
	background-color:#dcf0ff;	
	border: 2px solid #724098;	
}
 
.titrebloc
{
	left: 10px;
	/*position: relative;*/
	padding: 2px 10px 5px;
	width: 600px;	
	/*color:#E64A00;*/
	color:#800080;
	font-size:20px;
	font-weight:bold;
	FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;	
	border: 2px solid #724098;
	background-color: #fff;
}
 
.titrebloc_noname
{
	left: 10px;
	position: relative;
	padding: 2px 10px 5px;
	width: 600px;	
	color:#E64A00;
	font-size:20px;
	font-weight:bold;
	FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;	
}
 
#fiche table
{	
	text-align:left;
	FONT-WEIGHT: bold;	
	FONT-SIZE: 10px;	
	COLOR: #336699;	
	FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;	
}
 
 
 
#bandeau h2
{
	margin: 0 0 10px 0;
}
 
#menu
{
	padding-left: 15px;	
}
 
#menu a
{
	text-decoration: none;	
}
#menu a:hover{color: #F90;}
 
#bandeau table
{
	/*margin-left: 100px;*/
	/*width: 800px;*/	
}
 
 
 
.titrebloc a{text-decoration:none;}
 
#boutoncontrole {
    width: 95%;
    padding: 0;
    text-align: right;
}
 
#boutoncontrole input {
    margin: 10px;
    border: #724098 2px solid;
    font-weight: bold;
    font-size: 11px;
    vertical-align: middle;
    cursor: pointer;
    color: #724098;
    line-height: normal;
    font-family: verdana, arial, tahoma, lucida, sans-serif;
    background-color: white;
}
 
 
/***********
*	champs 
***********/
 
table .libelle
{
	width: 30%;
	padding: 0 15px 0 0;
	/*text-align: right;*/	
	text-align: left;	
}
 
table .champ
{
	width: 100%;	
}
 
table tr td.indication {
    font-size:10px;
    font-weight:normal;
    FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;
}
 
table tr td.lien_info {
	width:20px
}
 
table tr td.help {
	width:20px
}
 
img {
	border-width:0px;
}
 
.ro{
 
    background-color: #DFDFDF;
    border: 1px solid #7093DB;
    color: #336699;
    font-family: Verdana,Arial,Tahoma,Lucida,sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 1px;
    vertical-align: top;
}
 
#fiche input.text, #fiche select
{
	width: 80%;	
}
 
input.radio {
     background-color:transparent;
}
 
input.button {
	BORDER: #336699 2px solid;
	FONT-WEIGHT: bold;	
	FONT-SIZE: 11px;	
	MARGIN-BOTTOM: 1px;	
	VERTICAL-ALIGN: middle;	
	BORDER-LEFT: #336699 2px solid;	
	CURSOR: pointer;	
	COLOR: #336699;	
	LINE-HEIGHT: normal;
	FONT-FAMILY: Verdana, Arial, Tahoma, Lucida, sans-serif;	
	BACKGROUND-COLOR: white;	
	font-size-adjust: none;	
	font-stretch: normal;
}
 
 
 
 /******************************/
 /* Top Right buttons+text */
 /*****************************/
 
.topRightButton{
 
	cursor: pointer;
	float: right;	
}
 
 
 
</style>

Ce que je souhaite au final, et qui est deja quasiment mis en place, c'est avoir un bandeau tout en haut qui soit fixe, et une partie de contenu scrollable en dessous.

A l'heure actuelle, je suis presque arrivé à mes fins, cependant, lorsque je redimensionne ma page par exemple, certains elements déforment le tout.

Je viens donc vers vous afin d'optimiser le code actuel et vori comment je pourrais remedier à ce soucis.

De plus, cette page est développée pour IE6 uniquement.

Merci.

**12monkeys** · 29/07/2011, 15h44

Bonjour

Tu n'as pas de DOCTYPE ? http://xhtml.developpez.com/faq/?pag...octype_utilite

C'est quoi ce head ? Manque les balises title : http://j-willette.developpez.com/tut...ge=page_1#LI-B

Ca c'est pas juste :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<table align=center>
	<input type="button" name="but1" value="Mon bouton 1" class="button" onclick="window.open('./ListeAppli.php4')"/> 
	<input type="button" name="but2" value="Mon bouton 2" class="button" onclick="window.open('./FicheTechnique.php4')"/>
	<input type="button" name="but3" value="Mon bouton 3" class="button" onclick="window.open('./Liste.php4')"/>
</table>

Ton tableau il as pas de cellules ni de colonnes...

Ceci en plein milieu du code ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		<?xml version="1.0"?>

Sinon je vois que tu as mis dans ton CSS des largeurs en pourcentages et d'autres en pixels. Forcément un moment il y a conflit parce que les éléments qui ont une largeur en pixels ne se rétrécissent pas avec la fenêtre. Il faut surement chercher de ce coté...

**erox44** · 01/08/2011, 10h23

Salut,
Pour le doctype et le title, ils sont bien présents, et le xml qui traine, ca vient sans doute de la génération xml/xsl.

Mais merci pour ton indication au niveau des largeur %/px, jvais jeter un coup d'oeil par là.

Style déformé quand on redimensionne la fenêtre

CSS

Vue hybride

Discussions similaires

Partager

Partager