Discussion :

[galliryc]

Bonjour à tous,

J'ai créé un formulaire et j'ai un problème d'alignement entre les noms de champ et les lignes de texte : ils ne sont pas en face. J'avoue avoir pas mal bidouillé mon code pour arriver à ce résultat, donc l'erreur vient peut-être de moi, ou simplement d'un attribut que je ne connais pas. Le tutoriel m'a bien aidé à créer le formulaire (on ne se lasse pas de dire merci sur ce site !!!) mais ne résout pas mon problème.

Pour visualiser la page, cliquez ici.

Le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form id="formcontact" action="mailto:mysaas@global-sp.net">
<fieldset>
<legend>Demande d'informations</legend>
<p>Nom : <input id="champ" type="text" align="right" size="53" maxlength="100" valign="right" /></p>
<p>Prénom : <input id="champ" type="text" size="53" maxlength="100" /></p>
<p>Société : <input id="champ" type="text" size="53" maxlength="100" /></p>
<p>E-mail : <input id="champ" type="text" size="53" maxlength="100" /></p>
<p>Objet du message : <input id="champ" type="text" size="53" maxlength="100" /></p>
<p>Votre message : <textarea rows="7" cols="41"></textarea></p>
</fieldset>
<p><input id="envoi" type="submit" value="Envoyer" /></p>
</form>

Le code css :

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
/* CSS Document */
  body { background-color:#3e3e3e; font-family:Calibri;}
  table { border-right-style:solid; border-right-width:10px; border-left-style:solid; border-left-width:10px; border-color:#6E725D; background-color:#ffffff;}
  dl { font-family:Eras Demi ITC; font-size:20px; color:#A3BF1D; line-height:1.5; margin-left:15px;}
  h3 { font-size:11; border-top:1px solid #74766e;}
  a { color:#A3BF1D; text-decoration:none;}
  a:hover { color:#3e3e3e;}
  h1 { font-family:Calibri; font-size:25; color:#3F4AAE; text-align:left;}
  h2 { font-family:Calibri; font-size:25; color:#7D88EE; text-align:right;}
  #contact { text-align:center;}
  #formcontact { text-align:left; display:block;}
  #formcontact fieldset { margin-right:40px; color:#A3BF1D 1px solid;}
  #formcontact fieldset legend { font-size:12; font-style:italic; padding:0 10px}
  #formcontact p { margin:10px;}
  #champ { float:right;}
  #formcontact textarea { float:right;}
  #envoi { float:center;}

Merci d'avance.

[12monkeys]

Bonjour

Ce que tu peut faire c'est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p style="float:left;width: 100px;">Nom :</p>
<p style="float:right;"><input type="text" maxlength="100" size="53" id="champ"/></p>

Après faut remettre le code css dans le fichier css, c'est juste plus pratique pour moi ici... Et pour la largeur du 1er p faut aussi tester à ta convenance...

[galliryc]

Nan nan c'est pas ça, mais je te l'accorde, j'ai pas été super clair dans mon post...

Mon souci c'est que les noms de champs sont décalés par rapport aux lignes de texte (sur un axe horizontal). Par exemple la ligne "Nom" n'est pas bien en face de la case corespondante, mais en dessous. Et je comprends pas d'où ça vient !!

[12monkeys]

Ben si j'ai parfaitement compris , je t'ai proposé une solution au dessous pour résoudre ce problème...

Essaye la pour voir au moins si ça te conviens...

[galliryc]

Si si j'avais essayé t'inquiète...

Tas raison après tout c'est bien comme ça, et puis y a plus difficile... maintenant faut qu'il fonctionne... php powaaaaaa !!!!