J'ai un problème de décalage de mes éléments positionnés via position: relative (j'ai essayé en absolute et ca 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
// 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
<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>
Code : Tout sélectionner
/* 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;
}
