Soucis avec mise en page input
bonsoir,
Code:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<form id="monForm"action="inscription.php" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="form_firstname">Prénom : </label>
<input type="text" id="form_firstname" name="firstname" />
</p>
<p>
<label for="form_lastname">Nom : </label>
<input type="text" id="form_lastname" name="lastname" />
</p>
<p>
<label for="form_gender">Sexe : </label>
<input type="text" id="form_gender" name="gender" />
</p>
<p>
<label for="form_birthday">Date de naissance : </label>
<input type="text" id="form_birthday" name="day" />/<input type="text" name="month" /><input type="text" name="year" />
</p>
<p>
<label for="form_address">Adresse : </label>
<input type="text" id="form_address" name="address" />
</p>
<p>
<label for="form_postal_code">Code postal : </label>
<input type="text" id="form_postal_code" name="postal_code" />
</p>
<p>
<label for="form_city">Ville : </label>
<input type="text" id="form_city" name="city" />
</p>
<p>
<label for="form_country">Pays : </label>
<select id="form_country" name="country">
<optgroup label="Amérique">
<option value="ca">Canada</option>
<option value="us">États-Unis</option>
<option value="be">Belgique</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Europe">
<option value="be">Belgique</option>
<option value="fr">France</option>
</optgroup>
</select>
</p>
</fieldset>
<fieldset>
<legend>Compte</legend>
<p>
<label for="form_login">Identifiant : </label>
<input type="text" id="form_pseudo"name="login" value="<?php if (isset($_POST['login'])) echo htmlentities(trim($_POST['login'])); ?>"><br />
</p>
<p>
<label for="form_password">Mot de passe : </label>
<input type="password" id="form_pass" name="pass" value="<?php if (isset($_POST['pass'])) echo htmlentities(trim($_POST['pass'])); ?>"><br />
</p>
<p>
<label for="form_password2">Confirmer le mot de passe : </label>
<input type="password" id="form_confirm" name="pass_confirm" value="<?php if (isset($_POST['pass_confirm'])) echo htmlentities(trim($_POST['pass_confirm'])); ?>"><br />
</p>
<p>
<label for="form_mail">Adresse email : </label>
<input type="text" id="form_mail" name="mail" />
</p>
<p>
<label for="form_question">Question secrète : </label>
<input type="text" id="form_question" name="question" />
</p>
<p>
<label for="form_response">Réponse : </label>
<input type="text" id="form_response" name="response" />
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form> |
le CSS :
Code:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
#monForm
{
width: 60%;
}
#monForm p
{
margin: 2px 0;
}
/* fieldset , legend */
#monForm fieldset
{
margin-bottom: 10px;
border: #CCC 1px solid;
}
#monForm fieldset:hover
{
background-color: #FFF;
}
#monForm fieldset legend
{
padding: 0 10px;
border-left: #CCC 1px solid;
border-right: #CCC 1px solid;
font-size: 1.2em;
color: #999;
}
/* Label */
#monForm label
{
background-color: #FFCC66;
display: block;
width: 39%;
float: left;
padding-right: 1%;
text-align: right;
letter-spacing: 1px;
}
#monForm label:hover
{
font-weight: bold;
}
#monForm .form_label_nostyle
{
background: none;
}
/* Input */
#monForm input, #monForm select
{
margin-left: 1%;
width: 58%;
border: #CCC 1px solid;
}
#monForm input:hover, #monForm select:hover, #monForm input:focus, #monForm select:focus
{
border: #999 1px solid;
background-color: #DDEEFF;
}
#monForm .form_input_day_month
{
width: 3%;
}
#monForm .form_input_year
{
width: 6%;
}
/* button submit */
#monForm input[type="submit"]
{
border: #DDEEFF 1px solid;
width: 27%;
}
#monForm input[type="submit"]:hover
{
background-color: #66CC33;
cursor: pointer;
}
#monForm input[type="reset"]
{
border: #DDEEFF 1px solid;
width: 27%;
}
#monForm input[type="reset"]:hover
{
background-color: #E6484D;
cursor: pointer;
} |
Les 3 champs pour la date de naissance ne sont pas alignés sur la même ligne
et ils ne sont pas limité en espace ,j'en ai deux qui sont sur la ligne du dessous
comment puis-je remedier à ce problème ?Merci :)
