Discussion :

[mikebranque]

Bonjour.
Je souhaite faire une mise a page comme ceci:
les div "add_item_label" et "add_item_input" sont sur la meme ligne
e le div ""add_item_bt" doit etre en dessus.

Mais mes trois div restent alignés. Ci joint mon css et mon htlm.
Avez vous des conseils pour ce type d'affichage.


[<div id="add_item_label">][<div id="add_item_input">]

[<div id="add_item_bt">]



voila mon 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
 
#add_item_fom
{
	border: 3px solid gray; 
	position:absolute;
	top:200px;
	left:380px;
	/*width:350px;*/
	width:650px;
	height:150px;
	z-index:3;
	background-color: #FFFFCC ;
}
 
#add_item_margin
{
	margin-top: 30px;
	position: relative;
}
#add_item_bt
{
	text-align: center;
	border: 1px solid gray;
	/*margin-bottom: 10px;*/
}
 
#add_item_label
{
	float: left;
	margin-left: 30px;
	width: 120px;		
}
 
#add_item_input
{
	float: left;
}

voila le HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="add_item_fom" >
	<div id="add_item_margin"></div>
		<form id="addForm" action="javascript:void(null);" onsubmit="addForm('ok_role')";">
			<div id="add_item_label">Ajouter un Role:</div>
			<div id="add_item_input"><input type="text" name="role"/></div>
			<div id="add_item_margin"></div>
			<div id="add_item_bt"><input id="addRole" type="submit" value="Ajouter un Role"/></div>
		</form>
<div>

[mikebranque]

Code :

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

1
2
 
clear: left

[trotters213]

Tu peux même améliorer la chose en supprimant ton div inutile add_item_margin :

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
#add_item_fom {
border: 3px solid gray; 
position:absolute;
top:200px;
left:380px;
width:650px;
height:150px;
z-index:3;
background-color: #ffc ;
}
 
#add_item_bt {
text-align: center;
border: 1px solid gray;
clear:both;
margin-top:30px;
}
 
#add_item_label {
float: left;
margin-left: 30px;
width: 120px;		
}
 
#add_item_input {
float: left;
}
 
#addForm {
margin-top:30px;
}

Code HTML :

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

1
2
3
4
5
6
7
<div id="add_item_fom" >
	<form id="addForm" action="javascript:void(null);" onsubmit="addForm('ok_role');">
		<div id="add_item_label">Ajouter un Role:</div>
		<div id="add_item_input"><input type="text" name="role"/></div>
		<div id="add_item_bt"><input id="addRole" type="submit" value="Ajouter un Role"/></div>
	</form>
</div>

[Candygirl]

Et qqch de tout simple du genre:

Code html :

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

1
2
3
4
5
6
7
<div id="add_item_fom">
		<form id="addForm" action="javascript:void(null);" onSubmit="addForm('ok_role')";>
			<label for="add_item_input">Ajouter un Role:</label>
			<input type="text" name="role" id="add_item_input"/>
			<input id="addRole" type="submit" value="Ajouter un Role"/>
		</form>
</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
#add_item_fom
{
	border: 3px solid gray; 
	position:absolute;
	top:200px;
	left:380px;
	width:590px;
	height:90px;
	z-index:3;
	background-color: #FFFFCC ;
	padding:30px;
}
 
#addRole{
	display:block;
	margin:30px auto 0;
}

Tu peux attribuer des styles (à l'aide d'une classe ou d'un id) à n'importe quelle balise. Les span et div ne doivent être ajoutés que lorsqu'on a vraiment besoin d'un élément supplémentaire.

[mikebranque]

Un grand merci je commnce a y voi un peu plus claire.

[mikebranque]

Mais un probleme subsiste .
Sous IE pas de probleme mais sous FireFox le bouton reste collé au INPUT
Voici le code:
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
 
#add_item_fom 
{
	border: 3px solid gray; 
	position:absolute;
	top:200px;
	left:380px;
	width:350px;
	height:150px;
	z-index:2;
	background-color: #ffc;
} 
 
#add_item_bt 
{
	text-align: center;
	clear:both;
	margin-top:10px;
} 
#add_item_label 
{
	float: left;
	margin-left: 30px;
	margin-top: 30px;
	width: 120px;		
} 
#add_item_input 
{
	margin-top: 30px;
	float: left;
} 
#addForm 
{
	margin-top:20px;
}
 
#add_item_label1 
{
	float: left;
	margin-left: 30px;
	margin-top: 3px;
	width: 120px;		
} 
#add_item_input1 
{
	margin-top: 3px;
 
}

HTML

Code :

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

1
2
3
4
5
6
7
8
 
<div id="add_item_fom" >
	<form id="addForm" action="javascript:void(null);" onsubmit="addForm('ok_role');">
		<div id="add_item_label">Ajouter un Role:</div>
		<div id="add_item_input"><input type="text" name="role"/></div>
		<div id="add_item_bt"><input id="addRole" type="submit" value="Ajouter un Role"/></div>
	</form>
</div>

[trotters213]

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
#add_item_fom 
{
	border: 3px solid gray; 
	position:absolute;
	top:200px;
	left:380px;
	width:350px;
	z-index:2;
	background-color: #ffc;
} 
 
#add_item_bt 
{
	padding-top:10px;
	margin-bottom:20px;
	text-align: center;
	clear:both;
} 
#add_item_label 
{
	margin: 30px 0 0 30px;
	float: left;
	width: 120px;		
} 
#add_item_input 
{
	margin-top: 30px;
	float: left;
}

C'est mieux comme ça ?