[résolu]Background-image sur td ne s'affiche pas

Dans le code suivant, mon background-image sur td ne s'affiche pas.

d'où cela vient-t-il?
Je ne vois rien dans les autres sujets qui répondraient à ma question...
Merci!

.fondo {
	background-image:url(images/fondoamatearrondi.jpg)
}


<tr >
    <td  align="center" class="fondo" >
		<tr>	
		<td align="center"><img src="images/autoretrato.jpg" width="183" height="275" align="absmiddle" /></td>
		<td ><p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>Visual Projects          </p>
			  <p>&nbsp;</p>
			  <p>Viviana Sanchez B.</p>
			  <p>Phone: 0032 (0) 487624045 </p>
			  <p>e-mail: vsb@vsb.com </p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
		</td>
	   </tr>
	   <tr>
		<td height="331" style="text-align:right"><a href="album1.html">Back to pictures>></a></td>        
	   </tr>
	</td>
  </tr>

Modifié par gillesgengoux (04 Aug 2010 - 16:08)

Hello

Il y a un souci dans ton code, un td ne peux pas contenir de tr (enfin je crois je viens de check la dtd strict pour être sure) du coup le navigateur ferme ton tr après class=fondo et en ouvre un autre. C'est un peu logique quand on y pense, un tr étant une ligne, on ne peux mettre une ligne dans une cellule, le navigateur corrige donc cette incohérence en fermant la ligne précédente et en ouvrant une nouvelle.

Voilà un screen de mon firebug pour que tu vois comment le navigateur interprète ton code :


J'ai mis un border pour voir plus clair, note que l'on voit un "bout" du fond bleu de l'image que j'y ai mis pour tester, mais que le tableau est construit comme si il manquait des "bouts".

Je ne sais pas à quel résultat final tu veux arriver, mais à ta place je reverrais mon code. Pourquoi ne pas utiliser des div plutôt que des tableaux par exemple ?

Salut,

gillesgengoux a écrit :
mon background-image sur td ne s'affiche pas. d'où cela vient-t-il?

Ton image s'affiche bien, mais dans une cellule qui a une hauteur de zéro (elle est vide, et aucune autre <td> non-vide n'est présente dans la <tr>).

En passant, vérifie bien la validité de ton code, parce qu'avec des enchaînements comme <tr><td><tr> tu risques d'avoir des comportements assez bizarres.

edit: grilled
Modifié par marcv (03 Aug 2010 - 11:51)

merci pour les réponses,

j'ai changé en remettant une table dans la table... et ça a l'air de marcher. on dirait qu'en effet on ne peut pas mettre un tr dans un td, ce qui parait un peu logique c'est vrai.

En profitant de vos réponses: quel "vérificateur de code" me conseilleriez vous, car ce que je suis en train de faire marche très bien avec mozilla FF mais pas avec IE?

Existe-t-il un type de programme qui compatibilise les codes aux différents navigateurs?
(ou un site qui vous parait bien fait pour m'aider à le rendre compatible...?)

Merci d'avance

gillesgengoux a écrit :
j'ai changé en remettant une table dans la table...

Humm du code bien lourd ^^ Je vais éviter le débat "les tables c'est mal vive les div", ne sachant pas le but final de ton site, mais pourquoi ne pas mettre ton image de fond dans un div, puis ta table dans ce div si vraiment tu tiens à faire un truc en table ?

Vérificateur de code ? Euh si tu parles de la validité, tu as celui du W3C ici

Sinon tu as des extensions pour firefox comme firebug ou webdeveloper (la flemme de chercher les liens je te laisse google) pour "débuguer"

Il n'existe pas de programme qui rend compatible un site d'un navigateur à un autre, du moins à ma connaissance, il faut tester. Si quelqu'un en a un je prend de suite En général avoir un code valide aide bien à maintenir une certains cohésion. Firefox, Safari et Chrome ont souvent le même rendu (et encore) à quelques px près, IE8 se défend, mais il faut souvent ruser pour IE7 et IE6 avec des css spécifiques etc
Modifié par saiko_sama (03 Aug 2010 - 13:01)