PHP Table et espace non désiré

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
Je rencontre un problème que je ne parviens à résoudre.
Je l'ai réduit au max et même le petit exemple présenté ici, donne la même situation.
Soit une ligne blanche entre 2 parties de l'écran....

Voici le 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="../css/t2.css" rel="stylesheet" type="text/css"/>
	<title>Test</title>
</head>
 
<!-- ============== -->
<!--       BODY     -->
<!-- ============== -->
<body>
 
<!-- ========================================================================================= -->
<!--       Bannière horisontale                                                                -->
<!-- ========================================================================================= -->
<table cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2">
    	<table cellspacing="0" cellpadding="0">
  		<tr>
    		<td>
				<a href="../index.php" title="L'office du tourisme que je remercie"/>
					<img src="../images/paysviganais.jpg" class="paysviganais"/>          		
                </a>	
            </td>
    		<td>
				<a href="../index.php" title="Retour à l'index du site Je Crapahute">
					<img src="../images/banniere.jpg" class="banniere"/>          		
                </a>            
            </td>
   			<td>				
            	<a href="../index.php" title="Esteban er son ami Victor !">
					<img src="../images/ETVictor.jpg" class="etvictor"/>
                </a>
            </td>
		</tr>
		</table>	
	</td>
</tr>
<!-- ========================================================================================= -->
<!--       Menu principal[horizontal]                                                          -->
<!-- ========================================================================================= -->
<tr valign="top">
    <td colspan="2" class="menu">		
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td width="10">&nbsp;</td>
            <td class="menu">
                <a href="../index.php" title="Bienvenue dans le site de vos randos, je crapahute !" class="menuitem">
                    Accueil        
                </a>    
            </td>
           <td class="menu">
                <a href="../membre.php" title="Etre membre de Je Crapahute qu'est ce que cela signifie ?" class="menuitem">
                    Membre        
                </a>    
            </td>
            <td class="menu">
                <a href="../contact.php" title="Contactez nous pour une remarque sur le site, un problme technique, c'est ici !" class="menuitem">
                    Contact        </a>	</td>
            <td class="menu">
                <a href="../randos.php" title="Des randos autour du Vigan, il y en a plein !" class="menuitem">
                    Randos        
                </a>	
            </td>
           <td class="menu">
                <a href="../materiel.php"" title="Matos pour vos randos" class="menuitem">
                    Matos       
                </a>	
            </td>
           <td class="menu">
                <a href="../biblio.php"" title="Biblio vos randos" class="menuitem">
                    Biblio       
                </a>	
            </td>
           <td class="menu">
                <a href="../disconnect.php" title="Se déconnecter de Je Crapahute !" class="menuitem">
                    Déconnection        
                </a>	
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        </table>
	</td>
</tr>
</table>
<!-- ========================================================================================= -->
</body>
</html>

La feuille de style est ici:

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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
 
/* CSS Document */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                                      */ 
/*                 0                                                                1                0                                  */
/*           0     +----------------------------------------------------------------+----------------+ 0                                */
/*           1     +                                                                [    140         |                                  */
/*                 + Paysviganais   Cevennes                        ETVictor        |                |                                  */
/*                 + 113            778                             113             |    Signon      |                                  */
/*          113    +-------------------------1004-----------------------------------+                |                                  */
/*                 +                menu                   976 X 23                 |                |                                  */
/*                 +----------------------------------------------------------------+----------------+  0                               */
/*                 +                doc                    976 X ?? (cfr Adsense)   +    Adsense     |                                  */
/*                 +----------------------------------------------------------------+----------------|  0                               */
/*                 |<--                                    976                      |  <--  140      |                                  */
/*                 |<--                                   1004                                       |                                  */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
body {
    top: 0px;
    width:1004px;
    margin: 0px;
    padding: 0px;
}
 
table {
	/*	border-collapse: collapse;    */
/*    border:1px solid #000000;   */
	margin: 0px;
	padding: 0px;
	text-align: center;
}
/* --------------- */
/* - 1 re Ligne - */
/* --------------- */
.banniere {
	top: 0px;
	left: 0px;
	height:113px;
	width:1004px;
	margin: 0;
}
 
.paysviganais {
	top: 0px;
	left: 0px;
	height:113px;
	width:113px;
	background-image: url(../images/paysviganais.jpg);
	margin: 0;
}
 
.cevennes {
	top: 0px;
	left: 114px;
	width: 778px;
	height: 113px;
	text-align: center;
	background-image: url(../images/banniere.jpg);
	margin: 0;
}
 
.etvictor {
    top: 0px;
    left: 892px;
    height: 113px;
    width: 141px;
    background-image: url(../images/etvictor.jpg);
}
/* --------------- */
/* - 3 me Ligne - */
/* --------------- */
.menu {
    top: 113px ;
    height: 16px;
    width: 863px;
    font-weight: lighter;
    font-size: x-small;
    text-indent: 5pt;
    font-style: italic;
    background-color: #ffa500;
    vertical-align: top;
}
 
