Problème pour adapter la taille d'une image à la cellule d'un tableau

Problème pour adapter la taille d'une image à la cellule d'un tableau - HTML/CSS - Programmation

Marsh Posté le 25-01-2008 à 16:05:08    

Bonjour à tous,
 
J'ai un problème qui commence à me faire tourner en bourrique !  
 
Voilà, j'ai un tableau de ce type :
 

Code :
  1. <table border="1" width="97%" cellspacing="0" cellpadding="0">
  2.   <tr height="18">
  3.     <td rowspan="2" bgcolor="#e1f1fc" width="18%">&nbsp;&nbsp;<b>Supplier</b></td>
  4.  <td rowspan="2" bgcolor="#e1f1fc" align="center" width="18%"><b>Product Name</b></td>
  5.  <td rowspan="2" bgcolor="#e1f1fc" align="center"><b>Comment</b></td>
  6.  <td colspan="3" align="center"><b>Status</b></td>
  7.   </tr>
  8.   <tr height="28">
  9.     <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 1</b></td>
  10.     <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 2</b></td>
  11.     <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 3</b></td>
  12.   </tr>
  13.   <tr>
  14.     <td height="40" width="18%" rowspan="2">&nbsp;Supplier 1</td>
  15.     <td height="40" width="18%" align="center">Product 1</td>
  16.  <td height="40">&nbsp;</td>
  17.  <td height="40" width="14%" align="center">Status 1</td>
  18.  <td height="40" width="14%" align="center">Status 2</td>
  19.  <td height="40" width="14%" align="center"><img src="../../../img/pix_grey.gif" border="0" width="100%" height="100%"></td>
  20.   </tr>
  21.   <tr>
  22.     <td height="40" width="18%" align="center">Product 2</td>
  23.  <td height="40" width="18%">Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla. Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</td>
  24.  <td height="40" width="14%" align="center">Status 3</td>
  25.  <td height="40" width="14%" align="center">Status 1</td>
  26.  <td height="40" width="14%" align="center"><img src="../../../img/pix_grey.gif" border="0" width="100%" height="100%"></td>
  27.   </tr>
  28. </table>


 
où pix_grey.gif est une image unie grise de 1x1 px
 
Sous IE, j'obtiens le résultat que je veux, la dernière cellule est complètement rempli de gris. Par contre sous firefox, l'image grise de la dernière cellule ne fait que 40px de hauteur et ne rempli donc pas toute la cellule, qui a une hauteur plus grande à cause du long commentaire "blablabla..."
 
Comment puis-je faire pour que la taille de l'image s'adapte à la hauteur de la cellule ?  
 
Merci d'avance pour votre aide !
 
 


---------------
(o) Venez poster une photo de votre nombril, pour faire avancer la science !
Reply

Marsh Posté le 25-01-2008 à 16:05:08   

Reply

Marsh Posté le 25-01-2008 à 16:17:44    

primo le code :
 

Code :
  1. <table border="1" width="97%" cellspacing="0" cellpadding="0">
  2. <tr height="18">
  3.  <td rowspan="2" bgcolor="#e1f1fc" width="18%">&nbsp;&nbsp;<b>Supplier</b></td>
  4.  <td rowspan="2" bgcolor="#e1f1fc" align="center" width="18%"><b>Product Name</b></td>
  5.  <td rowspan="2" bgcolor="#e1f1fc" align="center"><b>Comment</b></td>
  6.  <td colspan="3" align="center"><b>Status</b></td>
  7. </tr>
  8. <tr height="28">
  9.  <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 1</b></td>
  10.  <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 2</b></td>
  11.  <td bgcolor="#e1f1fc" align="center" width="14%"><b>Type 3</b></td>
  12. </tr>
  13. <tr>
  14.  <td height="40" width="18%" rowspan="2">&nbsp;Supplier 1</td>
  15.  <td height="40" width="18%" align="center">Product 1</td>
  16.  <td height="40">&nbsp;</td>
  17.  <td height="40" width="14%" align="center">Status 1</td>
  18.  <td height="40" width="14%" align="center">Status 2</td>
  19.  <td style="background-image:url(pix_grey.gif);background-repeat:repeat" height="40" width="14%" align="center"></td>
  20. </tr>
  21. <tr>
  22.  <td height="40" width="18%" align="center">Product 2</td>
  23.  <td height="40" width="18%">Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla. Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</td>
  24.  <td height="40" width="14%" align="center">Status 3</td>
  25.  <td height="40" width="14%" align="center">Status 1</td>
  26.  <td style="background-image:url(pix_grey.gif);background-repeat:repeat" height="40" width="14%" align="center"></td>
  27. </tr>
  28. </table>


 
Explication :
 
il faut mieux utiliser les feuilles de style pour remplir un élément :
définir une image de fond : background-image:url(pix_grey.gif)
on veut le répéter : background-repeat
repeat : on repete horizontalement et verticalement
repeat-x = ne répéter que horizontalement.
repeat-y =ne répéter que sur une horizontalement.

Reply

Marsh Posté le 25-01-2008 à 16:23:36    

Merci je connais le css :)
 
Le problème c'est qu'il faut que ces cases grises s'impriment obligatoirement ! Sans que l'utilisateur soit obligé de modifier les paramètres de son navigateur pour imprimer les backgrounds.
 
Et pour ça, je n'ai pas trouvé d'autre solution que d'insérer cette image grise  [:airforceone]  
 
Mais si quelqu'un a une autre solution, je suis preneuse !


---------------
(o) Venez poster une photo de votre nombril, pour faire avancer la science !
Reply

Marsh Posté le 25-01-2008 à 16:51:05    

Pour que les cases grises s'affichent obligatoirement, l'usage d'une image est peut etre pas judicieuse parce qu'il me semble qu'on peut dire au navigateur d'empécher l'affichage des images. Dans ce cas la, la case ne sera pas affichée en gris.

Reply

Marsh Posté le 25-01-2008 à 17:00:58    

En effet c'est possible mais ça doit quand même être rare que quelqu'un désactive l'affichage des images dans son navigateur. La plupart des sites web en deviennent illisibles :D
 
Et je me réfère surtout au paramétrage par défaut des navigateurs de mon entreprise, sachant que la plupart des salariés ne touchent pas à ces paramètres... Et vu qu'on ne veut pas leur demander de modifier ces paramètres, je n'ai pas trouvé de meilleur solution  [:airforceone]  
 
Quelqu'un aurait une meilleure idée ?
 


---------------
(o) Venez poster une photo de votre nombril, pour faire avancer la science !
Reply

Marsh Posté le 25-01-2008 à 17:39:02    

OUAIS MAIS en arretant de faire des tableaux ca serait super bien aussi

Reply

Marsh Posté le 25-01-2008 à 19:08:51    


Bon et sinon, à part me dire que tout ce qu'on m'a demandé de faire c'est nul, vous pourriez-pas m'aider ?  [:fabien27]  


---------------
(o) Venez poster une photo de votre nombril, pour faire avancer la science !
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed