[Résolu] Menu trop ou pas assez bas.

Bonsoir,

Ayant terminé un site pour un ami, on m'a signalé que le menu qui se trouve en haut n'était pas visible sous Google Chrome. J'ai donc corrigé ça mais seulement j'aimerais savoir comment faire pour faire en sorte que ce soit corrigé sous Google Chrome mais pas sous les autres navigateurs? Car maintenant sous Firefox ce menu est trop bas.

Site en question: http://www.vue-dun-oeil.fr/
Merci d'avance pour vos réponses.
Modifié par Audidounette (16 Feb 2010 - 18:26)

Salut,

il n'y a pas de raisons pour qu'il y ait de telles différences entre Chrome et Google... sauf si ton code est invalide.

Par exemple un élément H1 est censé être un titre de section et ne peut contenir que des éléments en ligne et pas, comme tu l'as fait, des DIV et autres UL (plus globalement lire Bien construire sa hiérarchie de titres). Comme le code est invalide chaque navigateur va tenter de le corriger selon ses propres règles et on ne peut plus alors s'attendre au même rendu partout.
Modifié par Heyoan (15 Feb 2010 - 22:24)

Je ne comprend pas trop.. Là il s'agit d'un menu, pas d'un titre?

Audidounette a écrit :
Là il s'agit d'un menu, pas d'un titre?

Justement : ce n'est pas un titre.

En simplifiant ton code tu as :

<h1 id="header">
  <a></a>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</h1>

Ce qui est invalide (voir la liste des éléments enfants autorisés).

Question bonus : à quoi te sert le H1 ici ? C'est censé améliorer le référencement ?

Quoi qu'il en soit, et comme c'est incorrect, on ne sait pas comment chaque navigateur va corriger ce code. Par exemple Firefox va le laisser tel quel (bien qu'incorrect) alors que Chrome va fermer le H1 juste avant le DIV ce qui va donner :

<h1 id="header">
  <a></a>
</h1>
<div>
  <ul>
    <li></li>
  </ul>
</div>

Et donc le rendu ne sera pas le même.

Voir également cet article ainsi que celui-ci.
Modifié par Heyoan (16 Feb 2010 - 00:01)

J'ai donc enlevé le h1, (qui ne servait effectivement à rien, seulement c'est un thème wordpress tout fait, et je n'ai jamais vraiment touché à ce code).
Je dois avouer que je suis pas mal perdue, il y a des erreurs que je ne comprends pas. Comme le problème de la fermeture des div, pourtant je les ferme correctement.. (Mais là je commence à faire du hors sujet..)

Audidounette a écrit :
Mais là je commence à faire du hors sujet..

Non non : on est en plein dedans.

Le message de "balise fermante omise" alors que tu l'as bel et bien écrite veut dire que tu as inséré à un moment ou à un autre un élément invalide. Du coup (et comme je te le disais plus haut) le validateur te donne ce message pour te dire qu'il faut d'abord fermer l'élément précédent.

Pour savoir quels sont les éléments HTML enfants autorisés pour chaque élément voir : http://giminik.developpez.com/xhtml/index.php

Merci beaucoup Heyoan, grâce à tout ce que tu m'as donné comme liens j'ai un peu mieux compris la chose, a présent je n'ai plus d'erreur dans mon code xHTML. Cependant .. Cela n'empêche pas mon menu de ne pas être à la même hauteur entre Firefox & Chrome. Est-ce normal ?
Modifié par Audidounette (16 Feb 2010 - 18:07)

Audidounette a écrit :
Cela n'empêche pas mon menu de ne pas être à la même hauteur entre Firefox & Chrome. Est-ce normal ?

Eh bien même si le validateur ne le mentionne pas c'est une "erreur" que d'avoir un lien vide de tout contenu car cela est inaccessible (je veux parler de celui qui est juste après <div id="header">. Comme il a un padding de 10px (mais pas de hauteur) c'est ce qui crée le décalage au dessus du menu dans FF alors que visiblement il disparaît complètement du DOM dans Chrome. Je t'invite donc à le supprimer complètement et à rajouter un padding-top: 60px à #description (à ajuster).
Modifié par Heyoan (16 Feb 2010 - 18:17)

Voilà mon problème réglé. Je n'avais pas vu que le lien après <div id=header> ne donnait aucune contenu. Je te remercie de ta patience Heyoan

Tu es la bienvenue !

Au passage il faudrait penser à optimiser ton image de header (très réussie par ailleurs) car sur le web 300 Ko c'est vraiment beaucoup.

Pas de problèmes, je le ferais !