.menuitem {
	width: 113px;
	height: 20px;
	background-position: center;
	font-weight: lighter;
	font-size: xx-small;
}/* --------------------- */
/* - Vertical - gauche - */
/* --------------------- */
.submenu {
    height:20px;
}
 
.subitem {
	width: 113px;
	height: 20px;
	background-position: center;
	font-weight: lighter;
	font-size: xx-small;
}
 
/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* Zones de l'cran (optimalis pour 104 X ???) ==> syntaxe: class=....                                                                */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.line {
    border: 1px solid #000000; 
}   
 
.border {
    border: 1px solid #000000;
}
/*  --------------------------------------- */
/*      Form stuffs                         */
/*  --------------------------------------- */
.form_title {
    font-size: x-large;
    color: #663300;
    text-align: center;
    font-weight: bold;
    background-position: center;
}
 
.form_subtitle {
	font-size: medium;
	color: #663300;
	text-align: center;
}
 
.form_bkg {
	background-color: #99FFFF;
    background-position: center center;
}
 
.form_frg {
    background-color: #FFFFCC;
}
 
.form_msg {
    background-color: #999933;
    color: #333300;
    font-size: small;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-align: center;
    border: 1px solid #666600;
}
 
.form_lbl {
	font-size: small;
}
 
.form_fld {
    background-color: #CCFF00;
    color: #999999;
    font-size: medium;
    font-style: normal;
    font-weight: normal;
}
 
.form_button {
    background-color: #999933;
    text-align: center;
    border: 1px solid #666600;
    font-size: 10px;
    height: 16px;
}
 
.form_select {
    color: #FFFFCC;
    font-size: medium;
    text-align: center;
    vertical-align: top;
	background-color: #CCFF66;
    background-position: center top;
    border: 1px solid #666600;
}
 
.form_textarea {
    color: #003300;
    font-size: small;
    font-style: italic;
    border: 1px solid #666600;
	background-color: #CCFF66;
}
 
/*  --------------------------------------- */
/*      Field stuffs                        */
/*  --------------------------------------- */
.fld_protected {
    color: #000000;
    background-color: #999933;
}
 
.fld_mandatory {
    color: #FF0000;
}
 
.fld_captcha  {
    background-color: #00FF99;
}
 
.fld_border {
    border: 1px solid #666600;
}
 
.fld_email {
    color: #003300;
    font-size: small;
    font-style: italic;
    border: 1px solid #666600;
	background-color: #99CC33;
}
/*  --------------------------------------- */
/*      Table stuffs                        */
/*  --------------------------------------- */
.table_title {
	font-size: x-large;
	color: #663300;
	text-align: center;
	background-color: #999999;
}
 
.table_subtitle {
	font-size: medium;
	color: #663300;
	text-align: center;
}
 
.table_bkg {
    background-color: #FFFFCC;
    background-position: center center;
    color: #333300;
}
 
.table_data {
    text-align: center;
    background-color: #FFFFCC;
    color: #663300;
}
 
.table_links {
    font-size: small;
}
/*  --------------------------------------------------------------------------- */
/*      Various "underline, link, hover, active... ETC stuffs                   */
/*  --------------------------------------------------------------------------- */
a {
	font-size: 9px;
	height: 20px;
	color: #663300;
}
 
a:link {
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}
 
a:visited {
	color: #0000000;
	font-weight: bold;
	font-size: 12px;
}
 
a:hover {
    color: #339900;
    font-weight: bolder;
	font-size: 12px;
}
 
a:active {
    color: #000000;
	font-size: 12px;
}
/*  --------------------------------------------------------------------------- */
/*      Various "underline, link, hover, active... ETC stuffs                   */
/*  --------------------------------------------------------------------------- */
.small {
font-size: small
}
 
.small_underline {
    font-size: small;
    text-decoration: underline;
}
 
.x_small {
font-size: x-small
}
 
.x_smallunderline {
    font-size: x-small;
    text-decoration: underline;
}
 
.xx_small {
    font-size: xx-small;
}
 
.smallest {
    font-size: 6px;
}
 
.xx_smallunderline {
    font-size: xx-small;
    text-decoration: underline;
}
/*  --------------------------------------- */
/*      Table stuffs                        */
/*  --------------------------------------- */

Je ne l'ai réduite à une version + simple mais n'ai rien trouvé pourtant cela ne peut être que cela !

L'écran se trouve en pièce attachée.

Vous y verrez la ligne blanche entre le sommet de l'écran avec 3 photos et le menu dans une ligne orange.
Je ne parviens pas à supprimer cet espace.

Merci @ceusss qui se pencheront sur mon p'tit souci....:zoubi:

