Création d'un formulaire

Création d'un formulaire - HTML/CSS - Programmation

Marsh Posté le 22-05-2009 à 13:56:06    

Bonjour à tous !
 
 
Je viens de créer un formulaire avec htlm et CSS.
 
http://www.mough-lee.fr/machinebois/devismb.html
 
Mais j'ai un souci, mes champs bougent selon la taille de la fenêtre
 
le code htlm :
 

Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="essaie.css" />
   </head>
   <body>
   
 
 
 <div id="caisse">
<img src="caisse95mm.png" alt="Caisse plein bois" />
 </div>
 
 <div id="tempsmachine">
<p>Exemple de temps machine, avec planches de largeur <br />100 mm, 3 clouages sur les bords et 2 clouages sur les <br />intermédiaires.
<br />
<ul>
<li>Panneau plein de 600 x 500 mm avec 2 chevrons :</li><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tempsminutes">2 minutes 50 secondes</span></ul>
<ul>
<li>Panneau plein de 4 000 x 8 000 mm avec 6 chevrons :</li><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tempsminutes">42 minutes 10 secondes</span>
</ul>
</p>
 </div>
   
   
 <div id="dimension">  
<img src="dimension.png" alt="Insérer les dimensions dans les champs" />
 </div>
   
   
 <div id="contact">
<form action = "devismachinebois.php" method="post">
Société : <br /> <input type = "text" name = "société" size="35" maxlength="20" ><br />
Nom : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;             Prénom : <br /> <input type = "text" name = "Nom" size="15" maxlength="20" >
<input type = "text" name = "Prénom" size="15" maxlength="20" ><br />
e-mail :  <br /> <input type = "mail" name = "e-mail" size="35" maxlength="20" >
<br />
<br />
<input type = "submit" value = "Envoyer le devis">
</form>
 </div>
 
 
 <div id="clouage">  
<img src="clouage.png" alt="Clouage" />
 </div>
 
 
 <div id="commentaires">Vos informations - Vos questions<br />
<textarea name="message" rows="6" cols="45">
</textarea>
 </div>
 
   
 <div id="A">  
<form action = "devismachinebois.php" method="post">
 Panneau  <input type = "text" name = "A" size="1" maxlength="4" value="min">
</form>
 </div>    
 
   
 <div id="B">  
<form action = "devismachinebois.php" method="post">
 à&nbsp;&nbsp;&nbsp;<input type = "text" name = "B" size="1" maxlength="4" value="max">
</form>
 </div>    
 
 
 <div id="C">  
<form action = "devismachinebois.php" method="post">
<input type = "text" name = "C" size="1" maxlength="4" value="min">
</form>
 </div>    
 
 
   
 <div id="D">  
<form action = "devismachinebois.php" method="post">    
à&nbsp;&nbsp;&nbsp;<input type = "text" name = "D" size="1" maxlength="4" value="max">  
</form>
 </div>
 
 
 <div id="E">  
<form action = "devismachinebois.php" method="post">
 Panneau<br /><input type = "text" name = "E" size="1" maxlength="4" value="min">    
</form>
 </div>    
   
   
 <div id="F">  
<form action = "devismachinebois.php" method="post">  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;à<br /><input type = "text" name = "F" size="1" maxlength="4" value="max">
</form>
 </div>    
 
 
 <div id="G">  
<form action = "devismachinebois.php" method="post">  
<input type = "text" name = "G" size="1" maxlength="4" value="min">
</form>
 </div>    
 
 
 <div id="H">  
<form action = "devismachinebois.php" method="post">
à<br /><input type = "text" name = "H" size="1" maxlength="4" value="max">
</form>
 </div>    
   
   
   </body>
</html>


 
 
 
Et le CSS
 

Citation :

Body
{
 margin: auto;  
 WIDTH: 842px; HEIGHT: 595px; BACKGROUND-COLOR: yellow;
}
 
#caisse
{
  width: 269px;
  height: 251px;
  position: absolute;
  left: 15px;
  Top: 15px;
}
 
#tempsmachine
{
  width: 370px;
  height: 300px;
  position: absolute;
  left: 30px;
  Top: 275px;
  color: black;
 }
 
 #dimension
{
   width: 539px;
   height: 350px;
   position: absolute;
   left: 450px;
   Top: 15px;
 }
 
p
{
   color: black;
   font-size: 100%;
   text-indent: 30px;
   text-align: justify;
}
 
ul
{
   color: black;
   font-size: 100%;
   }
 
.tempsminutes  
{
   font-weight: bold;
}
 
#contact
{
   position: absolute;
   right: 15px;
   bottom: 5px;
}
 
#clouage
{
  width: 241px;
  height: 180px;
  position: absolute;
  left: 450px;
  bottom: 15px;
 }
 
#commentaires
{
   position: absolute;
   left: 15px;
   bottom: 15px;
   
}
 
#A  
{
   position: absolute;
   right: 200px;
   top: 295px;
   font-size: 12px;
}
 
#B
 {
   position: absolute;
   right: 150px;
   top: 295px;
   font-size: 12px;
}
 
#C
 {
   position: absolute;
   right: 345px;
   top: 278px;
   font-size: 12px;
}
 
#D  
{
   position: absolute;
   right: 295px;
   top: 278px;
   font-size: 12px;
}
 
#E
 {
   position: absolute;
   right: 5px;
   top: 140px;
   font-size: 12px;
}
 
#F
 {
   position: absolute;
   right: 12px;
   top: 180px;
   font-size: 12px;
}
 
#G  
{
   position: absolute;
   right: 505px;
   top: 270px;
   font-size: 12px;
}
 
#H  
{
   position: absolute;
   right: 505px;
   top: 290px;
   font-size: 12px;
}
 
#I  
{
   position: absolute;
   left: px;
   bottom: px;
}


 
 
 
merci a+


Message édité par Positiviste le 22-05-2009 à 13:57:35

---------------
ploum ploum tralala
Reply

Marsh Posté le 22-05-2009 à 13:56:06   

Reply

Marsh Posté le 22-05-2009 à 19:11:21    

Dans le div dimensions, tu mets le code du formulaire qui s'y rapporte, et tu mets ce div en position:relative.
Ensuite tu positionnes ton form en absolu par rapport au div en question et non plus par rapport au body.
Ou encore d'autres solutions, mais le but du jeu, c'est d'avoir dans un block l'image et le form qui s'y rapporte.  

Reply

Marsh Posté le 25-05-2009 à 13:59:19    

ok merci bien du conseil. Je m'y met de suite.
 
a+


---------------
ploum ploum tralala
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed