Position image et input text

1 pièce(s) jointe(s)

Bonjour,

Voici ci-joint un schéma de ce que je voudrais réaliser.

Savez-vous comment je peux faire pour positionner mes fleches et mes zones de texte de manière fixe?

Merci d'avance pour votre aide

Salut,

Je te conseillerai de t'orienter du côté de la propriété position : http://torgar.developpez.com/glossai....php#aposition

Merci,

J'ai réussi à faire ce que je voulais. Par contre, j'ai une légère différence de position entre IE et Chrome.

Y-a-t-il un moyen de régler ce problème?

Oui surement.

ça m'aide beaucoup ;)

Qu'est-ce que tu veux qu'on te dise de plus ?
Tu n'as pas montré la moitié du début d'une ligne de code, on va pas non plus invoquer des forces surnaturelles pour deviner ce qui ne va pas...

Fichier PHP:

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
<div class="content">
 
 
		<center>
			<div id="tiroir">			
 
			<div id="txt1" style="position: relative; left: 130px;top: 2px;">
				R&eacutef ATMP<BR>
				<INPUT TYPE='text' VALUE='<?php print $id; ?>' ID='id_tiroir' NAME='id_tiroir' SIZE='50' onchange='ajout()'>
			</div>
 
			<div id="txt1" style="position: relative; left: 130px;top: 70px;">
				Accepteur de pièces<BR>
				<INPUT TYPE='text' <?php print $enabled; ?> VALUE='<?php print $ACCEPTEUR; ?>' ID='sn_accepteur' NAME='sn_accepteur' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_accepteur", "err_SR_sn_accepteur", "sn_accepteur")'>
				<div id='err_SR_sn_accepteur' style="position: absolute; left: 190px;top: 50px;"></div>
			</div>
			<div id="txt2" style="position: relative; left: 130px;top: 148px;">
				Précaisse<BR>
				<INPUT TYPE='text' <?php print $enabled; ?> VALUE='<?php print $PRECAISSE; ?>' ID='sn_precaisse' NAME='sn_precaisse' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_precaisse", "err_SR_sn_precaisse", "sn_precaisse")'>
				<div id='err_SR_sn_precaisse' style="position: absolute; left: 190px;top: 50px;"></div>
			</div>
			<div id="txt3" style="position: relative; left: 130px;top: 228px;">
				Vending Pass<BR>
				<INPUT TYPE='text' <?php print $enabled; ?> VALUE='<?php print $VP; ?>' ID='sn_vendingpass' NAME='sn_vendingpass' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_vendingpass", "err_SR_sn_vendingpass", "sn_vendingpass")'>
				<div id='err_SR_sn_vendingpass' style="position: absolute; left: 190px;top: 50px;"></div>
			</div>
			<div id="txt4" style="position: relative; left: -70px;top:300px;">
				Entrée de pièces<BR>
				<INPUT TYPE='text'  <?php print $enabled; ?> VALUE='<?php print $ENTREE; ?>' ID='sn_entreepieces' NAME='sn_entreepieces' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_entreepieces", "err_SR_sn_entreepieces", "sn_entreepieces")'>
				<div id='err_SR_sn_entreepieces' style="position: absolute; left: 210px;top: 50px;"></div>
			</div>
			<div id="txt4" style="position: relative; left: -110px;top: 410px;">
				Moteur entrée pièces<BR>
				<INPUT TYPE='text'  <?php print $enabled; ?> VALUE='<?php print $MOTEUR; ?>' ID='sn_moteur' NAME='sn_moteur' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_moteur", "err_SR_sn_moteur", "sn_moteur")'>
				<div id='err_SR_sn_moteur' style="position: absolute; left: 200px;top: 50px;"></div>
			</div>
 
			<div id="txt4" style="position: relative; left: -140px;top: 480px;">
				Carte monnayeur<BR>
				<INPUT TYPE='text'  <?php print $enabled; ?> VALUE='<?php print $CARTE; ?>' ID='sn_cartemonnay' NAME='sn_cartemonnay' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_cartemonnay", "err_SR_sn_cartemonnay", "sn_cartemonnay")'>
				<div id='err_SR_sn_cartemonnay' style="position: absolute; left: 200px;top: 50px;"></div>
			</div>
 
			<div id="txt4" style="position: relative; left: -140px;top: 565px;">
				Imprimante<BR>
				<INPUT TYPE='text'  <?php print $enabled; ?> VALUE='<?php print $IMPR; ?>' ID='sn_imprimante' NAME='sn_imprimante' SIZE='50' onchange='sr("<?php print $id; ?>", "sn_imprimante", "err_SR_sn_imprimante", "sn_imprimante")'>
				<div id='err_SR_sn_imprimante' style="position: absolute; left: 200px;top: 50px;"></div>
			</div>
 
 
			<div id="txt4" style="position: relative; left: -140px;top: 620px;">
				Contrôle du tiroir ok. Flash badge opérateur:<BR>
				<INPUT TYPE='text' <?php print $enabled; ?> VALUE='<?php print $MATRIC; ?>' ID='matric_ctrl' NAME='matric_ctrl' SIZE='50' onchange='sr("<?php print $id; ?>", "matric_ctrl", "err_SR_matric_ctrl", "matric_ctrl")'>
				<div id='err_SR_matric_ctrl' style="position: absolute; left: 200px;top: 50px;"></div>
			</div>
 
 
			</div>
		</center>
            </div><!-- content -->

Fichier css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
body{
    background:#F5F5F5;
	color: #333;
	font-family: 'Din-Regular', Arial, sans-serif;
	font-size: 11px;
 
}
.content{
	position:absolute;
}
#tiroir
    { width:800px; height:1000px; float:left; background:url('../../media/photo/tiroir.JPG') no-repeat;border: 0px dashed black;}

Bonjour,

Citation:

J'ai réussi à faire ce que je voulais. Par contre, j'ai une légère différence de position entre IE et Chrome.

attendu que le code que tu fournis et inexploitable que dire de plus si ce n'est que de fournir le code HTML généré, avec il va de soit une explication, même sommaire pourvu qu'elle soit claire, du problème pour nous éviter de rechercher.

Je rajouterais, mais c'est très personnel, une légère différence ne sera sûrement vu par personne sachant que peu de personne perde leur temps à comparer un site sous différents navigateurs. Le Chrome_user se fout de ce qu'il verra sous IE et inversement.

Il reste toutefois une inconnue, c'est qu'est pour toi une légère différence ?

Si c'est différent vous testez le navigateur de la personne et en fonction vous faites telle ou telle partie de code.

1 pièce(s) jointe(s)

Bonjour,

Voilà une partie de la page:
A gauche Chrome
A droite IE.

LA différence de position par rapport au top est assez importante.