Positionner des éléments dans un cellule de tableau

Positionner des éléments dans un cellule de tableau - HTML/CSS - Programmation

Marsh Posté le 28-07-2006 à 23:45:23    

Bonjour,
Je souhaite positionner des éléments <DIV> dans une cellule de tableau <TD>... Et je ne sais pas comment m'y prendre...
J'ai essayé de positionner la <DIV> en relatif, ceci ne fonctionne pas (je pensais que le positionnement relatif se ferait par rapport à la <TD> )... :  
 
Si je met le style suivant, cela fonctionne sous Gecko mais pas sous MSIE
 

Code :
  1. td {
  2.       position : relative;   
  3.     }
  5.     div.ligneHaut {
  6.       position : relative; 
  7.       top : 5px;
  8.       left : 10px;
  9.     }
  11.     div.ligneBas {
  12.       position : relative; 
  13.       top : 10px;
  14.       left : -25px;
  15.     }
  16.   </style>


 
Voici ma page :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html>
  6. <head>
  8.   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </meta>
  9.   <meta http-equiv="Content-Style-Type" content="text/css"> </meta>
  10.   <meta http-equiv="Content-Language" content="fr"> </meta>
  11.   <title>Test</title>
  13.   <style type="text/css">
  15.     #divEnglobante {
  16.       width : 300px;
  17.       height : 100px;
  18.       overflow-y : scroll;
  19.       border : 1px solid purple;
  20.     }
  22.     table {
  23.       table-layout : fixed;
  24.     }
  25.    
  26.     td {
  27.       border : 1px solid red;   
  28.     }
  30.     div.divDeLaCellule {
  31.       overflow : hidden; /* Pour tronque le texte */
  32.     }
  34.     col.colonne1 {
  35.       width : 100px;     
  36.     }
  38.     col.colonne2 {
  39.       width : 50px;     
  40.     }
  42.     /* Ce qui suit :  
  43.        OK Gecko  
  44.        KO MSIE */
  45.     td {
  46.       position : relative;   
  47.     }
  49.     div.ligneHaut {
  50.       position : relative; 
  51.       top : 5px;
  52.       left : 10px;
  53.     }
  55.     div.ligneBas {
  56.       position : relative; 
  57.       top : 10px;
  58.       left : -25px;
  59.     }
  60.   </style>
  61. </head>
  63. <body>
  64. <div  id="divEnglobante" >
  65.    <table cellspacing=0  >
  66.      <colgroup>
  67.        <col class="colonne1"/> 
  68.        <col class="colonne2"/> 
  69.      </colgroup>
  70.      <tr>
  71.        <td>
  72.          <div class="divDeLaCellule">
  73.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  74.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  75.          </div>
  76.        </td>
  77.        <td>
  78.          &nbsp;
  79.        </td>
  80.      </tr>
  81.      <tr>
  82.        <td>
  83.          <div class="divDeLaCellule">
  84.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  85.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  86.          </div>
  87.        </td>
  88.        <td>
  89.          &nbsp;
  90.        </td>
  91.      </tr>
  92.      <tr>
  93.        <td>
  94.          <div class="divDeLaCellule">
  95.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  96.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  97.          </div>
  98.        </td>
  99.        <td>
  100.          &nbsp;
  101.        </td>
  102.      </tr>
  103.      <tr>
  104.        <td>
  105.          <div class="divDeLaCellule">
  106.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  107.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  108.          </div>
  109.        </td>
  110.       <td>
  111.          &nbsp;
  112.        </td>
  113.      </tr>
  114.    </table>
  115. </div>
  116. </body>
  117. </html>

Reply

Marsh Posté le 28-07-2006 à 23:45:23   

Reply

Marsh Posté le 29-07-2006 à 08:43:21    

Peux-tu m'expliquer quel est l'interêt de mettre des div dans un tableau ? J'avoue que je calle...

Reply

Marsh Posté le 29-07-2006 à 11:50:56    

Bonjour,
 
Voici ce que je souhaite faire.
- Une DIV de hauteur fixe mais 'scrollable'.
- Dans cette DIV un tableau.
- Le scroll de la DIV permet de voir la totalité du tableau.
- Dans les cellules du tableau je souhaite pouvoir disposer un libellé (à partir du coin haut gauche) et un pictogramme (cadrer en bas à gauche de la cellule).
J'espère avoir été clair...
 
