28173 sujets

CSS et mise en forme, CSS3

[Résolu]Problème formulaires

bonjour, je doi préparer un site promotionnel pour un produit qui devrais sortir dans un futur proche, et je dois intégrer un formulaire au site, j'ai horreur des tables, alors j'ai commencé a faire mon formulaire en CSS, mais j'ai un problème que j'arrive pas a résoudre :

http://pix.nofrag.com/67/82/605663daf67de74b281b64686853.jpg

Comme vous pouvez voir l'alignement vertical des label dans la version formulaire sont pas alignés avec les input ( j'ai essayé de mettre un vertical-align au label mais ca ne marche pas )

CSS


form.contact{
			font-size:x-small;
			font-family:"Courier New", Courier, monospace;
			}


label		{
			text-align:right;
			float:left;
			width:100px;
			display:inline;
			font-size:x-small;
			}
			
input		{
			font-size:x-small;
			}
			
select		{
			font-size:x-small;
			}



et l'HTML

<body>
<p>VERSION CSS </p>

 <form  class="contact"
 		action="mailto:don.blue@gmail.com?subject=test&body=fiche d'inscription"
		method="post"
		enctype="text/plain">
    <label for="Lastname">Lastname</label>
    <input type="text" name="lastname" id="remark" />
    <br />
    <label for="Name">Name</label>
    <input type="text" name="name" />
    <br />
    <label for="email">E-mail address</label>
    <input type="text" name="email" />
	<br />
	<label for="object">Object</label>
	<select name="object">
		<option value="..." selected>...</option>
		<option value="info">Info</option>
		<option value="tech.issue">Technical Issue</option>
		<option value="other">Other</option>
	</select>
	<br />
    <label for="remark">Remarks</label>
    <input type="text" name="remark" id="remark" />
</form>

<p> VERSION TABLE </p>



<table border="0">
<form  class="contact"
 		action="mailto:don.blue@gmail.com?subject=concours Proximus&body=fiche d'inscription"
		method="post"
		enctype="text/plain">
<tr>
<td align="right"> <label for="Lastname">Lastname</label></td>
<td><input type="text" name="lastname" id="remark" /></td>
</tr>
<tr>
<td align="right"> <label for="Lastname">Name</label></td>
<td><input type="text" name="lastname" id="remark" /></td>
</tr>
<tr>
<td align="right"> <label for="Lastname">E-mail address</label></td>
<td><input type="text" name="lastname" id="remark" /></td>
</tr>
<tr>
<td align="right"> <label for="Lastname">Object</label></td>
<td><select name="object">
		<option value="..." selected>...</option>
		<option value="info">Info</option>
		<option value="tech.issue">Technical Issue</option>
		<option value="other">Other</option>
	</select></td>
</tr>

</body>
</html>



Ca me serais trés utile, alors merci pour tout conseil Smiley biggrin
Modifié par bluehige (04 Mar 2006 - 14:22)
oui, je viens d'essayer un padding-top dans le label et ca marche, je pensais simplement qu'une solution plus 'propre' existait.

Merci pour ta réponse

Blue
Salut,

Je peux te proposer une autre solution pour résoudre ton problème d'alignement. Celle-ci consiste à englober les balises label et input dans une balise p qui te permet de séparer chaque ligne.

Voici le code HTML :

 <form  class="contact"	action="#" method="post" enctype="text/plain">
  <p class="field">
   <label for="Lastname">Lastname</label>
   <input type="text" name="lastname" />
  </p>
  <p class="field">
    <label for="Name">Name</label>
    <input type="text" name="name" />
  </p>
  ...
 </form>


Voici le code CSS :

p label {
  text-align: right;
  width: 100px;
  display: block;
  float: left;
}

p.field {
  /* Mets ici toutes les propriété de marge, padding, couleur... 
     concernant chaque ligne */

  /* Par exemple, pour espacer chaque ligne */
  margin-bottom: 0.9em;
}


