Probleme DIV scrollable dans un Tableau

Probleme DIV scrollable dans un Tableau - HTML/CSS - Programmation

Marsh Posté le 28-03-2006 à 14:23:23    

Salut,
 
Je cherche a integrer une DIV dans un TD de manière a ce que si le contenu du DIV est trop grand (en largeur) une barre de scroll aparaisse.
 
Le soucis est que j'aimerais fixer la DIV a 100% et non pas a une taille fixe en pixel.
 
J'ai utilisé la propriété OVERFLOW : scroll, mais sa ne marche pas.
Quand je fixe a 100%, mon tableau se trouve automatiquement grandit egalement ! :??:
 
Donc la je suis completement bloqué, je ne sais pas comment faire
 
Si vous avez une petite idée, sa serais pas de refus :)
 
Ps : quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc... merci ;)
 
 
 
Mon code :
 
 
 
<table cellSpacing="0" cellPadding="5" width="100%" border="0" style="Overflow:scroll">
 <tr>
  <td width="60%">Filtrer par agence et/ou par activité, par CAF.</td>
  <td width="20%"><asp:button id="btnImprimer" Runat="server" Text="Imprimer"></asp:button></td>
  <td width="20%"><asp:button id="btnExporter" Runat="server" Text="Exporter"></asp:button></td>
 </tr>
 <tr>
  <td style="HEIGHT: 5px" colSpan="3">Facturation</td>
 </tr>
 <tr height="250">
  <td colSpan="3">
   <div class="divmain" id="TotauxFacturation">
   <table cellSpacing="0" cellPadding="0" width="100%" border="0">
    <tr>
     <td style="BACKGROUND-COLOR: #66ffff">Total PV Prév. :</td>
    </tr>
   </table>
   </div>
  </td>
 </tr>
</table>
 
Contenu de la class DIVMAIN :
 
.divmain {    
 position:relative;
             width: 100%
             height: 400px;
 overflow:scroll
}


Message édité par massamu le 28-03-2006 à 14:25:02
Reply

Marsh Posté le 28-03-2006 à 14:23:23   

Reply

Marsh Posté le 28-03-2006 à 14:27:35    

essaye en mettant l'overflow sur ton td ...
quand a

Citation :

quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc...


ça n'a STRICTEMENT RIEN A VOIR!!! Utiliser de l'ASP n'est en rien en excuse pour utiliser des tableaux pour de la mise en page HTML...

Reply

Marsh Posté le 28-03-2006 à 15:44:59    

anapajari a écrit :

essaye en mettant l'overflow sur ton td ...
quand a

Citation :

quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc...


ça n'a STRICTEMENT RIEN A VOIR!!! Utiliser de l'ASP n'est en rien en excuse pour utiliser des tableaux pour de la mise en page HTML...


+1
 
Les tableaux imbriqués c'est moyen.
 
De plus :
 
OVERFLOW : scroll
 
Ca ne s'utilise pas sur un tableau, à ma connaissance c'est compatible uniquement avec une DIV.


Message édité par Shinuza le 28-03-2006 à 15:45:37

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 28-03-2006 à 15:56:22    

Ma remarque est basé sur les projets ASP, car je suis contrait d'utiliser cette methode la, ne me demandé pas pourquoi j'en ai pourtant parler a mon chef de projet.
 
Donc jprefere qu'on se focalise sur mon probleme qui je crois n'a pas de solution.
 
J'ai essayé un Overflow sur le TD et sa ne change rien, je crois que c'est un truc qu'est impossible a gerer, me trompe-je ?

Reply

Marsh Posté le 29-03-2006 à 02:09:56    

une iframe?

Reply

Marsh Posté le 29-03-2006 à 11:06:43    

ça ça a l'air de marcher non ?

Code :
  1. <table width="200" border="0">
  2. <tr valign="top">
  3.  <td width="100" height="50">&nbsp;</td>
  4.  <td width="100" height="50">&nbsp;</td>
  5. </tr>
  6. <tr valign="top">
  7.  <td width="100" height="50">&nbsp;</td>
  8.  <td width="100" height="50" ><div style="width:100%;height:100%;overflow:scroll;">Lorsqu'un lion, un z&egrave;bre, une girafe,
  9. un hippopotame et une poign&eacute;e
  10. de pingouins psychotiques fuient leur zoo new-yorkais
  11. pour secourir l'un des leurs,
  12. l'aventure s'&eacute;crit avec un grand A.
  13. Et lorsque le destin les r&eacute;unit sur l'&icirc;le de Madagascar,
  14. ils doivent apprendre en formation acc&eacute;l&eacute;r&eacute;e
  15. les rudiments de la vie &agrave; l'air libre</div> </td>
  16. </tr>
  17. </table>