Je me suis donc dis que pour faire ceci il suffisait de mettre des DIV (une pour le texte et une pour le pictogramme) dans la cellule TD. De positionner celles ci en relatif.
Pour feinter (ou me croyant plus malin que les moteurs de rendus) j'ai forcé le positionnement de la TD en relatif. Cela fonctionne très bien sous Firefox mais pas sous MSIE, le tableau 'sort de la DIV'.
 
Merci.
Rémy.

Reply

Marsh Posté le 29-07-2006 à 11:56:43    

mais ta table n a pas besoin d etre dans une div ...c est deja une div elle meme [:pingouino]
et pour un truc du genre  
ma phrase
mon image  
t as pas besoin de creer des divs supplementaires [:pingouino]

Reply

Marsh Posté le 29-07-2006 à 12:35:43    

mIRROR, peux tu modifier mon code pour régler le problème. Je ne vois pas comment procéder.
Merci.
Rémy.

Message cité 1 fois
Reply

Marsh Posté le 29-07-2006 à 12:41:11    

Remy90 a écrit :

mIRROR, peux tu modifier mon code pour régler le problème. Je ne vois pas comment procéder.
Merci.
Rémy.


 
 
non
de rien
[:natas]

Reply

Marsh Posté le 29-07-2006 à 12:47:07    

Citation :

mais ta table n a pas besoin d etre dans une div ...c est deja une div elle meme [:pingouino]
et pour un truc du genre  
ma phrase
mon image  
t as pas besoin de creer des divs supplementaires [:pingouino]


 
mIRROR,
Heu... Des réponses comme ca je peux en faire des dizaines par jours...
En tout cas merci de ton secours...
Tes compétences en la matière m'ont beaucoup aider...
C'est quoi ton trip là ?
 
Rémy.

Reply

Marsh Posté le 29-07-2006 à 12:53:26    

On se calme tout le monde.
 
1) Il a besoin de son div pour le scroll car une table ou un td ne scroll pas (du moins pas chez tous les navigateurs).
2) Pour les autres questions, tu peux positionner les éléments à l'intérieur de tes cellules en absolute à condion bien sûr que la hauteur des cellules soient précisées.

Reply

Marsh Posté le 29-07-2006 à 13:00:55    

Merci Hermes...
Si je positionne les DIV à l'intérieur du TD en absolue, ceci 'explose' complètement le tableau..  :(  
 

Code :
  1. div.ligneHaut {
  2.       position : absolute; 
  3.       top : 5px;
  4.       left : 10px;
  5.     } 
  7.     div.ligneBas {
  8.       position : absolute; 
  9.       top : 10px;
  10.       left : -25px;
  11.     }


 
En fait mon code fonctionne très bien sous Gecko, mais je dois assurer la compatibilité...
Rémy.

Message cité 1 fois
Reply

Marsh Posté le 29-07-2006 à 13:02:19    

Remy90 a écrit :

Merci Hermes...
Si je positionne les DIV à l'intérieur du TD en absolue, ceci 'explose' complètement le tableau..  :(  
 

Code :
  1. div.ligneHaut {
  2.       position : absolute; 
  3.       top : 5px;
  4.       left : 10px;
  5.     } 
  7.     div.ligneBas {
  8.       position : absolute; 
  9.       top : 10px;
  10.       left : -25px;
  11.     }


 
En fait mon code fonctionne très bien sous Gecko, mais je dois assurer la compatibilité...
Rémy.


 
Au lieu des top et des left, utilise margin-top, margin-left. :o
 
Et fixe la hauteur de tes cellules...

Reply

Marsh Posté le 29-07-2006 à 13:02:19   

Reply

Marsh Posté le 29-07-2006 à 13:10:36    

Merci Hermes...
 
Le problème est que je suis susceptible de pouvoir positionner plusieurs DIV dans la TD. Dans mon exemple j'en ai mis uniquement deux.
Avec margin, je ne vois pas comment positionner plusieurs DIV les unes par rapports aux autres, mêmes si elles sont flottantes.
As tu le temps de tester ma page dans Firefox et MSIE pour bien comprendre mon soucis...
 
PS : Concernant le 'on se calme', je n'étais pas énervé simplement 'agacé'  ;).  
 
Rémy.

Reply

Sujets relatifs:

Leave a Replay

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