22/01/2012, 18h18
yonn_b
Bonsoir,
Je me permet avant tout un petite remarque sur l'utilisation d'un tableau pour votre mise en page...cette technique, complètement contraire au standards serait avantageusement remplacée par une mise en page à base d'élément <div>. Vous trouverez de nombreux cours sur ce point.
Pour revenir à votre problème, enlevez les espaces avant la balise de fermeture de votre lien :
Code:

1 2 ... <img src="../paysviganais.jpg" class="paysviganais"/></a>
et tout ira bien.
Enfin, je ne saurais trop vous conseiller d'utiliser l'escellente extension firefox "WebDevelopperToolbar" qui offre notamment un outil "Encadrer l'élément survolé" qui vous aurait permis d'identifier la source du problème en quelques clics.
Bien à vous.
Yann

edit : votre css regorge de doublons et définit des image de fonds pour des éléments contenant la même image... vous gagneriez énormément de temps en optimisant davantage votre code car lorsque vous déciderez d'apporter quelques retouches à votre création, vous risquez d'être confronté à un véritable casse tête du fait des styles définis plusieurs fois.
22/01/2012, 18h34
ETVigan

Cellules HTML et espace non désirés

Bonsoir, je ne comprends pas pourquoi mais ton conseil fonctionne !
J'y vois un inconvénient majeure, cela empêche l'indentation ce que je trouve important pour préserver la clarté du code... bon on va bien devoir s'y habituer !

Je vais lire les références que tu m'as passées sur l'utilisation de la balise <div></div>

Merci de tes conseils :lol:
22/01/2012, 20h12
yonn_b

Citation:

Envoyé par ETVigan

J'y vois un inconvénient majeure, cela empêche l'indentation ce que je trouve important pour préserver la clarté du code... bon on va bien devoir s'y habituer !

Si vous souhaitez conserver votre indentation, vous pouvez mettre un

Code:

line-height: 0

pour la première ligne du tableau... mais ça reste du bidouillage.

Bon courage pour la suite

Yann

Tableau - Div et allignement cellule .....

Bonjour,
J'ai bouquiné hier soir mon livre WROX HTML 4.01 et n'ai vu aucun moyen de faire un tableau avec des balises <div></div> ni n'ai vu le réel avantage - dans mon contexte - de celle-ci !
Je suis allé + loin dans ma page d’accueil et j'ai des décalages visibles sur le JPEG attaché - voir <== ICI dans la colonne blanche en haut à droite - puis-je encore profiter de ton expérience pour apprendre.
Le code de la page est ici:

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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="../css/osekat.css" rel="stylesheet" type="text/css"/>
	<title>[Jecrapahute]</title>
</head>
 
<!-- ============== -->
<!--       BODY     -->
<!-- ============== -->
 
<body>
 
<!-- ================================================ -->
<!--       Ancre pour retour au sommet de la page     -->
<!-- ================================================ -->
<a name="Top" id="Top"></a>
 
<!-- ========================================================================================= -->
<!--       Bannière horizontale                                                                -->
<!-- ========================================================================================= -->
<table cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2">
    	<table cellspacing="0" cellpadding="0">
  		<tr>
 
    		<td>
				<a href="../index.php" title="L'office du tourisme que je remercie"/>
					<img src="../images/paysviganais.jpg" class="paysviganais"/></a>	
            </td>
    		<td>
				<a href="../index.php" title="Retour à l'index du site Je Crapahute">
					<img src="../images/cevennes.jpg" class="cevennes"/></a>            
            </td>
   			<td>				
            	<a href="../index.php" title="Esteban er son ami Victor !">
 
					<img src="../images/ETVictor.jpg" class="etvictor"/></a>
            </td>
		</tr>
		</table>	
	</td>
</tr>
<!-- ========================================================================================= -->
<!--       Menu principal[horizontal]                                                          -->
<!-- ========================================================================================= -->
<tr>
    <td colspan="2" class="menu">		
		<table cellspacing="0" cellpadding="0" class="menu">
 
	  	<tr>
			<td width="20">&nbsp;</td>
    		<td>
				<!-- ============================================================================================================================ -->
<!--          Menu horizontal                                                                                                     -->
<!-- ============================================================================================================================ -->
<!--
                                         ATTENTION:
 
									Tout changement d'item dans le menu doit tre répercute dans
 
									/Submenu/index.php
 
