[javascript] Pourquoi mon div s'agrandit quand j'agrandis sa bordure ?

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous !

J'ai un problème.

J'ai créé un div qui a un fond rouge et une longueur de 50% de la cellule dans laquelle il se situe.
Un code javascript cacule une longueur qui est attribuée à la propriété borderLeftWidth du div (le border left à une couleur verte).

Voici le CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
.progressBar
{
    background-color:red;
    background-position:left;
    color:Green;
    border-left:solid 1px Lime;
    width:50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50,finishopacity=100,style=1);
}

Au chargement de la page, le code javascript suivant est appelé.

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
 
 
 
function setJsFunctionsView2()
{
var Div_1_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').offsetWidth * 0");
var Div_2_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_0').offsetWidth * 0");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').style.borderLeftWidth=Div_1_0_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_0').style.borderLeftWidth=Div_2_0_width;
var Div_1_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_1').offsetWidth * 0.036");
var Div_2_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').offsetWidth * 0.2");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_1').style.borderLeftWidth=Div_1_1_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').style.borderLeftWidth=Div_2_1_width;
var Div_1_2_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_2').offsetWidth * 0");
var Div_2_2_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_2').offsetWidth * 0");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_2').style.borderLeftWidth=Div_1_2_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_2').style.borderLeftWidth=Div_2_2_width;
var Div_1_3_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_3').offsetWidth * 0.033");
var Div_2_3_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_3').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_3').style.borderLeftWidth=Div_1_3_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_3').style.borderLeftWidth=Div_2_3_width;
var Div_1_4_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_4').offsetWidth * 0.04");
var Div_2_4_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_4').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_4').style.borderLeftWidth=Div_1_4_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_4').style.borderLeftWidth=Div_2_4_width;
var Div_1_5_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_5').offsetWidth * 0.018");
var Div_2_5_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_5').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_5').style.borderLeftWidth=Div_1_5_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_5').style.borderLeftWidth=Div_2_5_width;
}

Comme vous pouvez le constater sur le l'image que j'ai joint à ce thread, mes div changent de taille.
par exemple quand j'ai 100%, mon div fais le double de sa taille d'origine et je vois toujours du rouge alors que tout devrait être vert.

Quel est le problème ? Comment contourner cela ?

Merci beaucoup pour votre aide !!!

06/09/2006, 13h23
Auteur

bonjour,

en augmentant la taille de la bordure, réduis-tu la taille du div ?
Firefox (je crois) ne tient pas compte de l'épaisseur de la bordure dans la largeur ou la hauteur de l'élément donc si la bordure augmente, les dimensions de l'élément augmentent.

IE par contre, compte la bordure dans les dimensions de l'élément.

Bonjour Auteur,

Je suis sous IE (6.0) et tout se passe comme si la bordure ne comptait pas dans la dimension de mon div.

Pour un div, je fais ceci:
Code:

1 2 3 4 5 6 7 var Div_1_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').offsetWidth * 0.5"); document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').style.borderLeftWidth=Div_1_0_width;
Est il possible de faire en sorte qu'il prenne en compte les dimensions de mon border.
Sinon, comment règler ce problème ????

personnellement j'utiliserai deux div :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#divMoins{
background-color: #00AA00;
width: 0px;
display: none;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
#divPlus{
background-color: #FF0000;
width: 120px;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
.CRLF{
clear: both; 
visibility: hidden;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function plus(n)
{
 var elM = document.getElementById("divMoins");
 var elP = document.getElementById("divPlus");
 
 if (elM.style.display!="block")
  elM.style.display="block";
 
 if (elP.style.display!="block")
  elP.style.display="block"
 
 elM.style.width = Math.round(120-n*120/100);
 elP.style.width = Math.round(n*120/100);
 
 if (n==100)
    elM.style.display="none";
 
 if (n==0)
    elP.style.display="none";
}
 
//-->
</script>
 
</head>
 
<body>
<div id="divPlus">&nbsp;
</div>
<div id="divMoins">&nbsp;
</div>
<hr class="CRLF">
 
<input type="text" id="idN" name="" maxlength="10">%<br>
<input type="button" style="width: 50px" value="test" onclick="plus(document.getElementById('idN').value)"><br><br>
 
 
</body>
 
</html>

Entre une valeur entre 0 et 100% et appuie sur le bouton "test".

La ligne hr bien qu'invisble a son utilité : elle permet de mettre à la ligne (clear: both) tous les éléments situés après les div.

Seul inconvénient : tu ne peux plus écrire de valeur dans les div.

06/09/2006, 15h22
LE NEINDRE

J'ai testé ton script et ça marche très bien !!
Merci !!
Je vais tenter de l'adapter à mes besoins.
Je reposterai si j'ai des problèmes.

1 pièce(s) jointe(s)

Finalement, j'ai opté pour une autre solution, même si la tienne fonctionne très bien !

Le CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
 
.progressBar
{
    background-color:Silver;
    background-position:left;
    text-align:left;
    width:50%;
}
 
.capacityUsed { 
 
   background-position:left;
   background-color:Olive;
   width:0px;
}

Le code HTML:

Code:

1
2
3
 
 
<td align="center" valign="middle" style="width:20%;"><DIV id='VIEW2_GRIDVIEW_ROW_DIV_2_1' class='progressBar'><DIV id='VIEW2_GRIDVIEW_ROW_SPAN_2_1' class='capacityUsed'></DIV></DIV>16,7 %</td>

le javascript:

Code:

1
2
3
4
5
6
7
 
 
 
 
var Div_2_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').clientWidth * 0.167");
 
document.getElementById('VIEW2_GRIDVIEW_ROW_SPAN_2_1').style.width=Div_2_1_width;

Merci beaucoup pour ton aide Auteur :coucou:

07/09/2006, 14h00
SpaceFrog

Si tu veux en dsavoir un peu plus sur les raisons de ton problème, fais une recherche sur google avec "boxtype" c'est un bug connu pour lequel il existe des hacks ...
07/09/2006, 14h08
LE NEINDRE

J'irai faire un tour,
merci spaceFrog !