Problème de mise en forme avec tableaux (colonnes fusionnées + fonds)

Bonjour,

Je suis en train d'essayer de construire un tableau afin de placer à peu près correctement des images de fond.
Le tableau lui-même consiste en 5 lignes et 5 colonnes. La colonne du milieu est fusionnée (elle prend 3 lignes de haut.

Voici le code du tableau.

		<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="360" style="background-image: url(1.jpg); background-repeat: no-repeat; background-position: center right;">&nbsp;</td>
				<td style="width: 200px; background-image: url(2.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="width: 700px; background-image: url(3.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="width: 200px; background-image: url(4.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="background-image: url(5.jpg); background-repeat: no-repeat; background-position: center left;">&nbsp;</td>
			</tr>
			<tr>
				<td height="540" style="background-image: url(6.jpg); background-repeat: no-repeat; background-position: top right;"></td>
				<td style="width: 200px; background-image: url(7.jpg); background-repeat: no-repeat; background-position: top center;">&nbsp;</td>
				<td style="width: 700px; background-color: #000000;" rowspan="3">
					(ici du texte, beaucoup de texte)
				</td>
				<td style="width: 200px; background-image: url(9.jpg); background-repeat: no-repeat; background-position: top center">&nbsp;</td>
				<td style="background-image: url(10.jpg); background-repeat: no-repeat; background-position: top left;"></td>
			</tr>
			<tr>
				<td valign="top" style="background-image: url(11.jpg); background-repeat: repeat-y; background-position: top right;">&nbsp;</td>
				<td valign="top" style="width: 200px; background-image: url(12.jpg); background-repeat: repeat-y;">&nbsp;</td>
				<td valign="top" style="width: 200px; background-image: url(14.jpg); background-repeat: repeat-y;">&nbsp;</td>
				<td valign="top" style="background-image: url(15.jpg); background-repeat: repeat-y;">&nbsp;</td>
			</tr>
			<tr>
				<td height="250" valign="bottom" style="background-image: url(16.jpg); background-repeat: no-repeat; background-position: bottom right;">&nbsp;</td>
				<td style="width: 200px; background-image: url(17.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="width: 200px; background-image: url(19.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="background-image: url(20.jpg); background-repeat: no-repeat; background-position: bottom left;">&nbsp;</td>
			</tr>
			<tr>
				<td height="143" style="background-image: url(21.jpg); background-repeat: no-repeat; background-position: center right;">&nbsp;</td>
				<td style="width: 200px; background-image: url(22.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="width: 700px; background-image: url(23.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="width: 200px; background-image: url(24.jpg); background-repeat: no-repeat;">&nbsp;</td>
				<td style="background-image: url(25.jpg); background-repeat: no-repeat; background-position: center left;">&nbsp;</td>
			</tr>
		</table>

Le style est codé "en dur" pour le moment, donc le code est assez moche, mais tout y est.
Le problème se situe au niveau de la 3ème ligne (ligne bleue sur l'image jointe), le but est de répéter le fond des 2 colonnes extérieures afin qu'il prenne toute la hauteur de la colonne centrale ("(ici du texte, beaucoup de texte)")
Or à part sur Firefox où la répétition se fait correctement, sur les autres navigateurs la répétition ne se fait pas du tout ou l'image de fond ne s'affiche carrément pas.

j'en déduis donc que je me suis trompé quelque part, mais je ne vois pas trop où.
Pouvez-vous m'aider ?



Modifié par Kissifrot (11 Aug 2009 - 10:29)

Trouvé sur http://www.yoyodesign.org/doc/w3c/css2/tables.html#height-layout :
"CSS2 ne spécifie pas comment les cellules qui s'étendent sur plus d'une rangée influencent les calculs de la hauteur d'une rangée, sauf sur ce qui tient à la somme des hauteurs des rangées concernées, celle-ci devant être suffisamment grande pour contenir la cellule qui s'étend sur ces rangées."
Je l'interpète ainsi : Les navigateurs ne sont pas obligés de respecter la hauteur d'une rangée si dans le tableau se trouve une cellule s'étendant sur plusieurs rangées.
Appparemment FF le fait et pas IE (il équilibre la hauteur de rangées).
Je dirais donc qu'il n'y a pas de solution CSS à la hauteur d'une ligne d'un tel tableau.
C'est sans doute pourquoi tu as mis height="360" et non style="height:360px".
Mais avec juste du HTML, je ne pense pas qu'il n'y ait non plus d'instruction pour forcer la hauteur d'une ligne d'un tableau avec ROWSPAN.
Mais de toute façon, si le tableau sert à faire de la décoration, il existe d'autres méthodes de mise en page plus appropriées.
Quelqu'un va sûrement t'en conseiller.

Bonjour,

Lolololo a écrit :
Quelqu'un va sûrement t'en conseiller.

Bingo !

Il serait certainement préférable d'utiliser des div pour placer tes images (qui semblent fortement être une seule image découpée).

Par contre, il va être assez difficile de t'aider sans les images. Une page en ligne nous aiderait à visualiser le problème plus facilement.

Je suis d'accord pour les divs, mais j'avoue que j'ai eu encore plus de mal. C'est en effet une seule image découpée, mais avec une contrainte qui m'a fait obstacle : la taille en largeur de la page n'est pas fixée.

En tout cas, voici la page :
http://kekkaishi.animesfr.com/v5/kekkaishi_v5.html

(j'ai volontairement mis beaucoup plus de texte que prévu).
Modifié par Kissifrot (11 Aug 2009 - 18:44)