Discussion :

[CCACC02]

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 html :

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
<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 css :

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
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 ...

[Invité]

Bonjour,

une solution :

Code css :

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
.form-contact fieldset {
  display: -webkit-flex; -webkit-flex-wrap: wrap;
  display: flex; flex-wrap: wrap;
}
.form-contact input,
.form-contact textarea {
  font-size: 1.1em;
  -webkit-flex:1 1 100%; flex:1 1 100%;
  border: 1px solid transparent;
  margin: 5px 0;
  padding: 2px;
}
.form-contact input[name="prenom"],
.form-contact input[name="email"] {
  -webkit-flex:1 1 auto; flex:1 1 auto; 
}
.form-contact input[name="prenom"] {
  margin-right:2%; 
}

[CCACC02]

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

[Invité]

• Disposition des boîtes flexibles CSS
• A Complete Guide to Flexbox

[CCACC02]

Ca y est, j'ai jeté un oeil sur ton lien et j'ai pu m'en servir avec un peu de logique. En même temps j'ai résolu mon problème de menu collant en pied de page sans avoir eu recours au javascript (pas encore vu en cours )

Donc sujet résolu

[Invité]

bonjour,

Ça aurait été sympa de nous montrer TA solution.
certains pourrait aussi être intéressés.

[CCACC02]

Mille pardons, ce n'est pas de l'égoïsme, c'est juste un oubli des règles fondamentales... je sollicite de l'aide mais si je trouve moi-même, je n'oublie pas d'en faire profiter les autres.

J'ai donc utiliser ta solution display : flex et ce qui posait problème, apparemment, c'est le width : 100%. J'ai donc mis une taille fixe partout et j'ai ajouter une div pour encadrer mes deux parties de formulaires à aligner... sinon ca fonctionnait pas. Ci-joint la portion de html pour le formulaire et le CSS associé :

Code html :

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
<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>
							<div class="aligne">
							<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>
							</div>
							<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 CSS :

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
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
#main3{
	width: 1024px;
	padding: 20px 0;
	background-color: #f6f6f6;
	border-sizing: border-box;
}
.form-contact {
	width: 966px;
	height: 480px;
	margin: 80px auto;
	border: 6px solid #305a47;
	background-color: #ddeae4;
	border-sizing: border-box;
}
.form-contact h2{
	padding: 80px 0 10px 0;
	margin-left: 250px;
	font-family: arial;
	font-weight: bold;
 
}
form{
	padding: 0;
	width:482px;
    padding:20px;
    margin: 0px auto;   
}	
.form-contact input, 
.form-contactt textarea{
    font-size:1.2em;
    margin-bottom:5px;
}
.form-contact input, 
.form-contact textarea {
    width: 482px;
    border: none; /*1px solid #ccd645;*/
    margin-bottom:10px;
    padding:2px;
}
.form-contact input[name="prenom"],
.form-contact input[name="email"]{
	width: 48%;
}
.aligne{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.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: 486px;
	background-color: #305a47;
	color: #ddeae4;
}
.form-contact .submit:hover{
	background-color: #109177;
	color: #f6f6f6;
}

Voilà, il est vrai que si ca peut aider quelqu'un d'autre... Merci jreaux62