-->
<!-- ============================================================================================================================ -->
<link href="../css/osekat.css" rel="stylesheet" type="text/css"/>
<!-- ============================================================================================================================ -->
<table cellspacing="0" cellpadding="0">
<tr>
    <td class="menuitem">
 
    	<a href="../index.php" title="Bienvenue dans le site de vos randos, je crapahute !">Accueil</a>    
    </td>
    <td class="menuitem">
    	<a href="../membre.php" title="Etre membre de Je Crapahute qu'est ce que cela signifie ?">Membre</a>    
	</td>
    <td class="menuitem">
    	<a href="../contact.php" title="Contactez nous pour une remarque sur le site, un problme technique, c'est ici !">Contact</a>	
    </td>
    <td class="menuitem">
 
    	<a href="../randos.php" title="Des randos autour du Vigan, il y en a plein !">Randos</a>	
	</td>
   	<td class="menuitem">
    	<a href="../materiel.php"" title="Matos pour vos randos">Matos</a>	
	</td>
   	<td class="menuitem">
    	<a href="../biblio.php"" title="Biblio vos randos">Biblio</a>	
	</td>
  	 <td class="menuitem">
 
    	<a href="../disconnect.php" title="Se déconnecter de Je Crapahute !" class="menuitem">Déconnection</a>	
	</td>
</tr>
</table>
 
 
			</td>
    		<td>&nbsp;</td>
            </tr>
            </table>	
        </td>
    </tr>
 
    <!-- ========================================================================================= -->
    <!--       Ligne de message généré pvia la variable [$kimsg]                                   -->
    <!-- ========================================================================================= -->
<tr valign="top">
    <td colspan="2">
		<table width="1004" cellpadding="0" cellspacing="0" class="klimsg">
			<td align="left" width="230">Un message vous attend ==></td>
            <td>&nbsp;</td>
    		<td align="left">
 
				 Bienvenue sur le site de [Jecrapahute]!			
			</td>
		</table>	
</td>
</tr>
<!-- ========================================================================================= -->
<!--       Page centrale                                                                       -->
<!-- ========================================================================================= -->
<tr>
    <td>
		<table cellpadding="0" cellspacing="0" class="areamain">
  		<tr valign="top">
 
            <td class="areasubmenu">
				<a href="../remarque.php" title=''>
					<img src="../images/working.png" 
		     			title="Soyez tolérant et constructif.... Cliquez cette image pour faire un commentaire, merci !" 
			 			width="125" height="39" border="0" />			
				</a>
				<!-- ============================================================================================================================ -->
<!--      Sous menu INDEX                                                                                                       -->
<!-- ============================================================================================================================ -->
<link href="../css/osekat.css" rel="stylesheet" type="text/css"/>
<!-- ============================================================================================================================ -->
    	<table>
		<tr>
 
    		<td valign="top" height="20" class="submenu">
    			<a href="../index.php" title="Retour à l'accueil de . SITE" class="subitem">
					<img src="../buttons/accueil.gif" title="Retour à  l'accueil de votre site !" border=0/>
        		</a>    
            </td>
  		</tr>
 
		<tr>
    		<td valign="top" class="submenu">
    			<a href="../connect.php" title="Se connecter à Jecrapahute !" class="subitem">
 
        			Connection        
				</a>      		
			</td>
  		</tr>
 
		<tr>
    		<td class="submenu">
    			<a href="../merci.php" title="Merci aux personnes qui m'ont aid  la rdaction du site de Je Crapahute" class="subitem">
        			Merci        		</a>            </td>
  		</tr>
 
		<tr>
		  <td class="submenu">
		  		<a href="../newsletter.php" title="La Newsletter de Jecrapahute ?" class="subitem">
        			Newsletter        		
				</a>
			</td>
		</tr>
<!--
		<tr>
    		<td class="submenu">
    			<a href="../membre.php" title="Etre membre de Je Crapahute qu'est ce que cela signifie ?" class="subitem">
        			Membre        		</a>       		</td>
  		</tr>
-->
		<tr>
    		<td class="submenu">
 
    			<a href="../contact.php" title="Contactez Je Crapahute, une suggestion de rando, un problme technique !" class="subitem">
        			Contact				
           		</a>			
           	</td>
  		</tr>
		<tr>
    		<td valign="top" class="submenu">
    			<a href="../disconnect.php" title="Se déconnecter de Je Crapahute !" class="subitem">
        			Déconnection        
				</a>      		
			</td>
 
  		</tr>
	  	</table>
<!-- ============================================================================================================================ -->
 
			</td>
   			<td class="areadoc">
				<!-- ============================================================================================================================ -->
<!-- ===                        Style                                                                                         === -->
<!-- ============================================================================================================================ -->
<link href="../css/osekat.css" rel="stylesheet" type="text/css"/>
<!-- ============================================================================================================================ -->
<!-- ============================================================================================================================ -->
<!-- ===                        Start of page                                                                                 === -->
 
