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 ?

[mikebranque]

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

Code :

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

	padding-top:10px;

ne marche pas dans mon cas?

[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 :

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

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