Discussion :

[Zebulon777]

Salut à tous...
Voila je vous explique mon problème en espérant être clair...

Dans une page HTML, j'ai plusieures section <DIV>.
Dans l'une des ces DIV, j'ai plusieurs tableaux <TABLE>.
Dans une cellule d'un de ces tableaux, j'ai une image avec la balise <IMG>.
Je dois ajouter SUR cette image des cases à cocher qui doivent être à des positions bien précises, mais le problème est que je n'arrive pas à les fixer sur l'image.
En fait, je veux dire que si je modifie quelque chose AU-DESSUS, les coordonnées ne sont plus bonnes, car les section <DIV> qui contiennent les cases à cocher montent ou descendent en fonction des modifications effectuées.
Comme vous pouvez le voir dans le morceau de code suivant, je place les cases à cocher dans des sections <DIV> que je place ensuite SUR l'image concernée.
Voila, en espérant avoir été suffisament claiur et surtout que vous pourrez m'aider, car pour le moment, à chaque modification, je dois remette de nouvelles coordonnées aux cases à cocher, et il y en a 24 !!!
Merci d'avance à tous...

Ps : si une solution HTML n'est pas possible, je ne suis pas contre une solution JavasScript.

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
 
<div id="CalcSaisie" style="Z-INDEX:11; LEFT:192px; VISIBILITY:visible; POSITION:absolute; TOP:180;"> 
...
...
<table width="570" height="330" border="3" bgcolor="#CCCCCC" id="TAB_LFPG">
<tr>
<td id="TD_LFPG_QFU" align="center" bgcolor="#00FFCC">
<div align="left"><b><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">QFU trac&eacute;s pour LFPG
<input name="C_Lfpg" type="checkbox" id="C_Lfpg" value="OUI" language="javascript" onClick="Trt_Qfu('LFPG', 'LFPG')">
</font></b>
</div></td>
<td id="TD_LFPG_EST" align="center"><b><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<input name="C_Lfpg_Est" type="checkbox" id="C_Lfpg_Est" value="OUI" language="javascript" onClick="Trt_Qfu('LFPG', 'EST')">
Est
</font></b> </td>
<td id="TD_LFPG_OUEST" align="center"><b><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<input name="C_Lfpg_Ouest" type="checkbox" id="C_Lfpg_Ouest" value="OUI" language="javascript" onClick="Trt_Qfu('LFPG', 'OUEST')">
Ouest</font></b></td>
</tr >
<tr id="TD_LFPG_IMG">
<td align="center" colspan="3">
<div align="center">
<img src="images/Divers/0Cdg00_00%20Gris%20QFU_Transparent.gif" name="IMG_LFPG" width="550" height="277" id="IMG_LFPG">
</div>
</td>
</tr>
</table>
<div id="CalcLFPGArr09L" style="position:absolute; top:856px; left:85px; z-index: 90; width: 100;">
<div align="right"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<b>Arr. QFU 09L
<input name="C__arr_cdg_qfu09L" type="checkbox" id="C__arr_cdg_qfu09L" value="OUI">
</b> </font>
</div>
</div>
<div id="CalcLFPGDep27" style="position:absolute; top:905px; left:15; width:100; z-index: 90;">
<div align="center"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>Dep. QFU 27
<input name="C__dep_cdg_qfu27" type="checkbox" id="C__dep_cdg_qfu27" value="OUI">
</b> </font>
</div>
</div>
<div id="CalcLFPGArr09R" style="position:absolute; top:962px; left:15px; width:100; z-index: 90;">
<div align="right"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">					<b>Arr. QFU 09R<input name="C__arr_cdg_qfu09R" type="checkbox" id="C__arr_cdg_qfu09R" value="OUI"></b> </font>
</div>
</div>
...
...
</div>

[GregPeck]

Je ne sais pas si ca répond à ta question parce que je ne suis pas sur d'avoir bien compris mais si tu change ton div de ça:

Code :

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