<!-- ============================================================================================================================ -->
	<table cellspacing="0" cellspacing="0" width="733">
  	<tr>
   		<td width="12%">&nbsp;</td>
    	<td>&nbsp;</td>
    	<td width="12%">&nbsp;</td>
  	</tr>
 
	<tr>
    	<td>&nbsp;</td>
 
    	<td>
			<table cellspacing="0" cellspadding="0" class="border">
   			<tr>
    			<td colspan="3" class="table_title">
					Bienvenue sur le site de [Jecrapahute]!			</td>
  			</tr>
   			<tr>
   			  	<td colspan="3" class="table_subtitle">
 
					Les non-membres désireux de nous contacter sont priés de le faire					<br />
				     <a href="../jecrapahute/infonmbr.php" title="Vous n'�tes pas membre et vous souhaitez nous contacter " ?>
			             <span class="fld_mandatory" >ICI</span>
				  	 </a>				
				</td>
  			</tr>
 			<tr>
    			<td><img src="../images/aulas.jpg" title="Le charmant village d'Aulas, � d�couvrir" width="300" height="200"/></td>
 
    			<td>&nbsp;</td>
    			<td><img src="../images/lavis.jpg" title="Les chutes de 'la Vis'  Navacelles" width="300" height="200"/></td>
  			</tr>
  			<tr>
    			<td colspan="3">&nbsp;</td>
  			</tr>
  			<tr>
   			 	<td><img src="../images/4000marches.jpg" title="Les 4000 marches ou comment gravir le mont Aigoual" width="300" height="200"/></td>
    			<td>&nbsp;</td>
 
    			<td><img src="../images/navacelles.jpg" title="Navacelles, un must  ne pas rater"  width="300" height="200"/></td>
  			</tr>
			</table>
 
		</td>
    	<td>&nbsp;</td>
  	</tr>
  	<tr>
   		<td>&nbsp;</td>
 
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
  	</tr>
	</table>
<!-- ============================================================================================================================ -->
<!-- ===                        End of page                                                                                   === -->
<!-- ============================================================================================================================ -->
 
		  	</td>	
		</tr>
		</table>	
	</td>
 
<!-- ========================================================================================= --> 
<!--       Adsense                                                                             -->
<!-- ========================================================================================= -->    
	<td class="adsense">
		<table cellspacing="0" cellpadding="0" class="adsense">
  <tr height="2">
    <td width="10">&nbsp;</td>
    <td width="121">&nbsp;</td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
 
    <td>&nbsp;</td>
    <td>
		<script type="text/javascript">
		<!--
			google_ad_client = "pub-0373415130600157";
			/* 120x600, date de cration 05/09/09 */
			google_ad_slot = "4717722336";
			google_ad_width = 115;
			google_ad_height = 600;
		//-->
		</script>
 
		<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>    
	<td>&nbsp;</td>
  </tr>
  <tr height="2">
    <td>&nbsp;</td>
 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
	</td>
</tr>
<!-- ========================================================================================= -->
<!--       Bottom                                                                              -->
<!-- ========================================================================================= -->
<tr>
    <td class="bottom">		
	  	<!-- ============================================================================================================================ -->
 
<!-- ===                        Style                                                                                         === -->
<!-- ============================================================================================================================ -->
<link href="../css/osekat.css" rel="stylesheet" type="text/css"/>
<!-- ============================================================================================================================ -->
<style type="text/css">
<!--
-->
</style>
<table width="100%" cellspacing="0" cellpadding="0" class="bottom">
<tr>
    <td width="162" align="center" class="subitem">
		<img src="../images/vcss.jpg" align="left" width="51" height="20" title="Ce site satisfait les r�gles CSS"/>	
	</td>
    <td width="162" class="subitem xx_small">
    	<a href="../quisomns.php" title="Je Crapahute, qui sommes nous ?" class="subitem">
 
        	Qui sommes nous ?
		</a>	
	</td>
    <td width="162" class="subitem" align="center"><a href="../infonmbr.php" title="Vous souhaitez nous contacter ?" class="subitem">
    	  Contact		</a>
    </td>
    <td width="162" class="subitem">
    	<div align="center"><a href="../subscribe.php" title="Vous souhaitez vous inscrire ?" class="subitem">
    	  S'inscrire		</a> </div>
 
    </td>
    <td width="320" class="subitem">
    	<div align="center"><a href="../accomodations.php" title="Nos dif�rentes formules d'accomadation ?" class="subitem">
    	  Accomodation		</a> </div>
    </td>
    <td width="34">&nbsp;</td>
</tr>
</table>
 
 
	</td>
 
	<td colspan="2">
		<table class="right_corner" cellspacing="0" cellpadding="0">
  		<tr>
    		<td colspan="2" class="bottom">&nbsp;</td>
    		<td class="top">
				<a href="#Top" title="Retour au sommet de l'écran">
					<img src="../images/top.gif" title="Retour au sommet de l'écran" class="top"/>				
				</a>							            
			</td>
 
    		<td colspan="3" class="bottom">&nbsp;</td>
  		</tr>
		</table>	
	</td>
</tr>
</table>
<!-- ========================================================================================= -->
</body>
</html>

Ma feuille de style n'a pas beaucoup changé chaque chose en son temps....

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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
 
 /* CSS Document */
