Discussion :

[K-Kaï]

J'ai un soucis de mise en page de mon formulaire sous Firefox.
En effet, mais champs de saisi se décale de mes label comme le montre l'image ci dessous


Voici le code XHTML :

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
25
 
<div id="content">
		<h2>Inscription d'un nouvel utilisateur</h2>
		<p> Les champs marqués d'une étoile <span class="important"> (*)</span> sont obligatoire. </p>
		<form name="inscription" action="http://localhost:8080/transfertFichier/main" method="post">
 
		<fieldset><legend>Informations personelles du client</legend>
			<p>
				<label>	Nom * :</label>
				<input type="text" name="nom" />
			</p>
			<p>
				<label>	Prenom  * : </label>
				<input type="text" name="prenom" />
			</p>
			<p>
				<label>	Société :</label>
				<input type="text" name="societe" />
			</p>
			<p>
				<label>	Adresse * :</label>
				<input type="text" name="adresse" />
			</p>
... </fieldset>
...

ainsi que le CSS correspondant :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
div#content {
float:left;
position:relative;
width: 80%;
height:445px;
overflow: auto;
background-color: #FFFFFF;
 
text-align: justify;
text-indent: 20px;
color: #506388;
}
 
#content h2 {
text-align:center ;
color: #506388;
}
 
#content form {
margin: 0 auto;
width: 80% ;
}
 
#content form label {
	float: left;
	width:170px;
	text-align: right;
}
 
#content fieldset {
border: 1px solid #506388;
background-color : #F0F4FF;
}
 
#content legend {
	color:#506388; 
}

L'affichage est convenable sous Opera et Internet Explorer ...

Avez vous une idée du soucis avec Firefox ?

[IdF-Socrateus]

Code :

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

p {vertical-align:center;}

[K-Kaï]

ERf non loupé ca ne change rien ...

[Linaa]

Et sans le float:left du label ?

[IdF-Socrateus]

ajoute avant le vertical-... :

Code :

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

line-height: ... px;

[K-Kaï]

Alors, avec le line-height cela ne fonctionne pas non plus ...

Et dsans le float: left cela fonctionne par contre je perd le bel alignement de mon formulaire donc cela ne convient pas non plus.

Y a t'il un moyen de retrouver cet alignement autrement ou alors une autre modification ?

[IdF-Socrateus]

tu peux toujours faire un tableau et régler son affichage avec les propriétés css :
th => labels
td => champs
puis tu règles le style des deux balises

ou alors tu ajoutes une propriété sur les <label > de ce div (c dans un div ?), avec une position du genre left:100px; (probablement un peu plus...)

[masu]

enleve text-indent: 20px; dans div#content

tu peux mettre un margin left sur tes input pour créer de l'epace entre ton label et ton input.

[K-Kaï]

Merci beaucoup, cela fonctionne nickel

Par contre tu pourrai m'expliquer pourquoi ? Je suis debutant en CSS et j'aimerais bien comprendre ce qui t'a amené à cette conclusion.

Par contre du coup, pour indenter simplement mes paragraphes dans d'autres pages web, comment puis-je faire (si je defini le text-indent dans ma balise p cela revient au meême problème forcément).