Placer un DIV au-dessus d'un TR
Bonjour à tous :)
Je crois que le titre en dit déjà beaucoup...
Ce que je cherche à faire c'est qu'un DIV ait se placer parfaitement par-dessus (le TR) et ce en ajustant sa taille. Les bordures du DIV ne doivent pas dépasser du TR mais peuvent seulement empiéter vers l'intérieur.
Alors voilà ce que j'ai :
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
77
78
79
80
81
82
83
84
85
86
87
88
|
<script>
// Class permettant de récupérer la position d'un objet
function GetObjectPosition( obj ) {
this.Left = 0 ; this.Top = 0;
if (obj) {
var objTemp = obj.offsetParent;
this.Left = obj.offsetLeft;
this.Top = obj.offsetTop;
while (objTemp) {
this.Left = this.Left + objTemp.offsetLeft;
this.Top = this.Top + objTemp.offsetTop;
objTemp = objTemp.offsetParent;
}
}
return this;
}
// Classe permettant de récupérer la taille d'un object
function GetObjectSize( obj ) {
this.Width = 0; this.Height = 0;
if (obj) {
if (obj.offsetWidth != null) {
this.Width = obj.offsetWidth;
this.Height = obj.offsetHeight;
}
}
return this;
}
// Class permettant de déplacer et redimensionner un object
function MoveAndSizeObject(objRef, left, top, width, height) {
objRef.style.left = left;
objRef.style.top = top;
objRef.style.width = width;
objRef.style.height = height;
}
// Lors du chargement du document
function OnDocuemntLoad() {
var tableMatrixTR = document.getElementById( "TestTR" );
var tableMatrixTRDivPosition = new GetObjectPosition( tableMatrixTR );
var tableMatrixTRDivSize = new GetObjectSize( tableMatrixTR );
var testDiv = document.getElementById( "TestDIV" );
MoveAndSizeObject( testDiv,
tableMatrixTRDivPosition.Left,
tableMatrixTRDivPosition.Top,
tableMatrixTRDivSize.Width,
tableMatrixTRDivSize.Height );
testDiv.style.visibility = "visible";
}
</script>
<style>
table.TableElem {
border-width: 1px;
border-spacing: 0px;
border-style: groove;
border-color: gray;
border-collapse: separate;
background-color: #fffafa;
}
td.CellElem {
width :80px;
height :80px;
border-width: 1px;
border-style :dotted ;
border-color: black;
cursor :default;
}
</style>
<body onload="return OnDocuemntLoad();">
<div id="TestDIV" style="z-Index :10000; position :absolute; visibility :hidden; border :10px solid red;"></div>
<table class="TableElem">
<tr id="TestTR">
<td class="CellElem">01</td>
<td class="CellElem">02</td>
<td class="CellElem">03</td>
</tr>
<tr id="TestTR2">
<td class="CellElem">04</td>
<td class="CellElem">05</td>
<td class="CellElem">06</td>
</tr>
</table>
</body> |
Remarquez que le DIV sous IE n'est pas parfaitement juxtaposé au-dessus du TR, et que sur FirexFox c'est encore pire.
Quelqu'un pourrait me donner un coup de main ?
Merci
