Discussion :

[solorac]

Bonjour la communauté,

Je voudrais savoir comment faire pour aligner des rubriques quand le titre de la rubrique n'a pas la même taille.

Voiçi mon code pour que vous compreniez mieux la situation.

Html :

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
18
19
20
21
22
23
24
<div id="columnBct">
	<form  method="post" ENCTYPE="text/plain" action="mailto:info@borj-biramane.com">
 
				* Nom : <input type="text" NAME="nom" SIZE="20" MAXLENGTH="40"> <br>
				* Prénom : <input type="text" NAME="prenom" SIZE="20" MAXLENGTH="40"><br>
				* Tél. : <input type="text" NAME="tel" SIZE="10" MAXLENGTH="10">
				* Tél. (GSM) : <input type="text" NAME="tel" SIZE="10" MAXLENGTH="10"><br>
				* Pays : <input type="text" NAME="pays" SIZE="20" MAXLENGTH="40"><br>
 
				* e-mail : <input type="text" NAME="mail" SIZE="30" MAXLENGTH="55"><br><br>
				* Sujet :<br>	<select name="choix">
											<option value="choix0">Faites votre choix</option>
    										<option value="choix1">Demande d'informations</option>
    										<option value="choix2">Demande de réservation</option>
								</select><br>
				<br>Votre message ici :<br>
							<textarea name="message" rows="5" cols="35" MAXLENGTH="300">
							</textarea><br><br>
							<input type="submit" value="Valider" />
							<input type="reset" value="Effacer" /><br><br>
				* Champs obligatoires
 
		</form>
	</div>

Et le code css :

Code :

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

1
2
3
4
5
6
#columnBct {
	float: left;
	width: 340px;
	margin-left:-35px;
	margin-top:20px;
}

Merci pour votre aide

[marco_fot_hxc]

Bonjour,

Tu devrais commencer par wrapper l'intitulé associé à chaque input dans un label muni d'un attribut for. C'est mieux.

Ensuite, je te conseillerai de wrapper chaque unité label+input dans un div ou autre, de faire flotter tes labels et de leur définir une taille max et d'y mettre un text-align : right;

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
 
label {
 display:block;
 float:left;
 width: 150px; /*ou autre*/
 text-align: right;
}
 
/* et ton form comme suit en très simplifié là hein */
<form>
 <div>
  <span></span>
  <input />
 </div>
 <!--... etc-->
</form>

Bon courage !

[solorac]

Je te remercie, je vais essayer cela.

[marco_fot_hxc]

Une erreur s'est glissée dans mon exemple !!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div>
	<form>
		<div>
			<label for="chp1"></label>
			<input type="" id="chp1"  name="chp1" />
		</div>
		<div>
			<label for="chp2"></label>
			<input type="" id="chp2" name="chp2" />
		</div>
	</form>
</div>

C'est bien des label et pas des span dont je te parlais De plus, je te conseil d'indiquer une classe pour les div et plus particulièrement une classe qui désigne le type d'élément wrappé : select, input etc...