Placer un DIV au-dessus d'un TR

**Erakis** · 23/07/2006, 06h26

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 :

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

**troumad** · 23/07/2006, 09h18

Sous FF, la raison est simple : la taille ne comprend pas l'épaisseur du bord

Fais un test avec :

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
[...]
   MoveAndSizeObject( testDiv, 
                      tableMatrixTRDivPosition.Left, 
                      tableMatrixTRDivPosition.Top, 
                      tableMatrixTRDivSize.Width-20, 
                      tableMatrixTRDivSize.Height-20 );
   testDiv.style.visibility = "visible";
}
</script>
 
<style>
table.TableElem {
	border-width: 10px;
	border-spacing: 0px;
[...]

**Erakis** · 23/07/2006, 09h39

Envoyé par troumad

Sous FF, la raison est simple : la taille ne comprend pas l'épaisseur du bord

Fais un test avec :

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
[...]
   MoveAndSizeObject( testDiv, 
                      tableMatrixTRDivPosition.Left, 
                      tableMatrixTRDivPosition.Top, 
                      tableMatrixTRDivSize.Width-20, 
                      tableMatrixTRDivSize.Height-20 );
   testDiv.style.visibility = "visible";
}
</script>
 
<style>
table.TableElem {
	border-width: 10px;
	border-spacing: 0px;
[...]

Pour Firefox cela fonctionne très bien et je vous en remerci beaucoup.

Cependant, pour IE il semble y avoir un problème de 1 ou 2 px en de décalage. Essayez et vous verrez

Donc, comment avec IE, régler ce problème ?

Merci

**troumad** · 23/07/2006, 09h45

Je n'ai pas IE sur mon PC que je préserve de tous virus Microsoft...

**Erakis** · 23/07/2006, 10h18

Me voilà bien avancé avec cette réponse

Toutefois, merci de ton aide troumad.
Quelqu'un d'autre pour m'expliquer ce qui ne fonctionne pas avec IE ?

**Erakis** · 23/07/2006, 18h11

En cherchant encore sur Google, je viens de remarquer que cela peut d'épendre du doctype du document. Mais encorè la, peut importe le doctype que je met, les browsers agissent encore très différemment, résultat le DIV ne se place pas correctement.

Placer un DIV au-dessus d'un TR

JavaScript

Discussions similaires

Partager

Partager