Forum d'entraide PHPFrance

Bonjour,

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

menu-bas.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>

Feuille de style Merci à celui qui saura m'orienter !

tu pourrais pas nous filer un liens vers la page Stp !? c'est plus parlant et plus pratique

@++

http://www.e-storia.info/design.php

salut !

de prime abords, je te conseillerais de placer le parent en position:relative
tous les éléments du formulaire en position:absolute (position absolute par rapport au parent relatif le plus proche ^^)
ensuite, plutôt que de gérer le positionnement en fonction des attribut CSS left et Bottom, le faire avec top et right (c'est plus logique)

j'ai fais un test de modification en live (FF & webkit) et ça fonctionne bien


Sinon, il te suffit de placer un hack du style -webkit-left:610px; dans ta class mdp et le tour est Joué !... mais c'est pas propre ^^

@++

EDIT : oubli le Hack, c'est pas un soucy de webkit vu que sous safari ça tourne ^^ !... c'est juste spécial Chrome !... on aura tout vu !...
En tout cas, félicitation, j'avais jamais vu de différence dans l'interpretation du html/CSS entre safari (webkit) et chrome (webkit) ...

Quel est le parent qui doit etre positionné en relative ?
Car j'ai un <div id='banniere'> qui englobe toute la bannière (sans le menu des liens accueil/recherche avancée et sans la zone de recherche) mais celui-la ne doit pas etre positionné en relative car il est à sa place sans positionnement.
Si le parent doit être le <form>, ca me donne ca:

http://e-storia.info/no-position.jpg

je suis donc obligé de positionner mes éléments avec bottom car il doivent être surélevés.

Pareil si je crée un <div id="connexion"> à l'intérieur du <div id='banniere'> pour que ce div connexion soit le parent de tous les éléments qui le composent :

http://e-storia.info/no-position2.jpg

Je visualise pas trop bien ta solution, mais j'ai pas encore bu mon café... :p
En tout cas merci pour ton aide

Je visualise pas trop bien ta solution, mais j'ai pas encore bu mon café... :p

lol !!..

moi, j'utiliserai le div#banniere comme parent référent, il englobe bien les éléments, et a une position stricte et stable !
le formulaire à selon moi, un comportement moins cross-browser, et ne sert pas à positionner les éléments HTML dans une page, il sert à déclarer un formulaire et c'est tout ce qu'il faut en attendre

le principe est que l'on a une célulle #banniere qui est fixe (taille fixe, positionnement strict), autant que ses enfant l'utilise que position relative ça nous fera une bonne base !
Dedans, nous avons x éléments, en les plaçant en absolut, on peux leur donner des repères TOP/LEFT/RIGHT/BOTTOM qui les positionnerons au sein de la div relative parent la plus proche (#banniere).

Cette structure (pas très dynamique), va fixer les éléments dans leur environnement HTML à des emplacements absolus !... et c'est ce que tu souhaitais ... non ?

Je viens de découvrir que je pouvais ajouter un "position: relative;" a ma div#bannière sans pour autant devoir spécifier une position... merci à toi (et au café :p) ca marche impec' ! J'arrivais pas à comprendre l'intérêt de placer la bannière en relative alors qu'elle était déjà correctement placée...

la position: relative; sert justement à dire au navigateur de prendre cet élément en tant que support de base pour les éléments absolus ou fixed enfants

position:relative n'as pas pour objet d'influer sur le positionnement de l'élément à qui il appartient, mais sur celle de ses enfants