Discussion :

[LE NEINDRE]

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 !!!!

[SpaceFrog]

mets ton tableau dans un div de largeur 100% en overflow:auto

[LE NEINDRE]

Re-bonjour SpaceFrog,

Voilà, j'ai fait ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!-- Ligne 6 : ProgressBar-->
<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 ??

[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 ???

[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 !!

[_dranece_]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[LE NEINDRE]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?????

[franculo_caoulene]

Cf. les sélecteurs CSS.
> n'est pas compris par IE.

[_dranece_]

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

[LE NEINDRE]

Super !!!

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


Dans le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ))

Bonne journée !!!

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[_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?

[SpaceFrog]

sous IE

[SpaceFrog]

dran =>

je bidouille autour de ton idée ...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[SpaceFrog]

arf ...
problème de debutant ... souci de casse ...

[_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.