Discussion :

[Sepiaan]

Bonjour,

Je souhaite faire :



J'ai ecrit ce code :

Code HTML :

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
 
<div id='login_main'>
			<div id='login_and_password_main'>
				<form method='post' action='login.php'>
					<input type='text' value='' class='login_login_main' />
					<input type='password' value='' class='password_login_main' />
					<input type='submit' value='' class='bouton_login' />
				</form>
 
			</div>
			<div id='search_main'>
				<form method='post' action='#'>
					<input type='text' value='' class='search_login_main' />
				</form>
			</div>
		</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
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
 
div#login_main {
	float:left;
	width:21%;
	height:100%;
	}
div#login_and_password_main {
	text-align:left;
	float:left;
	width:100%;
	height:80%;
	background-image:url(../images/login.jpg);
	background-repeat: no-repeat;
	}
form {
	margin:0;
	padding:0;
	}
div#search_main {
	text-align:left;
	float:left;
	width:100%;
	height:20%;
	background-image:url(../images/search.jpg);
	background-repeat: no-repeat;
	}
.login_login_main {
	margin-left: 25%;
	margin-top: 4px;
	padding: 0px; 
	height: 17px; 
	width: 75px;
	}
.password_login_main {
	margin-left: 25%;
	margin-top: 2px;
	padding: 0px; 
	height: 17px; 
	width: 75px;
	}
.bouton_login {
	position: relative; 
	top: -13px; 
	left: 0px;
	margin-top: 0px;
	padding: 0px; 
	height: 34px; 
	width: 43px;
	background-image:url(../images/bouton_login.jpg);
	background-repeat: no-repeat;
	}
.search_login_main {
	margin-left: 28%;
	margin-top: 2px;
	padding: 0px; 
	height: 18px; 
	width: 90px;
	}

Cependant, sous IE, j'obtiens ça :


qui est tout décalé par rapport à ce que je cherchais à obtenir et le bouton n'a pas l'image que je lui ai spécifié .

Le bouton login est en position relative... peut être n'est ce pas la bonne solution

Sous firefox, l'affichage est correct

Si quelqu'un peut me dire comment sont réalisés en général les formulaires de connexion de ce type...


Merci !

[Peut-êtreUneRéponse]

Pour l'image du bouton, rajoute un espace entre ":" et "url",

Avant:

Code css :

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

background-image:url(../images/login.jpg);

Après:

Code css :

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

background-image: url(../images/login.jpg);

[Sepiaan]

L'image n'apparait toujours pas dans le bouton sous IE... mais correctement sous FF ce qui etait deja le cas...


---- EDIT ----

J'ai ecrit ce code pour le cas du bouton, et l'image apparaît bien...

Code CSS :

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

1
2
 
background: url(../images/bouton_login.jpg) no-repeat center center;

Je n'ai plus qu'un problème de mise en page sous IE qui est vraiment troublant...

[Dan_A]

Pourquoi ne pas mettre le "test case" en ligne ?
Cela permettrait de répondre à plusieurs questions :
Quel Doctype ?
Les marges et hauteurs utilisent des pourcentages (de quoi ?)
La largeur spécifiée est-elle suffisante ?
etc