http://www.freedfromparis.com/temp/OR/_test/test3.htm
 
je pense qu'il faut que tu donnes une taille fixe à ton td dans lequel tu mets ton div, car la valeur 100% est par rapport à l'élément parent il me semble... sinon ça marche pas


Message édité par freed102 le 29-03-2006 à 13:00:18
Reply

Marsh Posté le 29-03-2006 à 12:16:07    

massamu a écrit :


J'ai essayé un Overflow sur le TD et sa ne change rien, je crois que c'est un truc qu'est impossible a gerer, me trompe-je ?


 
L'overflow, c'est dans le DIV qu'il faut le mettre.
 
<div class="divmain" id="TotauxFacturation" style="overflow:scroll;">  
 
Si je dis pas de bêtises.
 

Message cité 1 fois
Message édité par MrNatas le 29-03-2006 à 12:17:50
Reply

Marsh Posté le 29-03-2006 à 12:57:51    

C'est ça effectivement


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 29-03-2006 à 17:47:16    

MrNatas a écrit :

L'overflow, c'est dans le DIV qu'il faut le mettre.
 
<div class="divmain" id="TotauxFacturation" style="overflow:scroll;">  
 
Si je dis pas de bêtises.


 
J'ai essayer egalement, sa ne fonctionne pas, le DIV force la taille du  TD le contenant

Reply

Marsh Posté le 29-03-2006 à 17:52:51    

je vois ce que tu veux dire...
Tu pourrais essayer en mettant ton div en dehors de ton tableau et en lui mettant une position en absolute là ou tu veux le placer, ça fera comme si.

Reply

Marsh Posté le 29-03-2006 à 17:52:51   

Reply

Marsh Posté le 29-03-2006 à 18:55:32    

Si je le met Hors de mon tableau plus rien n'empechera au DIV de grandir horyzontalement.
 
J'aimerais eviter de lui donner une taille fixe en pixel en fait, c'est pour ca que je l'ai inclu dans un TD, afin de le forcer a rester a l'interieur.

Reply

Marsh Posté le 29-03-2006 à 18:56:28    

Je crois que tu dois définir une taille fixe pour la div pour qu'elle passe en overflow tout le contenu qui sortirait en temps normal.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 29-03-2006 à 18:57:59    

Ok bah c'est bien dommage tout ca :(

Reply

Marsh Posté le 29-03-2006 à 19:04:13    

Shinuza a écrit :

Je crois que tu dois définir une taille fixe pour la div pour qu'elle passe en overflow tout le contenu qui sortirait en temps normal.


 
Je crois même que t'en es sûr ^^ , ça semble logique !

Reply

Marsh Posté le 29-03-2006 à 19:04:28    

Pourquoi ça?


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 29-03-2006 à 19:55:52    

Parce que si tu met pas de taille fixe à ton div, c'est normal qu'il s'adapte au contenu. Il grandit au fur et a esure que tu le remplit.
 
Donc essaie width:800px; height:100px; overflow:scroll; ça va peut être marcher.

Reply

Marsh Posté le 29-03-2006 à 20:45:51    

Le scroll fonctionne quand je met une taille fixe y'a pas de probleme ca :)
 
Le truc, c'est que j'aurais préféré que je le mette dans un TABLEAU, et qu'ensuite je lui mette width = 100% et que je mette a mon tableau la largeur 80% ainsi je suis sur que le DIV ne sera jamais trop large pour toutes les resolutions.
 
Je sais pas si je suis tres clair :??:
 
En gros si je met un taille fixe a mon DIV, il se peut qu'il soit trop large pour de basses résolutions ce qui ne m'arrange pas du tout.
 
Voila voila :)

Reply

Marsh Posté le 29-03-2006 à 20:56:35    

Bah un petit script pour détecter les résolutions alors ?
 
A moins que tu ne mette la taille fixe qu'en  hauteur, mais je me demande si tu vas pas te retrouver avec un div de 300m de lomng....


Message édité par MrNatas le 29-03-2006 à 20:57:59
Reply

Marsh Posté le 29-03-2006 à 22:14:10    

Voila c'est ce que sa donne, un DIV super large lol
 