/* --------------------------------------------------------CSS------------------------------------------------------------------------- */
/*                                                                                                                                      */ 
/*                 |<--                                   1004                                       |                                  */
/*           0     +----------------+-----------------------------------------------+----------------+ 0                                */
/*           1     +                |                                               |                |                                  */
/*                 +  Paysviganais  |                  Cevennes                     |    ETVictor    |                                  */
/*                 +                |                                               |                |                                  */
/*                 +                |                                               |                |                                  */
/*                 +------113-------+----------------------750----------------------+-------141------+                                  */
/*                 |<--                                   1004 X 23                               -->|                                  */
/*                 +                                                                                 |                                  */
/*                 +                                      menu                                       |                |                 */
/*                 +                                                                                 |                                  */
/*                 +----------------------------------------------------------------+------141-------+  0                               */
/*                 +    klimsg                            1004 X 23                                  |                |                 */
/*                 +-------130----------+------------------733----------------------+------141-------+  0                               */
/*                 +   submenu          |                  doc                      +    Adsense     |                                  */
/*                 +                    |             areamain                      +                |                                  */
/*                 +--------------------+------------------733----------------------+----------------|  0                               */
/*                 +                    |               bottom                      +   right_corner |                                  */
/*                 +--------------------+------------------733----------------------+----------------|  0                               */
/*                 |<--                                    863                   -->|<-    141     ->|                                  */
/*                 |<--                                   1004                                     ->|                                  */
/* ----------------+---------------------------------------------------------------------------------+--------------------------------- */
body {
    top: 0px;
    width:1004px;
    margin: 0px;
    padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
table {
	/*	border-collapse: collapse;    */
/*    border:1px solid #000000;   */
	margin: 0px;
	padding: 0px;
	text-align: center;
}
/* --------------- */
/* - 1 re Ligne - */
/* --------------- */
.paysviganais {
	top: 0px;
	left: 0px;
	width:113px;
	height:113px;
	margin: 0;
}
 
.cevennes {
	top: 0px;
	left: 114px;
	width: 750px;
	height: 113px;
	text-align: center;
	margin: 0;
}
 
.etvictor {
    top: 0px;
    left: 865px;
    width: 141px;
    height: 113px;
	margin: 0;
}
/* --------------- */
/* - 3 me Ligne - */
/* --------------- */
.menu {
    top: 114px ;
    height: 16px;
    width: 1004px;
    font-weight: lighter;
    font-size: x-small;
    font-style: italic;
    background-color: #ffa500;
}
 
.menuitem {
	width: 100px;
    height: 16px;
	background-position: center;
}
/*  --------------------------------------- */
/*      Submenu stuffs                      */
/*  --------------------------------------- */
.klimsg{
	color: #000000;
	width: 1004px;
	height: 16px;
	background-color: #999900;
	font-size: small;
	font-style: italic;
	font-weight: bold;
}
/* --------------------- */
/* - Vertical - gauche - */
/* --------------------- */
.submenu {
    height:20px;
}
 
.subitem {
	width: 113px;
	height: 20px;
	background-position: center;
	font-weight: lighter;
	font-size: xx-small;
}
/* --------------- */
/* - 3 me Ligne - */
/* --------------- */
.areamain {
    background-image: url(../images/del%27aigoual.jpg);
    background-repeat: repeat-y;
	width:866px;
}
 
.areadoc {
    background-image: url(../images/del%27aigoual.jpg);
    background-repeat: repeat-y;
	width:733px;
}
 
.areasubmenu {
    background-image: url(../images/del%27aigoual.jpg);
	height: 625px;
	width: 130px;
}
 
.adsense {
	left: 806px;
	width: 141px;
	background-color : #CCCC33;
	text-align: center;
	color: #666666;
	font-style: normal;
	font-size: x-small;
	background-position: top;
}   
 
.adsense_layout {
	color: #999900;
}
/* ------------------- */
/* - Ligne Inférieure- */
/* ------------------- */
.bottom {
	font-weight: bold;
	font-size: 10px;
    background-color: #ffa500;
	background-position: center;
}
 
.right_corner {
    width: 141px;
    background-color : #666666;
    color: #666666;
}   
 
.top {
    width: 20px;
	heigth: 20px;
    background-image: url(../images/top.jpg);
}
 
/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* Zones de l'cran (optimalis pour 104 X ???) ==> syntaxe: class=....                                                                */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.line {
    border: 1px solid #000000; 
}   
 
.border {
    border: 1px solid #000000;
}
/*  --------------------------------------- */
/*      Form stuffs                         */
/*  --------------------------------------- */
.form_title {
    font-size: x-large;
    color: #663300;
    text-align: center;
    font-weight: bold;
    background-position: center;
}
 
.form_subtitle {
	font-size: medium;
	color: #663300;
	text-align: center;
}
 
.form_bkg {
	background-color: #99FFFF;
    background-position: center center;
}
 
