design pour un label et un input collé

**bullrot** · 18/06/2010, 12h41

Re bonjour a tous :p

J'ai un petit soucis de design... entre mon label et mon input.
Je voudrais que mes input se colle +- avec mes labels... en laissant un petit espace de 2 px par ex entre le label et le input. mais mon code ne donne pas cela.....

voici déjà le code :

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
/* Contenu Styles
----------------------------------------------- */
div#contenu {
	/*border:1px solid black;*/
	background-color:#ffffff; 
  text-align:center;
	width:100%;
	margin-left:auto;
  margin-right:auto;
	height:auto;
	min-height:100px;
	padding-bottom:20px;
	}  
 
/* -------------------------------------------- */  
label.text {
	background-color: #e7ecff;
	width: 20%;
	float:left;
  text-align: right;
	margin: 0 1em 0 0;  
	margin-left:10%;
	padding: 0.2em;
	/*border-bottom: 1px solid #0198cd;	*/
}
 
input.text,
textarea {
	border:1px solid black;*/
	background-color: #e7ecff;
	width: 40%;
	margin-right:10%;
	margin: 0 1em 0 0;
	padding: 0.2em;
}

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
<!DOCTYPE html PUBddC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>		
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  <title></title>
  <link rel="stylesheet" type="text/css" href="test.css">	 
</head>			
<div id="contenu">
 
<body>	
 
&nbsp;
		<form>				
				<p>
					<label class="text">Date :</label><input class="text" name="Input_Date" type="text" size="10" maxlength="10" />
				</p>
 
				<p>
					<label class="text">No. :</label><input class="text" name="Input_No" type="text" size="4" maxlength="4"/>
				</p>
 
				<p>
					<label class="text">Design No. :</label><input class="text" name="Input_Design_No" type="text" size="30" maxlength="30" />
				</p>
 
				<p>
 
					<input type="hidden" name="validation" value="ok"/>	 
				</p>
 
 
 
				<p class="envoy">
					<input id="validSearch" type="submit" value="Add" />
				</p>
		</form>
 
 
 </div>

le probleme est que ... je pense que mon "div contenu" interfére avec mon form.... si je supprime le text-align=center de mon div contenu cela marche.... mais bon je ne peux pas retirer mon div contenu vous l'aurez compris

merci d'avance ...

**Eric2a** · 18/06/2010, 13h22

Salut,

Envoyé par bullrot

un petit espace de 2 px par ex entre le label et le input

Peut-être avec des unités absolues (2px).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
label.text {
...
	margin: 0px 2px 0px 10%;  
...
}
 
input.text,
textarea {
...
	margin: 0.2em 0.2em 0.2em 2px;
...
}

Envoyé par bullrot

je ne peux pas retirer mon div contenu

Places le au moins après la balise body

**devyan** · 18/06/2010, 14h18

Bonjour,

+1 avec Eric2a

De plus je vois une utilisation "aléatoire" des marges dans ton css :

Code label.text :

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

1
2
	margin: 0 1em 0 0;  
	margin-left:10%;

correspond en fait à

Code :

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

	margin: 0 1em 0 10%;

Alors que

Code input.text, textarea :

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

1
2
	margin-right:10%;
	margin: 0 1em 0 0;

correspond en fait à

Code :

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

	margin: 0 1em 0 0;

devyan

**bullrot** · 18/06/2010, 14h58

Merci pour vos réponses..... j'ai essayé mais sans résultats....
si vous avez d'autres solution a me proposer je suis prenneur.

**Eric2a** · 18/06/2010, 15h12

Remplace

Code :

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

float:left;

par

Code :

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

display:inline-block;

Il me semble qu'un problême a été récemment résolu en utilisant cette technique sur ce même forum.

PS : Sinon, comme dit Devyan, il est effectivemment préférable de traiter les marges "d'un coup";

Code :

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