Intérieur du tableau "déborde" ?

**kevinf** · 20/12/2006, 11h53

Salut,
je voudrais savoir pourquoi la partie en rouge sort de mon design,
j'ai ce code :

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
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=13>
			<IMG SRC="images/index3_01.gif" WIDTH=800 HEIGHT=2 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2 ROWSPAN=9>
			<IMG SRC="images/index3_02.gif" WIDTH=3 HEIGHT=575 ALT=""></TD>
		<TD COLSPAN=8>
			<IMG SRC="images/index3_03.gif" WIDTH=791 HEIGHT=15 ALT=""></TD>
		<TD COLSPAN=3>
			<IMG SRC="images/index3_04.gif" WIDTH=6 HEIGHT=15 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=15 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/index3_05.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
		<TD WIDTH=762 HEIGHT=87 COLSPAN=2 ROWSPAN=2 BGCOLOR=#FFFFFF><table width="100%"><tr><td align="left" valign="center"><a href="index.php"><img src="images/logo.png" border="0"></a></td><td align="right">
</td></tr></table>
<hr style="height: 1px;margin: 3;padding: 0;color: #000000;background-color: #000000;border: 0;"></TD>
		<TD COLSPAN=2 ROWSPAN=5>
			<IMG SRC="images/index3_07.gif" WIDTH=4 HEIGHT=526 ALT=""></TD>
		<TD COLSPAN=3 ROWSPAN=7>
			<IMG SRC="images/index3_08.gif" WIDTH=14 HEIGHT=559 ALT=""></TD>
		<TD ROWSPAN=10>
			<IMG SRC="images/index3_09.gif" WIDTH=3 HEIGHT=583 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=7>
			<IMG SRC="images/index3_10.gif" WIDTH=1 HEIGHT=559 ALT=""></TD>
		<TD ROWSPAN=6>
			<IMG SRC="images/index3_11.gif" WIDTH=11 HEIGHT=558 ALT=""></TD>
		<TD ROWSPAN=7>
			<IMG SRC="images/index3_12.gif" WIDTH=2 HEIGHT=559 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=86 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="images/index3_13.gif" WIDTH=762 HEIGHT=4 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=4 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=5>
			<IMG SRC="images/index3_14.gif" WIDTH=1 HEIGHT=469 ALT=""></TD>
		<TD WIDTH=761 HEIGHT=429 BGCOLOR=#FFFFFF valign="top" style="background-image:url(images/ying.png);BACKGROUND-REPEAT: 0;word-wrap:break-word">

<table><tr>
<td style="word-wrap:break-word"><table><tr><td style="word-wrap:break-word"><a href="#" class="imga"><img border="0" src=images/logo.png  class="imga"></a></td></tr><tr><td>test</td></tr></table><br></td><td style="word-wrap:break-word"><table><tr><td style="word-wrap:break-word"><a href="#" class="imga"><img border="0" src=images/logo.png  class="imga"></a></td></tr><tr><td>test2</td></tr></table><br></td><td style="word-wrap:break-word"><table><tr><td style="word-wrap:break-word"><a href="#" class="imga"><img border="0" src=images/logo.png  class="imga"></a></td></tr><tr><td>test3</td></tr></table><br></td><td style="word-wrap:break-word"><table><tr><td style="word-wrap:break-word"><a href="#" class="imga"><img border="0" src=images/logo.png  class="imga"></a></td></tr><tr><td>test4</td></tr></table><br></td><td style="word-wrap:break-word"><table><tr><td style="word-wrap:break-word"><a href="#" class="imga"><img border="0" src=images/logo.png  class="imga"></a></td></tr><tr><td>test5</td></tr></table><br></td></tr></table>

</TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=429 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/index3_16.gif" WIDTH=761 HEIGHT=6 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=6 ALT=""></TD>
	</TR>
	<TR>
		<TD WIDTH=762 HEIGHT=31 COLSPAN=2 BGCOLOR=#FFFFFF>
<center><a href="index2.php?lang=fr&page=presentation" class="lien"><strong>Présentation</strong></a> - Voir les toiles - Réalisation de fresques - Devis gratuit - Contact - <a href="index2.php?lang=fr&page=expos" class="lien"><strong>Expositions</strong></a></center>

</TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/index3_18.gif" WIDTH=3 HEIGHT=34 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=31 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2 ROWSPAN=2>
			<IMG SRC="images/index3_19.gif" WIDTH=762 HEIGHT=3 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/index3_20.gif" WIDTH=11 HEIGHT=1 ALT=""></TD>
		<TD COLSPAN=3>
			<IMG SRC="images/index3_21.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="images/index3_22.gif" WIDTH=2 HEIGHT=23 ALT=""></TD>
		<TD COLSPAN=10>
			<IMG SRC="images/index3_23.gif" WIDTH=794 HEIGHT=14 ALT=""></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/index3_24.gif" WIDTH=1 HEIGHT=23 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=14 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=10>
			<IMG SRC="images/index3_25.gif" WIDTH=794 HEIGHT=9 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=11 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=761 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=11 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1 ALT=""></TD>
		<TD></TD>
	</TR>
</TABLE>

Comme vous pouvez le voir, j'essayé des word-wrap:break-word, mais rien...
Voir l'image :

Merci de votre aide.

**MasterOfChakhaL** · 20/12/2006, 16h40

salut,

d'abord pour ceux que ca interesse, sauf erreur de ma part, voici le code "en rouge"

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
<table>
	<tr>
		<td style="word-wrap:break-word">
			<table>
				<tr>
					<td style="word-wrap:break-word">
						<a href="#" class="imga">
							<img border="0" src=images/logo.png  class="imga">
						</a>
					</td>
				</tr>
				<tr>
					<td>
						test
					</td>
				</tr>
			</table>
			<br>
		</td>
		<td style="word-wrap:break-word">
			<table>
				<tr>
					<td style="word-wrap:break-word">
						<a href="#" class="imga">
							<img border="0" src=images/logo.png  class="imga">
						</a>
					</td>
				</tr>
				<tr>
					<td>
						test2
					</td>
				</tr>
			</table>
			<br>
		</td>
		<td style="word-wrap:break-word">
			<table>
				<tr>
					<td style="word-wrap:break-word">
						<a href="#" class="imga">
							<img border="0" src=images/logo.png  class="imga">
						</a>
					</td>
				</tr>
				<tr>
					<td>
						test3
					</td>
				</tr>
			</table>
			<br>
		</td>
		<td style="word-wrap:break-word">
			<table>
				<tr>
					<td style="word-wrap:break-word">
						<a href="#" class="imga">
							<img border="0" src=images/logo.png  class="imga">
						</a>
					</td>
				</tr>
				<tr>
					<td>
						test4
					</td>
				</tr>
			</table>
			<br>
		</td>
		<td style="word-wrap:break-word">
			<table>
				<tr>
					<td style="word-wrap:break-word">
						<a href="#" class="imga">
							<img border="0" src=images/logo.png  class="imga">
						</a>
					</td>
				</tr>
				<tr>
					<td>
						test5
					</td>
				</tr>
			</table>
			<br>
		</td>
	</tr>
</table>

Tu penses que c'est vraiment utile d'imbriquer autant les tableaux?
Utiliser word-wrap:break-word sur des zones qui ne contiennent pas de texte est inutile.
Chez moi rien ne dépasse, tes images sont peut-être simplement trop grandes...
Puisque la cellule du tableau dans laquelle tu mets ton tableau de tableaux a une largeur définie, il ne faut pas que la somme des images que tu mets soit plus grande que cette largeur définie...

Donc avant de trouver des solutions, commençons par faire preuve de bon sens

**kevinf** · 20/12/2006, 17h07

Oui, en fait, je sait que c'est plus grand et c'est le but, mais je voudrais un code qui des que c'est plus grand que la largeur du tableau ca fasse un retour à la ligne.

**MasterOfChakhaL** · 20/12/2006, 17h37

Envoyé par kevinf

Oui, en fait, je sait que c'est plus grand et c'est le but, mais je voudrais un code qui des que c'est plus grand que la largeur du tableau ca fasse un retour à la ligne.

Tu aurais pu le préciser dans ton premier message

Dans ce cas, évite les tableaux...
Tu enlèves tout les table, tr et td de la partie "en rouge" et ca devrait ressembler à quelque chose...

**kevinf** · 20/12/2006, 18h02

Ok, merci.

Intérieur du tableau "déborde" ?

HTML

Vue hybride

Partager

Partager