J’ai un problème survenant sur chrome, pas sur firefox ni internet explorer.
Mon header contient tout simplement un titre à gauche, et un formulaire à droite.
Hors sur chrome, le formulaire se place sous le header et pas à l’intérieur.
J’ai déjà pas mal cherché, mais aucune des solutions que j’ai pu tester n’a fonctionné.
Voici le code HTML:
<header>
<div class="titre_header">
<h1>ASSISTANT INFORMATIQUE</h1>
</div>
<div class="zone_connexion">
<form action="index.php" method="post">
Entrez le mot de passe :
<input type="password" name="mot_de_passe">
<input type="submit" value="Valider">
</form>
</div>
</header>
Voilà, si vous avez des suggestions n’hésitez pas!
Edit: Les tabulations ne fonctionnent pas, je ne comprend pas pourquoi, de ce fait le HTML est plutôt illisible, je m’en excuse :arf:
Edité le 14/08/2014 à 09:46
Le display du h1 n’est pas définit, peut être que chrome ne l’interprete pas comme les autres browser. Aucune largeur n’est définie, je ne comprend pas comment tu peut afficher un objet à gauche et un à droite.
Pas besoin de définir de largeur spécifique, les div prennent la largeur nécessaire à l’affichage de leur contenu. Et c’est le inline-block ainsi que le float:right qui suffisent à afficher une div à gauche et l’autre à droite du contenant principal qu’est le header.
Sinon pour ta suggestion, j’ai tenté un ‘display: inline-block;’ sur le h1, sans succès
EDIT: Je viens de tester en modifiant directement le css sous chrome, si je remplace le float:right par float:left, il va bien comme attendu à gauche, et le div du h1 se décale, puis si je change à nouveau le float:left pour remettre float:right, alors là il se place bien! Je vois toujours pas vraiment le problème, mais il semblerait que ça se joue au chargement de la page.
Edité le 19/08/2014 à 18:55
Si tes autres blocs ont une largeur “définie” oui le inline block doit suffire… D’après mes souvenir float left / right dépend quand même de l’ordre d’affichage du html… Sinon t’a essayer de mettre un !important sur ton float ? Au niveau des héritages, en a tu dans ta page ?
Plutôt que de jouer avec des float pour placer tes composants, ce que j’ai jamais trouvé bien (pour moi, c’est pour faire des cadres flottants pas pour placer des composants à gauche/droite d’un autre, pourquoi ne pas utiliser des display: table/table-row/table-cell ?
D’ailleurs, me semblait que CSS3 devait permettre des conneries façon GridBagLayout -> caniuse.com…
La version en ligne, je te l’envoie par message privé.
Je vais voir pour la méthode des colonnes d’autre part, mais j’aimerai aussi comprendre d’où vient ce problème de placement avec chrome, par simple curiosité. ^^)
Edité le 25/08/2014 à 11:22
J’ai reçu ton pm ! Donc effectivement sous chrome le bordel du mot de passe s’aligne mal… Quand je touche au float right, j’ai pareil que toi, il s’aligne à coté du h1 et ensuite il viens ce coller correctement à droite quand je recoche.
Mais bon, vu que en mettant l’important il ce désactive et réactive je suis pas sur… Ton bug il est bien louche je ne trouve pas non plus. Ce qui est sur c’est que c’est une histoire de padding ont dirais, vu que c’est le padding de ton header qui doit pousser ou non ton form.
Par contre je note une “erreur de conception” au niveau de la balise h1. Si tu à une balise H1, pas besoin de l’englober dans une autre div. Au pire tu rajoute une classe sur la balise h1.
Quand je fais la simu sous chrome, firebug me renvoit ça :
Donc surement une histoire de paramètre par défaut. Au vu du code, header footer section aside, tu utilise wordpress ? Si oui je te conseille de recommencer en utilisant le thème bootstrap, c’est fait pour faire des grilles et t’a une compatibilité pour les mobiles.
Perso je déconseille, car sous chrome c’est encore en dev. C’est un peu le soucis de tout les dernier trucs qui viennent de sortir, faudra attendre encore pas mal de temps pour que ça s’affiche partout pareil.