.form_frg {
    background-color: #FFFFCC;
}
 
.form_msg {
    background-color: #999933;
    color: #333300;
    font-size: small;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-align: center;
    border: 1px solid #666600;
}
 
.form_lbl {
	font-size: small;
}
 
.form_fld {
    background-color: #CCFF00;
    color: #999999;
    font-size: medium;
    font-style: normal;
    font-weight: normal;
}
 
.form_button {
    background-color: #999933;
    text-align: center;
    border: 1px solid #666600;
    font-size: 10px;
    height: 16px;
}
 
.form_select {
    color: #FFFFCC;
    font-size: medium;
    text-align: center;
    vertical-align: top;
	background-color: #CCFF66;
    background-position: center top;
    border: 1px solid #666600;
}
 
.form_textarea {
    color: #003300;
    font-size: small;
    font-style: italic;
    border: 1px solid #666600;
	background-color: #CCFF66;
}
 
/*  --------------------------------------- */
/*      Field stuffs                        */
/*  --------------------------------------- */
.fld_protected {
    color: #000000;
    background-color: #999933;
}
 
.fld_mandatory {
    color: #FF0000;
}
 
.fld_captcha  {
    background-color: #00FF99;
}
 
.fld_border {
    border: 1px solid #666600;
}
 
.fld_email {
    color: #003300;
    font-size: small;
    font-style: italic;
    border: 1px solid #666600;
	background-color: #99CC33;
}
/*  --------------------------------------- */
/*      Table stuffs                        */
/*  --------------------------------------- */
.table_title {
	font-size: x-large;
	color: #663300;
	text-align: center;
	background-color: #999999;
}
 
.table_subtitle {
	font-size: medium;
	color: #663300;
	text-align: center;
}
 
.table_bkg {
    background-color: #FFFFCC;
    background-position: center center;
    color: #333300;
}
 
.table_data {
    text-align: center;
    background-color: #FFFFCC;
    color: #663300;
}
 
.table_links {
    font-size: small;
}
/*  --------------------------------------------------------------------------- */
/*      Various "underline, link, hover, active... ETC stuffs                   */
/*  --------------------------------------------------------------------------- */
a {
	font-size: 9px;
	height: 20px;
	color: #663300;
}
 
a:link {
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}
 
a:visited {
	color: #0000000;
	font-weight: bold;
	font-size: 12px;
}
 
a:hover {
    color: #339900;
    font-weight: bolder;
	font-size: 12px;
}
 
a:active {
    color: #000000;
	font-size: 12px;
}
/*  --------------------------------------------------------------------------- */
/*      Various "underline, link, hover, active... ETC stuffs                   */
/*  --------------------------------------------------------------------------- */
.small {
font-size: small
}
 
.small_underline {
    font-size: small;
    text-decoration: underline;
}
 
.x_small {
font-size: x-small
}
 
.x_smallunderline {
    font-size: x-small;
    text-decoration: underline;
}
 
.xx_small {
    font-size: xx-small;
}
 
.smallest {
    font-size: 6px;
}
 
.xx_smallunderline {
    font-size: xx-small;
    text-decoration: underline;
}
/*  --------------------------------------- */
/*      Table stuffs                        */
/*  --------------------------------------- */

Et finalement, peux tu me montrer comme tu ferais un tableau comme celui-ci en utilisant des <div>, merci bcp !

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
 
<table cellspacing="0" cellpadding="0">
<tr>
    <td class="menuitem">
    	<a href="../index.php" title="Bienvenue dans le site de vos randos, je crapahute !">Accueil</a>    
    </td>
    <td class="menuitem">
    	<a href="../membre.php" title="Etre membre de Je Crapahute qu'est ce que cela signifie ?">Membre</a>    
	</td>
    <td class="menuitem">
    	<a href="../contact.php" title="Contactez nous pour une remarque sur le site, un problme technique, c'est ici !">Contact</a>	
    </td>
    <td class="menuitem">
    	<a href="../randos.php" title="Des randos autour du Vigan, il y en a plein !">Randos</a>	
	</td>
   	<td class="menuitem">
    	<a href="../materiel.php"" title="Matos pour vos randos">Matos</a>	
	</td>
   	<td class="menuitem">
    	<a href="../biblio.php"" title="Biblio vos randos">Biblio</a>	
	</td>
  	 <td class="menuitem">
    	<a href="../disconnect.php" title="Se déconnecter de Je Crapahute !" class="menuitem">Déconnection</a>	
	</td>
</tr>
</table>

Finalement, il s'agit plus d'un nucleus en PHP qui assemble des pièces pour faire une page mais c'est vrai que ce post devrait + se trouver dans un forum HTML que PHP...

Merci de ton coup de main, il sera apprécié à sa juste valeur :D:D

23/01/2012, 11h59
RunCodePhp
Citation:

