Usine à gaz pour coins arrondis ... souci de height

**SpaceFrog** · 16/02/2006, 15h52

Bon je vous jette le code comme ça, c'est encore assez brouillé et pas optimisé ...
Mais j'ai déja un souci de déformation de hauteur des cellules ...
le but est d'attribuer à une série de divs d'un pixel de haut(autants que de pixels en hauteur) une largeur calculée de façon à arrondir les coins ...
je subodore un souci de boxtype car la cellule se déforme en hauteur ...

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<html>
<head>
<title>Nouvelle page 1</title>
 
 
</head>
 
 
<script type='text/javascript'>
var TabWidths= new Array()
var tl
var tr
var bl
var br
 
function Widths(lines){
 var DivCount=lines
 for (i=0;i<DivCount;i++){
		var Y=i
		var R=DivCount;
		TabWidths.push(Math.ceil(R*Math.sin(Math.acos(Y/R))))
		}
 }		
 
 
function Corners(){
 var fl= document.getElementsByTagName('tr')[0]
 var ll= document.getElementsByTagName('tr')[document.getElementsByTagName('tr').length-1]
 tl=fl.getElementsByTagName('td')[0]
 tl.style.textAlign="right"
 tr=fl.getElementsByTagName('td')[fl.getElementsByTagName('td').length-1] 
 tr.style.textAlign="left"
 
 bl=ll.getElementsByTagName('td')[0]
 tl.style.textAlign="right"
 
 br=ll.getElementsByTagName('td')[ll.getElementsByTagName('td').length-1] 
 br.style.textAlign="left"
 
 var tlW=fl.offsetHeight
 var trW=ll.offsetHeight
 
 tl.style.width=tlW
 tr.style.width=tlW
 bl.style.width=tlW
 br.style.width=tlW
 alert(tlW)
 MkDivs(tlW,tl)
 MkDivs(tlW,tr)
 MkDivs(tlW,bl)
 MkDivs(tlW,br)
 
 }
 
 
 function MkDivs(Count,Paste){
  Widths(Count)
  for(i=0; i<Count-1;i++){var NewDiv =document.createElement('div');
								NewDiv.style.cssText="background-Color:red;height:1px;line-height:1px; font-size:1px;border:0px;"
								Paste.style.backgroundColor='white';
  								Paste.style.padding='0px';
  								Paste.style.margin='0px';
  								Paste.style.border='0px'
  								Paste.style.lineHeight='1px'
  								switch (Paste) { 
  												case tl: 	tl.style.textAlign='right';
  															NewDiv.style.width=TabWidths[i];
  															break;
  												case tr:  NewDiv.style.textAling='left';
  															NewDiv.style.width=TabWidths[i];
  															break;
 
 
 
  												case bl: 	bl.style.textAlign='right';
  															NewDiv.style.width=TabWidths[Count-i-1];
  															break;
  												case br:  	br.style.textAlign='left';
  															NewDiv.style.width=TabWidths[Count-i-1];
  															break;
  												}
 								Paste.insertBefore(NewDiv,Paste.firstChild)
 								}
 								Paste.removeChild(Paste.lastChild)
 	}
 
 
 
 
 
</script>
<body onload="Corners();">
<table style="background-color:red;border-collapse:collapse; " >
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td></td>
</tr> 
<tr>
 <td></td>
 <td>cxwvxcvwvxcv</td>
 <td></td>
</tr> 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td></td>
</tr> 
 
</table>
 
</body>

**SpaceFrog** · 16/02/2006, 16h38

je confirme qu'il doit bien s'agir d'un problème de pixel no carré ...

en effet mon array de largeurs comporte X élements et l'élément le plus large mesure X px ...

tous les divs étant à 1px de haut, je devrais si je les empile avois une hauteur totales de X px ...

ce n'est pas le cas

**denisC** · 16/02/2006, 16h50

Envoyé par SpaceFrog

tous les divs étant à 1px de haut, je devrais si je les empile avois une hauteur totales de X px ...

Effectivement, si tu mets une de tes lignes en vert au lieu de rouge, tu verras clairement qu'elle fait 2px de haut et non pas 1.....

Pourquoi ne pas utiliser des techniques type sliding-doors???? Avec 4 coins, c'est plus difficile, mais à mon avis le rendu sera meilleur que ton truc, et le HTML pas plus sale

**SpaceFrog** · 16/02/2006, 17h04

Denismerci de la copnfirmation, j'aurais du penser à modifier la couleur des bordures ...
je vais simplement diviser le nombre par deux ...

C'est juste un exercice afin d'éviter l'utilisation d'images ...

**denisC** · 16/02/2006, 17h05

Envoyé par SpaceFrog

tous les divs étant à 1px de haut, je devrais si je les empile avois une hauteur totales de X px ...

Rajoute:

Code :

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

1
2
 
overflow:hidden;

Dans le style de tes divs et me demande même pas pourquoi.....

**SpaceFrog** · 16/02/2006, 17h10

arf pas foutu de faire une cellule carré ....

**SpaceFrog** · 16/02/2006, 18h00

A mon avis c'est un truc pour javatwister ...

JT si tu nous regardes ...

s

**denisC** · 17/02/2006, 08h24

Envoyé par SpaceFrog

A mon avis c'est un truc pour javatwister ...

JT si tu nous regardes ...

s

Ben, tu as essayé mon truc? Ca marche (très) bien chez moi ?!?

:

**SpaceFrog** · 17/02/2006, 08h32

?? overflow:hidden ??

