Discussion :

[Benamour Jr]

Bonjour,

J'ai un problème de décalage de mes éléments positionnés via position: relative (j'ai essayé en absolute et ça ne change absolument rien). J'espère que l'un de vous pourra m'aider, je vous explique...

Voici le rendu de ma page sur Firefox ou IE (tout est correcte) :
http://e-storia.info/ie-ff.jpg

Et celui sur Google Chrome (décalage de la zone connexion et de la barre de recherche):
http://e-storia.info/google-chrome.jpg

J'ai remarqué par exemple que pour la barre de recherche décalée (en bas de la bannière), l'espace entre chaque élément du formulaire est différent...

Je vous copie/colle le code de la bannière, du menu du bas (formulaire de recherche) ainsi que ma feuille de style, et je croise les doigts de tomber sur un pro du positionnement en CSS :p

banniere.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// avatar
echo '<img class="avatar" src="avatar/none.png" />';
 
// formulaire de connexion
?>
<form method="post" action="connexion.php">
	<input type="text" name="pseudo" value='Pseudo' size="19" class="login" onFocus="if(this.value=='Pseudo')this.value=''" />
	<input type="password" name="mdp" value='Mot de passe' size="19" class="mdp" onFocus="if(this.value=='Mot de passe')this.value=''" />
	<input type="checkbox" name="cookie" id="cookie" checked="checked" class="connexion_auto" /><label class="connexion_auto_label" for="cookie">Connexion automatique</label>
	<input src="bouton-go.png" type="image" value="submit" name="valider" class="go" />
</form>
<span class="lien_connexion"><a href="creer_compte.php"><font color="white">S'inscrire</font></a> | <a href="retrouver_compte.php"><font color="white">Identifiants oubliés</font></a></span>
<?php

menu-bas.php

Code :

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

1
2
3
4
5
6
 
<form class="formulaire_recherche" method="post" action="recherche.php">
<select name="type" class="formulaire_recherche_select"><option value="individu">individu</option><option value="organisation">organisation</option><option value="pays">pays</option><option value="dossier">thème</option></select>
<input type='texte' name='recherche' class="formulaire_recherche_input" value=' Recherche' onFocus="if(this.value==' Recherche')this.value=''" />
<input type="submit" class="formulaire_recherche_submit" value="GO" name="go" />
</form>

Feuille de style

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
/* Généralités */
 
body
{
	width: 960px;
	margin: auto;
	margin-top: 15px; 
	margin-bottom: 15px;
	font-family: "Trebuchet MS", serif;
	font-size: 15px;
	background-image: url("background-newspaper.gif");
}
 
a
{
	text-decoration: none;
}
 
a:visited
{
	color: blue;
}
 
.msg_erreur
{
	color: #f60909;
}
 
/* Blocks composants le design */
 
#menu-haut
{
	width: 960px;
	height: 30px;
}
 
#banniere
{
	width: 960px;
	height: 150px;
	background-image: url("banniere2.jpg");
	background-repeat: no-repeat;
}
 
#menu-bas
{
	width: 960px;
	height: 47px;
	background-image: url("recherche.png");
	background-repeat: no-repeat;
}
 
#corps-haut
{
	width: 960px;
	height: 47px;
	text-align: right;
}
 
#corps
{
	width: 940px;
	padding: 8px;
	border: 2px solid #000000;
	background-color: #ffffff;
}
 
/* Espace membre */
 
.avatar
{
	position: relative;
	left: 650px;
	top: 25px;
}
 
/* Espace membre : non-connecté */
 
.login
{
	position: relative;
	left: 768px;
	bottom: 121px;
}
 
.mdp
{
	position: relative;
	left: 623px;
	bottom: 85px;
}
 
.connexion_auto
{
	position: relative;
	left: 474px;
	bottom: 51px;
}
 
.connexion_auto_label
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	left: 477px;
	bottom: 52px;
}
 
.go
{
	position: relative;
	left: 467px;
	bottom: 80px;
}
 
.lien_connexion 
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	left: 765px;
	bottom: 47px;
}
 
/* Espace membre : connecté */
 
.pseudo
{
	color: #ffffff;
}
 
/* Formulaire de recherche (menu-bas) */
 
.formulaire_recherche
{
	position: relative;
	top: 9px;
	left: 14px;
}
 
.formulaire_recherche_select
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
   	border: 2px solid #ffffff;
	background-color: #000000;
	color: #ffffff;
}
 
.formulaire_recherche_input
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
	border: 2px solid #ffffff;
	background-color: #000000;
	color: #ffffff;
}
 
.formulaire_recherche_submit
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
}

Merci à celui qui saura m'orienter !

[Benamour Jr]

Problème résolu en plaçant div#bannière en relative puis en plaçant les différents éléments du formulaire en absolute, tout simplement