Envoyé par ETVigan

J'ai bouquiné hier soir mon livre WROX HTML 4.01 et n'ai vu aucun moyen de faire un tableau avec des balises <div></div> ni n'ai vu le réel avantage - dans mon contexte - de celle-ci !

Je ne connais pas ce bouquin, mais il doit très certainement se réserver à la syntaxe pure (et dure) du HTML, et ne jamais parler de sémantique.

Or, le Web tend aujourd'hui de devenir de plus en plus sémantique, on parle pas mal de Web sémantique.
Le HTML5 va très largement dans ce sens.

Dans "sémantique" il faut comprendre que chaque balise à un sens.
Donc une balise <table> (tableau) à un sens, et c'est fait pour des données tabulaires (données comptables, statistiques, etc ...).

De ton coté tu y mets des liens et des images dans un tableau, donc ta façon de procéder n'est pas pertinente sémantiquement, ça peut être pénalisant pour le référencement coté moteur de recherche par exemple.
Utiliser des listes (à puces ou sans puces : UL-LI) serait mieux.
Pour la présentation, on délègue ça au CSS.

Utiliser abusivement les DIV n'est pas forcément mieux, car une DIV (division) est un élément neutre, sans aucune signification coté sémantique.
C'est bon par exemple pour la structure d'un site.
(avec le HTML5 il y a de nouvelles balises pour ça, entre autre : <section><header><footer><nav>, etc ...).

En, résumer, on utilise pas une balise par ce que son comportement ou rendu visuel (par défaut) nous convient, on utilise telle ou telle balise car elle est en rapport (ou en phase) avec le sens des données.
En exploitant correctement le HTML, les contenus pourront mieux être exploités par des programmes tiers.
Si cette page est une page d'accueil, alors ce n'est pas correct, il ne faut pas utiliser de tableau.

Mise à part ça, j'ai remarqué ceci dans tes codes :
Code:

1 2 <a href="../index.php" title="L'office du tourisme que je remercie"/> <img src="../images/paysviganais.jpg" class="paysviganais"/></a>
Gosso modo ceci : <a/>... etc ...</a>
Au lieu de ça : <a>... etc ...</a>
23/01/2012, 12h35
ETVigan

1 pièce(s) jointe(s)

HTML4/5 & Tableau avec imaged et liend

Merci de ta réponse.
Par rapport à ta dernière remarque, j'ai fait une rapide recherche sur tout mon site et je n'ai trouvé qu'une seule X <a href="...."/>...blabal </a>

S'il est vrai que je n'ai pas encore étudié HTML5 dont mes quelques lectures m'ont fait penser qu'il intégrait plus de facilités vidéos, musiques... médias quoi mais par rapport au langage strictement dit, je n'avais pas lu/vu l'intérêt d'y passer.
Je ne crois pas d'ailleurs que ma version de dream l'accepte mais là, je m'avance peut être!
As-tu d'autres suggestions à me faire car la page que tu as vue est composée de 6-7 tables... elle se trouve en pièce attachée ?
Merci tout est bon pour apprendre :mrgreen:
23/01/2012, 13h25
RunCodePhp
Citation:

mais par rapport au langage strictement dit, je n'avais pas lu/vu l'intérêt d'y passer.

C'est pourtant là que beaucoup de chose ont changés.
Ceci dit, il me semblait que la partie qui serait la plus connue était <canvas>, qui entre autre permet de faire des graphique en 2D/3D, animations, etc ... tout ça couplé avec du JS et Css 3.

Mais c'est un peu prématuré à mon sens de faire un site 100% HTML5 car les navigateurs ne sont pas égaux à ce niveau, ils n'ont pas tout intégrés (certains plus que d'autres, et je pense qu'il est inutile de te dire c'est IE le plus en retard).

Citation:

Je ne crois pas d'ailleurs que ma version de dream l'accepte mais là, je m'avance peut être!

DreamWeaver tu veux dire ?
Si c'est le cas, DW est tout sauf un éditeur pour un développeur, c'est tout juste bon pour un Webdesigner, et encore.
Utilise plutôt un éditeur comme NetBeans, orienté codeur/développeur.
Code:

1 2 3 <tr valign="top"> <td width="20"> <td align="left" width="230">
Ce genre d'attributs sont fait pour de la présentation, mais c'est au CSS qu'il faudrait déléguer ça (feuille de style css).

A la limite, fais comme ceci :
Code:

1 2 3 <tr style="vertical-align: top"> <td style="width: 20px"> <td style="width: 20px; text-align: left;">
Citation:

As-tu d'autres suggestions à me faire car la page que tu as vue est composée de 6-7 tables...

Et bien la 1ère chose à faire c'est de ne plus utiliser de tableaux (pas pour ça en tout cas).
Une recherche sur la Net te permettra de trouver pleins de codes xHTML/Css pour des structures en tout genre.