Problème de coordonnées dans des balises

Version imprimable

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:

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

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:

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:

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:

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.

30/01/2007, 13h14
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 ? ?
01/02/2007, 13h04
Zebulon777

Ben alors, snif, y'a personne pour me sortir de la mouise ??? ;););)
01/02/2007, 13h13
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:

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

Code:

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

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

Voici le code :

Code:

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

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:

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>

06/02/2007, 07h26
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.