J'éspère que cela t'aidera. Smiley cligne

Petite remarque sur ton CSS: la balise label est de type inline, il n'est donc pas utile d'appliquer la propriété display: inline; sur cet élément.
Modifié par ymhotepa (03 Mar 2006 - 19:37)
Bonjour,

Et avec un "line-height" approprié pour "label" ?

Il me semble avoir résolu cela de cette façon je ne sais plus où...
@ymhotepa : ca me semble plus propre que le padding, je vais essayer ^^

@jcm : j'ai deja essayé mais ca ne marche pas vraiment comme je pensais, mes input se decalent aussi.

EDIT : ok, j'ai testé ta méthode ymhotepa, c'est effectivement trés ordonné, mais ca ne resoud pas le problème, je dois créer une classe en plus spécifique au label et la mettre un padding-top pour aligner mon label avec l'input.
Modifié par bluehige (03 Mar 2006 - 20:45)
Re-salut,

bluehige a écrit :
mais ca ne resoud pas le problème, je dois créer une classe en plus...


C'est bizarre parce que dans ma page de test, tout semble bien aligné comme tu le souhaitais. Smiley eek

Voila ce que j'obtiens :
upload/2896-form.jpg

bluehige a écrit :
une classe en plus spécifique au label et la mettre un padding-top pour aligner mon label avec l'input.


Je ne comprend pas très bien ce que tu veux dire par là. Je ne voit pas pourquoi tu dois créer une classe pour les labels Smiley ohwell .

Pourras tu mettre la solution finale à ton problème histoire de voir à quoi ressemble le css final. Smiley merci
Modifié par ymhotepa (03 Mar 2006 - 21:30)
alors, pour le problème d'alignement, dés que je l'ai inseré dans la page ou il me le fallais, le problème a disparu Smiley confus , dans le css de la page finale, j'ai ca au début :

*{
 padding:0;
 margin:0;
 border:0;
 }

c'est peut être ca Smiley ohwell

sinon voila a quoi ressemble mon css pour le formulaire maintennant :


#formulaire	{
		/*	background:#0000ff; */
			width:300px;
			}



label	{
		padding-top:0;
		}


label	{
  		text-align:left;
  		width:70px;
  		display:block;
  		float:left;
		}



p.field {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:0.7em;
		color:#000000;
		padding-top:3px;
		}
		
		
input	{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:1em;
		color:#000000;
		border:none;
		border-bottom:1px dotted #ffcc00;
		background:none;
		}
		
select	{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:1em;
		color:#000000;
		border:none;
		border-bottom:1px dotted #ffcc00;
		background:none;
		}
		
textarea	{
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:1em;
			color:#000000;
			border:none;
			border-top:1px dotted #ffcc00;
			border-bottom:1px dotted #ffcc00;
			background:none;
			}
			
input.boutton	{
				border:1px dotted #ffcc00;
				}


a écrit :

une classe en plus spécifique au label et la mettre un padding-top pour aligner mon label avec l'input.


en fait je voulais dire que j'ai quand même du ajouter


label	{
  		text-align:left;
  		width:70px;
  		display:block;
  		float:left;
		}

Modifié par bluehige (03 Mar 2006 - 21:55)
Salut,

Smiley merci pour le code. Peut-être pourrait tu regrouper certaines propriétés qui sont utilisées pour plusieurs classes, du genre :


input, select, textarea	{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:1em;
  color:#000000;
  border:none;  /** Facultatif car tu as mis "* { border: 0; }" **/
  border-bottom:1px dotted #ffcc00;
  background:none;
}

textarea {
  border-top:1px dotted #ffcc00;
}


Bonne continuation Smiley cligne
oui tu as raison, j'ai remarqué que j'ai beaucoups de doublon pour rien, travail de cochon quoi Smiley biggol .

Vais remettre ca en place une fois fini ^^, merci pour ton aide.
Sujet clos
Aller à