[HTML] Peut-être trop de cellule dans ma ligne ??

Version imprimable

20/02/2006, 16h47
LE NEINDRE

[HTML] Peut-être trop de cellule dans ma ligne ??

Bonjour à tous,

J'ai un problème de dimension avec une ligne de mon tableau.

J'ai un tableau qui comporte une seule ligne.
Dans cette ligne, je mets pleins de cellules(jusqu'à 700 cellules)
Et bien qu'ayant défini ma table avec une largeur de 100%, je me retrouve avec une largeur de table qui dépasse largement mon écran.
Dans mes cellules, je ne mets pas de texte, juste une couleur de fond.

Comment faire pour borner ma table à 100%, ne pas la faire dépasser ???

Merci pour votre aide !!!!
20/02/2006, 16h56
SpaceFrog

mets ton tableau dans un div de largeur 100% en overflow:auto
20/02/2006, 17h10
LE NEINDRE
Re-bonjour SpaceFrog,

Voilà, j'ai fait ceci:
Code:

1 2 3  <TR><TD colspan='2' width='100%'><DIV width='100%' style="overflow:'auto';" id='PROGRESSBAR'></DIV></TD></TR>
C'est dans le div que je créé la progressbar avec beaucoup de cellules (sous forme d'un tableau, qui a une seule ligne, et autant de cellules vides que de fichiers a analyser).

Le fait de mettre le div, n'a rien changé.
J'ai sûrement un problème de syntaxe ???? non ??
20/02/2006, 17h30
SpaceFrog

heu là tu parle de cellule ...
plus haut j'avais compris que c'est ton tableau qui débordait de la page ...

tu veux dire que dans ta cellule il y a un tableau ???
20/02/2006, 17h34
LE NEINDRE

Oui, j'ai un tableau1, dans lequel il y a plusieurs lignes.
Dans chaque lignes du tableau1, j'ai deux cellules.

Et Dans une cellule, je créé un tableau11.
Le tableau 11 contient 1 ligne et autant de cellules que j'ai de fichiers à analyser. Je rempli les cellules de ce tableau11 pour faire ma progressbar.

Le tableau1 a une largeur de 100%,
Le tableau11 a une largeur de 100%.

la cellule du tableau 1 qui contient le tableau11 est fusionnée en deux cellules (colspan=2) avec une largeur de 100%

Mais mon tableau11 déborder largement !!

Si tu veux faire une barre de progression, utilise plutot un systeme du style:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .capacityUsed { width: 100%; font-size:0; line-height:0; } .capacityUsed span { display: block; border: 1px solid #993A4B; height: 7px; font-size:0; line-height:0; -moz-box-sizing: border-box; } html>body #capacityBlock .capacityUsed span { height: 9px; }
Code:

<div class="capacityUsed"><span style="border-left-width: 1px;"></span></div>

Tu as plus qu'à modifier le border-left-width du span en javascript pour rendre la barre dynamique.

Citation:
Envoyé par _dranece_
Si tu veux faire une barre de progression, utilise plutot un systeme du style:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .capacityUsed { width: 100%; font-size:0; line-height:0; } .capacityUsed span { display: block; border: 1px solid #993A4B; height: 7px; font-size:0; line-height:0; -moz-box-sizing: border-box; } html>body #capacityBlock .capacityUsed span { height: 9px; }
Code:

<div class="capacityUsed"><span style="border-left-width: 1px;"></span></div>

Tu as plus qu'à modifier le border-left-width du span en javascript pour rendre la barre dynamique.
Je vais m'orienter vers cette solution.
Mais que veux dire
Code:

1 2 3 html>body #capacityBlock .capacityUsed span { height: 9px;
?????

21/02/2006, 10h40
franculo_caoulene

Cf. les sélecteurs CSS.
> n'est pas compris par IE.
21/02/2006, 10h52
_dranece_

En effet, c'est j'utilise html>body lorsque je ne veux pas qu'une déclaration css soit comprise par IE

Super !!!

J'ai une belle progressBar qui progresse bien ... 8O

Dans le CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .capacityUsed { width: 100%; font-size:0; line-height:0; } .capacityUsed span { display: block; border: 1px solid #993A4B; height: 7px; font-size:0; line-height:0; -moz-box-sizing: border-box; }
Dans le HTML
Code:

1 2 <TR><TD colspan='2' width='100%'><DIV class='CapacityUsed' width='100%'><span id='PROGRESSBAR' style="border-left-width: '1px';"></span></DIV></TD></TR>
Et dans le javascript (dans une boucle):
Code:

1 2 document.getElementById('PROGRESSBAR').style.borderLeftWidth=(compteur/TOTAL)*(parent.frames['corps'].document.body.offsetWidth);
Merci beaucoup pour cett solution(attention: borderLeftWidth, j'ai eu du mal à le trouver (mais j'ai un peu de mal aussi c'est vrai :roll: ))
:D :D
Bonne journée !!!

domage qu'elle ne progresse pas jusqu'au bout ... :cry:
il me reste toujours quelques pixels blancs ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type='text/css'>
 
.capacityUsed {
   width: 100%;
   font-size:0;
   line-height:0;
}
 
.capacityUsed span {
   display: block;
   border: 1px solid #993A4B;
   height: 7px;
   font-size:0;
   line-height:0;
   -moz-box-sizing: border-box;
}
</style>
 
 
</head>
 
<table style='width:100%;'>
	<TR>
		<TD colspan='2' width='100%'><DIV class='CapacityUsed' width='100%'><span id='PROGRESSBAR' style="border-left-width: '1px';"></span></DIV>
		</TD>
	</TR>
</table>
 
<script type='text/javascript'>
var compteur=0
var TOTAL=100
        setInterval("document.getElementById('PROGRESSBAR').style.borderLeftWidth=(compteur/TOTAL)*document.getElementsByTagName('table')[0].offsetWidth;compteur++",100);
</script>
</html>

21/02/2006, 13h36
_dranece_

Je vais voir si je peux éviter ce problème, il me semblait que ca marchait bien lorsque je l'avais codé mais c'était il y a quelques années ... Tu as le problème sous quel navigateur?
21/02/2006, 13h41
SpaceFrog

sous IE

dran =>

je bidouille autour de ton idée ...

peux tu me dire pourquoi ce code ne fait rien sous FFX ??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="ProgBar" style="width:300px;border:solid 1px red;overflow:hidden;display:block;">&nbsp;</div>
 
 
 
<script type='text/javascript'>
var compteur=1
var TOTAL=100
        var progress=setInterval(function(){document.getElementById('Progbar').style.cssText+=";border-left:solid "+((compteur/TOTAL)*document.getElementById('progbar').offsetWidth)+"px red;";
        compteur++;
        if (compteur==TOTAL+1){clearInterval(progress);alert('done')};}
        ,100);
</script>
</html>

c'est certainement lié au boxtype mais je ne vois pas pourquoi la bordure gauche ne change pas ...

21/02/2006, 14h25
SpaceFrog

arf ...
problème de debutant ... souci de casse ...
21/02/2006, 15h54
_dranece_

Désolé, on vient de me filer de grosses modifs sur un projet, j'aurai pas le temps de me pencher dessus avant demain.