Comment mettre un form sur une image?

Question

ponsfrilus

2 Nov 2005 à 16:10

Bonjour à tous,
voila je suis ici pour vous demander conseils...

J'aimerais faire un formulaire au-dessus d'une image.

Quels est le meilleure moyen? Un tableau avec l'image en fond, des div et une css, ...???

Il faut également savoir que l'image (et donc le formulaire) devrait être placée au millieu d'un texte (donc sa position vertivale par rapport au haut de la page pourrait varier...) et que le rendu de la page doit être similaire avec n'importe quel navigateur récent....

Merci pour vos conseils,

++

Tony Monast

Modérateur

2 Nov 2005 à 16:15

Bonjour,

Je crois qu'un form avec un background-image en CSS devrait aller. (image sans répétition et positionnée).

Mais pourrais-tu nous montrer visuellement ce que tu veux obtenir, pour s'assurer qu'il n'y a pas certaines contraintes ?

ponsfrilus

2 Nov 2005 à 16:34

En fait je ne l'ai pas encore fait, je me renseignais avant de commencer...

Est-ce que la background image peu s'appliquer au form directement?

Visuellement j'imagine un txt de description, puis un graphique avec le formulaire au dessus et les champs de saisie pour modifier les paramètres des courbes, puis un texte.

EDIT:
exemple succint du résltat:

Modifié par ponsfrilus (02 Nov 2005 - 16:58)

ponsfrilus

3 Nov 2005 à 09:23

Voila le résultat final:

Mais les champs bougent en fonction du navigateur... grrr

Je suis vraiment débutant avec les css etc... alors un peu de conseils seraient la bienvenues...

Le fichier html:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href= "parametersok.css"> 
</HEAD>
<BODY>
<FORM name="form" action="process.jsp" method ="post">
Selected flux : <var name="flux">No flux Selected</var>
<DIV id="image">
<DIV id="p2"><input type="hidden" name="flux" value=""></DIV>
<DIV id="p2">p<sub>2</sub> = <input type="text" name="p2" value="5" size=5 maxlength=5 ></DIV>
<DIV id="p1">p<sub>1</sub> = <input type="text" name="p1" value="1" size=5 maxlength=5 ></DIV>
<DIV id="dp">dp = <input type="text" name="dp" value="0.5" size=5 maxlength=5 ></DIV>
<DIV id="dt">dt = <input type="text" name="dt" value="1" size=5 maxlength=5 ></DIV>
<DIV id="nsoussat">n<sub>sous-sat.</sub> : <input type="text" name="nsoussat" value="5" size=2 maxlength=2 ></DIV> 
<DIV id="nsat">n<sub>sat</sub> : <input type="text" name="nsat" value="10" size=2 maxlength=2 ></DIV>
<DIV id="nsursat">n<sub>sur-sat.</sub> : <input type="text" name="nsursat" value="5" size=2 maxlength=2 ></DIV>
<DIV id="submit"><input type="submit" value="Submit"></DIV>
<DIV id="reset"><input type="reset" value="Reset"></DIV>
</DIV>
</FORM>
</BODY>
</HTML>

Le fichier css:

body { margin: 20px;    height: 100%;    padding: 0px;    font-style: bold;    font-family: Arial, Helvetica, Sans Serif;    font-size: 23px;    color: #333333;    background: #ffffff;}
#error { margin: 0px;    height: 100%;    padding: 0px;    font-style: normal;    font-family: Arial, Helvetica, Sans Serif;    font-size: 12px;    color: red;    background: #ffffff;}
#image 	{ background-image:  url(diagramme.jpg);    background-repeat: no-repeat;    height: 250px;    width: 450px;}
#submit	  { position:relative; 	top:0px;	left:60px; 	width:200px; 	height:25px; }
#reset	  { position:relative; 	top:-25px;	left:150px; 	width:200px; 	height:25px; }
#p2	  { position:relative; 	top:-40px;	left:350px; 	width:200px; 	height:25px; }
#p1	  { position:relative; 	top:-10px; 	left:400px;	width:200px; 	height:25px; }
#dp	  { position:relative; 	top:-15px; 	left:170px;	width:200px; 	height:25px; }
#dt	  { position:relative; 	top:-50px; 	left:30px; 	width:200px; 	height:25px; }
#nsoussat { position:relative; 	top:30px; 	left:85px; 	width:200px; 	height:25px; }
#nsat    { position:relative; 	top:-40px; 	left:200px; 	width:200px; 	height:25px; }
#nsursat  { position:relative; 	top:-110px; 	left:370px; 	width:200px; 	height:25px; }

L'image:

Sujet clos