1
2
3
<div align="center">
<img src="images/Divers/0Cdg00_00%20Gris%20QFU_Transparent.gif" name="IMG_LFPG" width="550" height="277" id="IMG_LFPG">
</div>

en ça:

Code :

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

1
2
<div align="center" style="position:relative; width:550px; height:277px; background-image:url(images/Divers/0Cdg00_00%20Gris%20QFU_Transparent.gif)">
</div>

tu pourra mettre les checkbox en position par rapport au haut à gauche de l'image, comme ceci:

Code :

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

1
2
3
<div align="center" style="position:relative; width:550px; height:277px; background-image:url(images/Divers/0Cdg00_00%20Gris%20QFU_Transparent.gif)">
<input type="checkbox" style="position:absolute; top:10px; left:20px" />
</div>

Dans cet exemple, la case à cocher apparaitre aux coordonée 10,20 par rapport au haut à gauche de l'image.

[Zebulon777]

Ouarf...
Géniallisme, ça à l'air de fonctionner, je vais faire toutes les modifications avant de revenir vous tenir au courant.

Mais, petit pb, c'est pas trop grave, mais c'est moins bÔ : impossible de centrer verticalement l'image dans la cellule ?

Autres petits ennuis : je ne sais pas où est-ce que je dois mettre le libellé des checkbox, et j'aimerai aussi savoir comment faire pour positionner le libellé des checkbox à gauche ou à droite de celles-çi ? ?

[Zebulon777]

Ben alors, snif, y'a personne pour me sortir de la mouise ???

[GregPeck]

Essai avec le css background-position pour centrer tom image.

Et pour placer à droite ou à gauche, je ne te suis pas bien là .....

Code :

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

<input  type="checkbox" >Libellé à droite

Code :

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

Libellé à gauche<input  type="checkbox" >

[Zebulon777]

Aie aie, ça ne fonctionne pas : le libellé est affiché centré sur la <DIV> qui contient l'image.

Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
 
<tr valign="middle" id="TD_LFPG_IMG">
<td colspan="3" align="center">
<div align="center" style="position:relative; width:709px; height:277px; background-image:url(0Cdg00_00%20Gris%20QFU_Transparent.gif)">
<input name="C__arr_cdg_qfu09L___2" type="checkbox" id="C__arr_cdg_qfu09L___2" style="position:absolute; top:10px; left:20px; width: 100; background-color: #FFFF00; border-width: 1px; border-style: solid; color: #000000;" value="OUI" >libellé à gauche
libellé à droite<input name="C__arr_cdg_qfu09L___3" type="checkbox" id="C__arr_cdg_qfu09L___3" style="position:absolute; top:30px; left:20px; width: 100; background-color: #FFFF00; border-width: 1px; border-style: solid; color: #000000;" value="OUI" />
</div>
</td>
</tr>

Dur dur...

[GregPeck]

C'est normal tu positionne ton checkbox mais pas ton texte.
Pour ça, il faut que tu mette ton checkbox et ton texte dans un div et que tu applique la position sur ce div. Comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
<tr valign="middle" id="TD_LFPG_IMG">
<td colspan="3" align="center">
<div align="center" style="position:relative; width:709px; height:277px; background-image:url(0Cdg00_00%20Gris%20QFU_Transparent.gif)">
<div style="position:absolute; top:10px; left:20px;">
<input name="C__arr_cdg_qfu09L___2" type="checkbox" id="C__arr_cdg_qfu09L___2" style=" width: 100; background-color: #FFFF00; border-width: 1px; border-style: solid; color: #000000;" value="OUI" >libellé à gauche</div>
libellé à droite<input name="C__arr_cdg_qfu09L___3" type="checkbox" id="C__arr_cdg_qfu09L___3" style="position:absolute; top:30px; left:20px; width: 100; background-color: #FFFF00; border-width: 1px; border-style: solid; color: #000000;" value="OUI" />
</div>
</td>
</tr>

[Zebulon777]

Désolé du retard pour la réponse, mais j'ai du refaire pas mal de chose.
En tous cas : génial !
Tout fonctionne farpaitement.
Merci encore.