tu es sous Firefox ou IE ?

sous IE pour moi ça ne change rien ...

**denisC** · 17/02/2006, 08h35

Envoyé par SpaceFrog

sous IE pour moi ça ne change rien ...

Bon, j'ai peut-être légerement bidouillé ton code ailleurs, mais en tout cas, sous IE, ça marche:

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<html>
<head>
<title>Nouvelle page 1</title>
 
 
</head>
 
 
<script type='text/javascript'>
var TabWidths= new Array()
var tl
var tr
var bl
var br
 
function Widths(lines){
 var DivCount=lines
 for (i=0;i<DivCount;i++){
      var Y=i
      var R=DivCount;
      TabWidths.push(Math.ceil(R*Math.sin(Math.acos(Y/R))))
      }
 }
 
 
function Corners(){
 var fl= document.getElementsByTagName('tr')[0]
 var ll= document.getElementsByTagName('tr')[document.getElementsByTagName('tr').length-1]
 tl=fl.getElementsByTagName('td')[0]
 tl.style.textAlign="right"
 tr=fl.getElementsByTagName('td')[fl.getElementsByTagName('td').length-1]
 tr.style.textAlign="left"
 
 bl=ll.getElementsByTagName('td')[0]
 tl.style.textAlign="right"
 
 br=ll.getElementsByTagName('td')[ll.getElementsByTagName('td').length-1]
 br.style.textAlign="left"
 
 var tlW=fl.offsetHeight
 var trW=ll.offsetHeight
 
 tl.style.width=tlW
 tr.style.width=tlW
 bl.style.width=tlW
 br.style.width=tlW
 alert(tlW)
 MkDivs(tlW,tl)
 MkDivs(tlW,tr)
 MkDivs(tlW,bl)
 MkDivs(tlW,br)
 
 }
 
 
 function MkDivs(Count,Paste){
  Widths(Count)
  for(i=0; i<Count-1;i++){var NewDiv =document.createElement('div');
                        NewDiv.style.cssText="background-Color:red;height:1px;line-height:0; font-size:0;border:0;border:collapse;margin:0;padding:0;width:100%;overflow:hidden;"
                        Paste.style.backgroundColor='white';
                          Paste.style.padding='0px';
                          Paste.style.margin='0px';
                          Paste.style.border='0px'
                          Paste.style.lineHeight='0px'
                          switch (Paste) {
                                      case tl:    tl.style.textAlign='right';
                                               NewDiv.style.width=TabWidths[i];
                                               break;
                                      case tr:  NewDiv.style.textAling='left';
                                               NewDiv.style.width=TabWidths[i];
                                               break;
 
 
 
                                      case bl:    bl.style.textAlign='right';
                                               NewDiv.style.width=TabWidths[Count-i-1];
                                               break;
                                      case br:     br.style.textAlign='left';
                                               NewDiv.style.width=TabWidths[Count-i-1];
                                               break;
                                      }
                         Paste.insertBefore(NewDiv,Paste.firstChild)
                         }
                         Paste.removeChild(Paste.lastChild)
    }
 
 
 
 
 
</script>
<body onload="Corners();">
<table style="background-color:red;border-collapse:collapse; " >
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td>cxwvxcvwvxcv</td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td></td>
</tr>
 
</table>
 
</body>
 
</html>

A priori, je ne me souviens avoir changé que le cssText.

**SpaceFrog** · 17/02/2006, 08h52

arf non DenisC tu as tout a fait raison ...

Je ne collais pas l'overflow sur le bon objet !!!

Bon reste à paufiner deux trois petite choses et j'en ferais une proposition de code source pour arrondir les angles de tableaux ...

genre:
- detection de tous les tableaux de la page de class="coinsRonds" et application de la fonction à ces tableaux
- detection automatique de la couleur de fond du tableau
- ou possibilité de passer la couleur de fond en paramètre
- également l'uniformisation de largeur de la première et dernière colone du tableau qui pose problème ...

Parcontre que l'overflow:hidden joue sur la hauter du div !!! c'est très fort ...
Encore un problème de boxtype, cela voudrait dire qu'en overflow:hidden la bordure est supprimée ???

Question subsidiaire comment est tu arrivé à cette trouvaille DenisC ???

**denisC** · 17/02/2006, 09h03

Envoyé par SpaceFrog

Parcontre que l'overflow:hidden joue sur la hauter du div !!! c'est très fort ...
Encore un problème de boxtype, cela voudrait dire qu'en overflow:hidden la bordure est supprimée ???

Microsoft te répondrais que "This behavior is by design." (réponse habituelle à tous les bugs qu'il n'arrivent pas à éclaircir).

Envoyé par SpaceFrog

Question subsidiaire comment est tu arrivé à cette trouvaille DenisC ???

Je le savais depuis que j'ai 5 ans

est ton ami...

**SpaceFrog** · 17/02/2006, 09h13

tu as trouvé de la doc la dessus dans google ? j'ai pas du chercher avec la bonne expression ...
tu aurais un lien

**denisC** · 17/02/2006, 09h34

Envoyé par SpaceFrog

tu as trouvé de la doc la dessus dans google ? j'ai pas du chercher avec la bonne expression ...
tu aurais un lien

De la doc c'est beaucoup dire:
http://www.codecomments.com/ASP_.NET_Webcontrols/message769572.html

Avec comme recherche google:
div "1 pixel" height IE

Usine à gaz pour coins arrondis ... souci de height

JavaScript

Vue hybride

Discussions similaires

Partager

Partager