mise en forme de div par css

Version imprimable

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:

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:

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>

08/06/2007, 07h18
mikebranque
Code:

1 2 clear: left

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

Code:

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:

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>

Et qqch de tout simple du genre:

Code:

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:

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.

08/06/2007, 17h58
mikebranque

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

Mais un probleme subsiste .
Sous IE pas de probleme mais sous FireFox le bouton reste collé au INPUT
Voici le code:
CSS

Code:

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:

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>

Code:

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 ?

11/06/2007, 22h24
mikebranque

Merci . Ca marche.
Mais peux tu m'expliquer pourquoi sous Fire Fox le margin top , que tu as remplacé par

Code:

padding-top:10px;

ne marche pas dans mon cas?
13/06/2007, 08h30
trotters213
C'est un mystère pour moi aussi.
Je pense que c'est dû au fait que les div que tu mets au dessus sont sortis du flux (tu utilises float) et que les margins verticaux ne s'additionnent pas, c'est à dire que si tu as un div A sur un div B et que tu fais :
Code:

1 2 3 4 5 6 A { margin-bottom:20px; } B { margin-top:30px; }
la marge entre tes 2 div sera de 30 (max entre 20 et 30) et non de 50.
Les padding, eux, ne se comportent pas comme ça.
C'est la seule explication que j'ai.
Mais ce qui fait que je reste sceptique c'est que ton dernier div add_item_bt est remis dans le flux grâce au clear donc ... mystère :mrgreen: