Discussion :

[thierryG]

bonjour
j'ai un petit souci d'alignement de bloc input et select que je n'arrive pas à résoudre.
voici un extrait du code html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="userTitle"><input id="userZipcode" type="text" name="CodePostal" maxlength="5" style="float:right" />Code postal&nbsp;</div>
			<div id="userTitle"><input id="userCity" type="text" name="Ville" maxlength="30" style="float:right" />Ville&nbsp;</div>
 
			<div id="userTitle" style="clear:both"><select id="userCountry" name="Pays" style="float:right" >
				<option value="1" selected="selected">France</option>
				<option value="2">Alg&eacute;rie</option>
				<option value="3">Chine</option>
				<option value="4">Tunisie</option>
			</select>Pays&nbsp;</div>
			<div id="userTitle"><input id="chiffre10" type="text" name="TelPerso" maxlength="10" style="float:right" />Tél&nbsp;</div>
			<div id="userTitle"><input id="Telephone" type="text" name="MobilePerso" maxlength="10" style="float:right" />Port&nbsp;</div>

et maintenant un extrait du 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
 
#userPersonnal
{
	width:600px;
	clear:both;
	border:#006600 thin solid;
	padding:5px;
	display:block;
	margin:0px;
	margin-bottom:15px;
}
#userPhoto
{
	width:200px;
}
#userPhoto img
{
	width:100px;
	height:150px;
	border:#999999 ridge thick;
}
#userPersonnalInfos
{
	float:right;
	width:300px;
}
#userOtherInfos
{
	width:600px;
	clear:both;
	border:#00FFAA thin solid;
	display:block;
	padding:0px;
	padding-bottom:15px;
	margin:0px;
}
#userAddressInfos
{
	width:250px;
	padding:5px;
	margin:0px;
	border:#006600 thin solid;
}
#userAddressInfos input
{
	border:#009900 thin solid;
	margin-bottom:5px;
}
#userAddressInfos select
{
	border:#009900 thin solid;
	margin-bottom:5px;
}
#userAddress
{
	width:100%;
}
#userElectonicInfos
{
	width:290px;
	float:right;
	padding:5px;
	margin:0px;
	border:#006600 thin solid;
}
#userElectonicInfos
{
	padding:0px;
	margin:0px;
	width:300px;
}
#userLogin
{
	width:100px;
}
#userMdP
{
	width:200px;
}
#userTitle
{
	font-weight:bold;
}
#userAddress
{
	border:#009900 thin solid;
}

si quelquun a un avis je suis preneur

cordialement

[Erwan31]

Bonjour,
la logique de l'odre dans le flux du code est inversée, ce qui peut poser problème
dans certaine contexte d'utilisation, notamment en cas d'absence de couche de présentation CSS (navigateurs textuels, désactivation de CSS, impressions du doc individuellement...) ou de lecture par un logiciel de synrthèse vocal.
D'autre part tu oublies l'élément LABEL qui doit être associé à chaque contrôle.


Pour la problème de positionnement tu as 2 possibilités (via float ou via position:absolute)

Ce qui donne

Code :

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

<p id="userTitle"><label for="chiffre10">Tél.</label> <input id="chiffre10" type="text" name="TelPerso" maxlength="10" /></p>

Ne pas oublier le couple for/id des label / input/select...

et la CSS

Code :

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

1
2
3
4
 
form {position:relative; width: 250px}
form input, form select {position:absolute; right:0}
p {line-height: 1.5em} /*par exemple*/

Ne pas oublier l'élément FORM pour englober le tout.

Attention, tu ne peux pas avoir plusieurs fois le même ID dans le même page contrairement à class.