Formulaire + Tableau : Redimensionnement des liste.

16 mai 2007, 14:21

Bonjour,

Voilà mon problème, qui il est vrai peut parraître très basic.
J'ai un formulaire avec trois <input> et un <select> le tout dans un tableau.

Code : Tout sélectionner

<form name="form1" ACTION="..." METHOD=post onSubmit="return validateForm(this);">
<fieldset><legend align=top> Informations propres au Service </legend>
<table BORDER=0 >
<tr>
                <td>* Type</td>
										<TD><select size=1 name="tssp" class="txt16-000000">
										<option value=""> Choisir un type </option>
										<option value="Camping">Camping</option>
	<option value="hotel">Hôtel</option>
	<option value="resto">Restaurant</option>
									
	</select><label id="label_tssp"></label></TD>
</tr>
<TR>
									<td>* Nom</td>
									<TD><INPUT type=text name="nssp"><label id="label_nssp"></label></TD>
</tr>
<TR>
									<td>Adresse</td>
									<TD><INPUT type=text name="adssp"><label id="label_adssp"></label></TD>
</tr>
<TR>
									<td>T&eacute;l&eacute;phone</td>
									<TD><INPUT type=text name="phssp" ><label id="label_phssp"></label></TD>
</tr>
</table>
<p>(*) : Champs obligatoires</p></fieldset><br>
<INPUT TYPE=reset NAME=Bouton VALUE=" Annuler " onclick="history.back()"><INPUT type="submit" value=" Valider ">
</form>

Le problème c'est que ma liste déroulante est moins large que mes 3 autres champs j'aimerais qu'elle fasse exactement la même largeur comment puis je m'y prendre ?
En gros que tout soit aligné pour faire la même largeur que ce soir les <input> <select> ou ou textarea.

Merci.

17 mai 2007, 23:00

Utilise les CSS et la propriété width, comme suit :

Code : Tout sélectionner

input, select, textarea {
  width: 10em;
}

Tu peux aussi utiliser l'attribut size dans les éléments input et select en donnant la même valeur que pour l'attribut cols de textarea.

18 mai 2007, 16:03

Merci de ta réponse.
J'ai opté pour ça :

Code : Tout sélectionner

input.text,input.date, select{
  width: 12em;
}

Mais en revanche les input et select ne sont pas alignés, alors qu'entre eux les select le sont maintenant. Si quelqu'un a une autre idée ... XD je suis une queue en css.

Que signifie au juste em ?

Merci

18 mai 2007, 16:11

Pour em, lis ce tutorial d'Alsacréations.

Il s'agit d'une unité relative.

Si, pour l'alignement, tu parles d'alignement par rapport au texte environnant, tu peux utiliser la propriété CSS suivante :

Code : Tout sélectionner

input, select {
  vertical-align: middle;
}

18 mai 2007, 18:33

Non en fait sur cet exemple tous les INPUT sont alignés mais j'aimerais que les listes le soit aussi.
avec le em ça ne les alignes qu'entre elles (les listes xd).
Voilà rien de mieux qu'un exemple visuel.

Merci.

19 mai 2007, 07:46

Je pense que pour résoudre ce probleme il faut que tu definisse une taille différente pr tes select et pour tes input. En effet a l heure actuelle ils font la meme taille pour le contenu possible donc la barre de défilement n'est pas inclue.

Si tu fais par exemple dans ton style:

Code : Tout sélectionner

input.text,input.date{ 
  width: 12em; 
}

select {
width: 11em; 
}

cela devrait résoudre le probleme je pense.

19 mai 2007, 12:20

Impécable je te remercie de ton aide.

Formulaire + Tableau : Redimensionnement des liste.

Qui est en ligne