5568 sujets

Sémantique web et HTML

Positionner des éléments dans un cellule de tableau

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>)...
J'utilise la DTD suivante : xhtml11.dtd.

Question subsidiaire : quelle est la différence entre ces deux DTD : xhtml11.dtd et xhtml1-strict.dtd ?

Merci.
Rémy.
RemyVingtNeuf a écrit :
JJ'ai essayé de positionner la <DIV> en relatif, ceci ne fonctionne pas (je pensais que le positionnement relatif se ferait par rapport à la <TD>)...


A priori (difficile d'être précis sans ton voir ton code), ton élément td doit d'abord être lui-même en position relative, pour devenir le cadre de référence du positionnement absolu de des enfants.

RemyVingtNeuf a écrit :
Question subsidiaire : quelle est la différence entre ces deux DTD : xhtml11.dtd et xhtml1-strict.dtd ?


Todo : faire un item de la FAQ sur XHTML1.1, s'il n'y en a pas.

Pour résumer: aucune différrence utile a priori à ce niveau. Sinon, taper "XHTML1.1" dans la recherche de ce forum devrait te donner à lire.
Modifié par Laurent Denis (28 Jul 2006 - 17:09)
Voici mon code... En positionnant la TD en relatif ca fonctionne sous Firefox, mais pas sous MSIE...
Rémy.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </meta>
  <meta http-equiv="Content-Style-Type" content="text/css"> </meta>
  <meta http-equiv="Content-Language" content="fr"> </meta> 
  <title>Test</title>

  <style type="text/css">
    #divEnglobante {
      width : 300px;
      height : 100px;
      overflow-y : scroll;
      border : 1px solid purple;
    }
    
    table {
      table-layout : fixed; 
    }
    
    td {
      border : 1px solid red;    
    }
    
    div.divDeLaCellule {
      overflow : hidden; /* Pour tronque le texte */
    }
    
    col.colonne1 {
      width : 100px;      
    }
    
    col.colonne2 {
      width : 50px;      
    }

    /* Ce qui suit : 
       OK Gecko 
       KO MSIE */
    td { 
      position : relative;    
    }
    
    div.ligneHaut {
      position : relative;   
      top : 5px;
      left : 10px; 
    }
    
    div.ligneBas {
      position : relative;   
      top : 10px;
      left : -25px; 
    }
    
  </style>
   
</head>
  
<body>

 <div  id="divEnglobante" > 
   <table cellspacing=0  > 
     <colgroup> 
       <col class="colonne1"/>  
       <col class="colonne2"/>  
     </colgroup> 
          
     <tr> 
       <td> 
         <div class="divDeLaCellule">
           <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
           <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
         </div>
       </td> 
       <td> 
         &nbsp;
       </td> 
     </tr> 

     <tr> 
       <td> 
         <div class="divDeLaCellule">
           <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
           <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
         </div>
       </td> 
       <td> 
         &nbsp;
       </td> 
     </tr> 

     <tr> 
       <td> 
         <div class="divDeLaCellule">
           <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
           <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
         </div>
       </td> 
       <td> 
         &nbsp;
       </td> 
     </tr> 

     <tr> 
       <td> 
         <div class="divDeLaCellule">
           <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
           <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div> 
         </div>
       </td> 
       <td> 
         &nbsp;
       </td> 
     </tr> 
     
     
   </table> 
 </div> 

</body> 

</html>
Sans tester le code : IE va effectivement positionner les éléments absolute en fonction du dernier élément en position relative doté de haslayout (une chose à lui).

Un zoom:1 sur les td règle-t-il le problème pour IE (c'est une sorte d'incantation vaudou pour doter de layout) ?
zoom:1 ne suffit pas pour dompter les forces invisibles de MSIE...
Je ne sais à quel sortilège ou envoûtement me livrer...
Smiley decu
Rémy.
Bonjour,

Ah, j'aurais dû prendre le temps de regarder ton code Smiley cligne

Je ne sais pas vraiment ce que tu souhaites obtenir, mais il faut déjà commencer par éclaircir un premier problème :

- le positionnement relatif ne fait que déplacer un élément de sa position initiale en flux ou flottante. Les coordonnées top, left indiquent la valeur du déplacement par rapport à cette position d'origine, pas par rapport à un conteneur.

- pour "positionner" dans un conteneur, il fait employer la position absolue.
Modifié par Laurent Denis (29 Jul 2006 - 07:48)
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.
Sujet clos
Aller à