Discussion :

[margagn]

Bonjour à tous!

J'ai une petite question concernant CSS. Je ne suis pas un expert, mais j'essai... Je fais face au problème suivant que certain vont pouvoir corriger en un tour de main! J'en suis convaincu... J'ai un formulaire qui est le suivant :

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
<span id="clotheMiniForm">
	<span id="category">
		<label for="lstCategory" id="lblCategory">Category</label>			
		<select name="lstCategory" id="lstCategory"><option value="14">Bag</option>
			<option value="16">Dress</option>
			<option value="17">Handbag</option>
			<option value="6">Jeans</option>
		</select>
	</span>
 
	<span id="season">
		<label for="season" id="lblSeason">Season</label>
		<select name="lstSeason" id="lstSeason">
			<option value="1">Spring 2008</option>
		</select>			
	</span>	
 
	<br />
 
	<span id="brandDesigner">
		<label for="brandDesigner" id="lblBrandDesigner">Brand / Designer</label>
		<input type="text" id="txtBrandDesigner" />
	</span>	
 
</span>

Et un fichier style (CSS) qui correspond au suivant :

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
body {
	font-family: Cambria,Georgia,Palatino,Palatino Linotype,Myriad Pro,Serif; 
	font-size: 0.95em;
}
 
br {
	clear: left;
}
 
#clotheMiniForm {
 
}
 
#clotheMiniForm #category, #season {
	display:inline-block;	
	float: left;
	width:10em;
	padding: 0;
}
 
#clotheMiniForm #brandDesigner {
	display:inline-block;	
	float: left;
	width:20em;
	padding: 0;
	margin: 0;
 
}
 
#clotheMiniForm #color{
	display:inline-block;	
	float: left;
	width:5em;
	margin:0 0em 0 0;
}
 
#lblCategory, #lblSeason, #lblBrandDesigner {
	display:block;	
}
 
#clotheMiniForm select, input[type="text"], input[type="password"] {
	width:100%;
}
 
#clotheMiniForm input[type="checkbox"], input[type="radio"] {
	width:auto;
}

Si vous jeter un coup d'oeil à l'image, vous aller voir que la champ sur la 2e ligne est plus long que les deux premiers de la première ligne. J'ai cru tout d'abord que c'étais un problème de marges, mais ca ne semble pas la cas. Comment faire pour que le champ de la seconde ligne soit exactement de la même longueur que les deux de la ligne précédente en utilisant l'unité EM.

En passant, si vous avez des suggestions pour améliorer mon CSS, j'apprécierai beaucoup!

Merci!

Martin

[Damouille]

Il faut definir des tailles pour tes champs. La, tu as des selects et un input, voici un code qui devrait marcher

Code :

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

1
2
3
input, select {
width:70px;
}

[margagn]

Je définis déjà la longeur des champs... jette un coup d'oeil de plus pres...

[Damouille]

Ben moi je vois que des 100% et des auto. Ce sont deux proprietes qui ne fixent pas les tailles. Si tu veux que les champs aient la memes tailles il faut leur specifier une taille fixe.

[Damouille]

En passant, si vous avez des suggestions pour améliorer mon CSS, j'apprécierai beaucoup!

Ca a l'air correct. Une remarque cependant, tu utilises des span que tu redefinis en display block ou block-inline.

Je penses que tu economiserais des lignes dans ton css à utiliser des div qui sont nativement en display block.

De plus, le propriete block-inline n'est pas reconnue par IE6 et inferieur.

[margagn]

Ben moi je vois que des 100% et des auto. Ce sont deux proprietes qui ne fixent pas les tailles. Si tu veux que les champs aient la memes tailles il faut leur specifier une taille fixe.

La taille est fixé par le contrôle parent... Les DIV implique des sauts de lignes et je ne suis pas intéressé. Surtout dans le cas des deux premiers blocs.

[Damouille]

Je suis pas sur de bien comprendre ton probleme, eassaie ceci et dit moi si c'est le resultat que tu voulais

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
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
 
<span id="clotheMiniForm">
	<span class="box" id="category">
		<label for="lstCategory" id="lblCategory">Category</label>			
		<select name="lstCategory" id="lstCategory"><option value="14">Bag</option>
			<option value="16">Dress</option>
			<option value="17">Handbag</option>
			<option value="6">Jeans</option>
		</select>
	</span>
 
	<span class="box" id="season">
		<label for="season" id="lblSeason">Season</label>
		<select name="lstSeason" id="lstSeason">
			<option value="1">Spring 2008</option>
		</select>			
	</span>	
 
	<br />
 
	<span class="box" id="brandDesigner">
		<label for="brandDesigner" id="lblBrandDesigner">Brand / Designer</label>
		<input type="text" id="txtBrandDesigner" />
	</span>	
 
</span>

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
body {
	font-family: Cambria,Georgia,Palatino,Palatino Linotype,Myriad Pro,Serif; 
	font-size: 0.95em;
}
 
br {
	clear: left;
}
 
#clotheMiniForm {
 
}
 
#clotheMiniForm #brandDesigner {
	display:inline-block;	
	float: left;
	padding: 0;
	margin: 0;
 
}
 
#clotheMiniForm #color{
	display:inline-block;
	float: left;
	width:5em;
	margin:0 0em 0 0;
}
 
#lblCategory, #lblSeason, #lblBrandDesigner {
	display:block;	
}
 
#clotheMiniForm select, input[type="text"], input[type="password"] {
	width: 100%;
}
 
#clotheMiniForm input[type="checkbox"], input[type="radio"] {
	width:auto;
}
.box {
	width: 150px;
	float: left;
}
.box input, .box select {
	width: 100%;
}

[margagn]

Malheureusement non, si tu regardes l'image associé à mon premier post, tu vas voir une ligne rouge. Je veux que le champs "Season" et "Designer" se termine sur cette ligne, pas avant, ni après.