Fixer la largeur d'input dans un formulaire
Bonjour,
J'ai un soucis de largeur de ligne dans un formulaire.
Les champs Prénom et email doivent être alignés mais il y a un décallage entre la somme de ces largeurs et la ligne du dessus.
Tout comme la largeur du bouton envoyer qui est réduite de qq pixel pour s'aligner parfaitement.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="main3">
<div class="form-contact clearfix">
<h2>Demande d'information</h2>
<form method="post" action="page.php">
<fieldset>
<input type="text" name="nom" id="nom" placeholder="Nom" autocomplete="on" required>
<input type="text" name="prenom" id="prenom" placeholder="Prénom" autocomplete="on" required>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="on" required>
<textarea name="message" rows="5" cols="30" id="message" placeholder="Un message ?"></textarea>
<input class="submit" name="envoyer" type="submit" value="Envoyer">
</fieldset>
</form>
</div>
</div> |
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
| form{
padding: 0;
width:474px;
padding:20px;
margin: 0px auto;
}
.form-contact {
width: 966px;
height: 480px;
margin: 80px auto;
border: 6px solid #305a47;
background-color: #ddeae4;
/*border: 6px solid #8FB5C1;*/
/*position:relative;*/
border-sizing: border-box;
}
.form-contact h2{
padding: 80px 0 10px 0;
margin-left: 250px;
font-family: arial;
font-weight: bold;
}
.form-contact input,
.form-contactt textarea{
font-size:1.2em;
margin-bottom:5px;
}
.form-contact input,
.form-contact textarea {
width:100%;
border: none; /*1px solid #ccd645;*/
margin-bottom:10px;
padding:2px;
}
.form-contact input[name="prenom"],
.form-contact input[name="email"]{
width: 48%;
display: inline;
}
/*.form-contact input[name="nom"]{
width: 466px;
}*/
.form-contact input[name="email"]{
margin-left: 2px;
}
.form-contact input:focus,
.form-contact textarea:focus {
border: 1px solid #8d75c5;
background-color: #ebecb5;
}
.form-contact textarea {
height:150px;
font-family: arial, helvetica, sans-serif;
font-size: 1.2em;
}
.form-contact .submit{
width: 478px;
background-color: #305a47;
color: #ddeae4;
}
.form-contact .submit:hover{
background-color: #109177;
color: #f6f6f6;
}
.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
} |
Pour info, site visible sur www.creawebccacc.fr/index.html
Merci de m'aiguiller ...
Je n'en suis pas la ... cela m'aurait sauvé ....
Merci de cette solution qui fonctionne, mais je n'ai pas encore eu les cours sur le -webkit, donc je dois réussir sans ...
Mais merci quand même c'est sympa
