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