Enfin bon c'est pas grave je le mettrais en taille fixe :)

Reply

Marsh Posté le 12-07-2006 à 18:04:12    

massamu a écrit :

Voila c'est ce que sa donne, un DIV super large lol
 
Enfin bon c'est pas grave je le mettrais en taille fixe :)


 
J'ai le meme probleme.
Ca fonctionne sous IE et opera mais pas sous Firefox ou le div prend la taille du contenu...
Bref impossible d'avoir une page contenant une entete et un pied de page de taille fixe et un contenu prenant le reste de la place et scrollable sans recourir au script...
 

Message cité 1 fois
Message édité par nithril le 12-07-2006 à 18:05:51
Reply

Marsh Posté le 12-07-2006 à 18:39:19    

nithril a écrit :

J'ai le meme probleme.
Ca fonctionne sous IE et opera mais pas sous Firefox ou le div prend la taille du contenu...
Bref impossible d'avoir une page contenant une entete et un pied de page de taille fixe et un contenu prenant le reste de la place et scrollable sans recourir au script...


 
Non, c'est pas impossible. Faites une recherche avec mon nom, j'ai donné la solution il y a un ou deux ans de ça à peu près...  :o  

Reply

Marsh Posté le 12-07-2006 à 18:47:24    

La solution :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  5. <title>test</title>
  6.  <style type="text/css" media="screen"><!--
  7. html,body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden }
  8. .tbl-test  { position: absolute; width: 100%; height: 100% }
  9. .cell1 { background-color: #6fc; height: 50px }
  10. .cell2   { background-color: #900; vertical-align: top; height: 100% }
  11. .cell3 { background-color: #6ff; height: 50px }
  12. .inter    { position: relative; height: 100% }
  13. .tst-div          { color: white; position: absolute; width: 100%; height: 100%; overflow: auto }
  14. --></style>
  15. </head>
  16. <body>
  17. <table class="tbl-test" cellspacing="0" cellpadding="0">
  18. <tr>
  19.  <td class="cell1">
  20.  </td>
  21. </tr>
  22. <tr>
  23.  <td class="cell2">
  24.  <div class="inter">
  25.  <div class="tst-div">
  26.  machin...<br />
  27.  machin...<br />
  28.  machin...<br />
  29.  machin...<br />
  30.  machin...<br />
  31.  machin...<br />
  32.  machin...<br />
  33.  machin...<br />
  34.  machin...<br />
  35.  machin...<br />
  36.  machin...<br />
  37.  machin...<br />
  38.  machin...<br />
  39.  machin...<br />
  40.  machin...<br />
  41.  machin...<br />
  42.  machin...<br />
  43.  machin...<br />
  44.  machin...<br />
  45.  machin...<br />
  46.  machin...<br />
  47.  machin...<br />
  48.  machin...<br />
  49.  machin...<br />
  50.  machin...<br />
  51.  machin...<br />
  52.  machin...<br />
  53.  machin...<br />
  54.  machin...<br />
  55.  machin...<br />
  56.  machin...<br />
  57.  machin...<br />
  58.  machin...<br />
  59.  machin...<br />
  60.  machin...<br />
  61.  machin...<br />
  62.  machin...<br />
  63.  machin...<br />
  64.  machin...<br />
  65.  machin...<br />
  66.  machin...<br />
  67.  machin...<br />
  68.  machin...<br />
  69.  machin...<br />
  70.  machin...<br />
  71.  machin...<br />
  72.  machin...<br />
  73.  machin...<br />
  74.  machin...<br />
  75.  machin...<br />
  76.  machin...<br />
  77.  machin...<br />
  78.  machin...<br />
  79.  machin...<br />
  80.  machin...<br />
  81.  machin...<br />
  82.  machin...<br />
  83.  machin...<br />
  84.  machin...<br />
  85.  machin...<br />
  86.  machin...<br />
  87.  machin...<br />
  88.  machin...<br />
  89.  machin...<br />
  90.  machin...<br />
  91.  machin...
  92.  </div>
  93.  </div>
  94.  </td>
  95. </tr>
  96. <tr>
  97.  <td class="cell3">
  98.  </td>
  99. </tr>
  100. </table>
  101. </body>
  102. </html>

Reply

Marsh Posté le 12-07-2006 à 21:15:13    

Yes merci!
 
Maintenant pourquoi ca marche ? J'imagine qu'en absolute il s'adapte au parent et non pas a son contenu

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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