Discussion :

[cd090580]

Bonjour,

J'ai suivi le tutoriel concernant la mise en page des formulaires avec CSS. Le tout fonctionne très bien mais quand j'ai un grand libellé qui doit se répartir sur 2 lignes, le champ suivant est complètement décalé (voir pièce jointe).

Si je réduis la taille en une ligne , la mise en page est correcte.

Voici le code 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
25
26
27
28
<p>
			<label for="chanson" class="inline">Chanson préférée interpétée par Melissa:</label>
			<select name="chanson" id="chanson">
				<?php
				foreach ($songs_array as $indice => $song) {
					echo "<option value=\"$indice\">$song</option>\n";
				}
				?>
			</select>
		</p>
        <p>
			<label for="phrase">Une phrase préférée dans les paroles de chansons interprétées par Melissa:</label>
			<input type="text" name="phrase" id="phrase" />
		</p>
        <p>
			<label for="clip">Clip préféré de Melissa:</label>
		    <select name="clip" id="clip">
				<?php
				foreach ($clips_array as $indice => $clip) {
					echo "<option value=\"$indice\">$clip</option>\n";
				}
				?>
			</select>
		</p>
        <p>
			<label for="costume">Costume ou look préféré (clip ou apparition tv.... ):</label>
			<input type="text" name="costume" id="costume" />
		</p>

Et le css:

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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<style type="text/css">
#trombi
{
	width: 80%;
}
 
#trombi p
{
	margin: 2px 0;
}
 
/* fieldset , legend */
#trombi fieldset
{
	margin-bottom: 10px;
	border: #666 1px solid;
}
 
#trombi fieldset legend
{
	padding: 0 10px;
	border-left: #666 1px solid;
	border-right: #666 1px solid;
	font-size:1.2em;
	color: #777;
}
 
 
/* Label */
#trombi label
{
	display: block;
	width: 39%;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
	font-size:10px;
}
 
#trombi label.inline
{
	display: inline;
	width: 39%;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
	font-size:10px;
}
 
#trombi label:hover
{
	font-weight: bold;
}
 
#trombi .form_label_nostyle
{
	background: none;
}
 
/* Input */
#trombi input
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
	font-size:10px;
}
 
#trombi select
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
	font-size:10px;
}
 
#trombi input[type="file"]
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
	font-size:10px;
}
 
#trombi input[type="radio"]
{
	margin-left: 1%;
	width: 3%;
	border: #CCC 1px solid;
	font-size:10px;
}
 
#trombi input:hover, #trombi select:hover, #trombi input:focus, #trombi select:focus, file:hover
{
	border: #999 1px solid;
	background-color: #DDEEFF;
}
 
/* button submit */
#trombi input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}
 
#trombi input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}
 
#trombi input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}
 
#trombi input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}
</style>

Que devrais-je modifier dans le CSS pour qu'il n'y ait plus de décalage ?
Merci

[kirua99]

Dans ton input texte , il faut mettre une taille.
pour que ton champ texte soit de taille que tu veux.

Code :

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

1
2
3
 
 
<input type="text" value="Bloo was here" name="text1" size="10" maxlength="25" />

[cd090580]

Ah ?? et pas via le css ????

Je définit la taille dans le css

Code :

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

1
2
3
4
5
6
7
#trombi input
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
	font-size:10px;
}

[kirua99]

Essaye de modifier ton "width" en pixel.

Par exemple dans ton code CSS:

Code :

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

1
2
 
width : 30px;

Tu verras comme sa si sa change les champs de ton formulaire.
Sinon change juste avec un pourcentage plus petit.