28173 sujets

CSS et mise en forme, CSS3

Positionnement de menu

Bonjour à tous

J'ai suivi ce tutoriel pour créer un menu CSS/JS horizontal, qui marche parfaitement.

J'ai juste un petit problème pour le positionner comme je le souhaite sur ma page, qui est de cette forme :


<body>
  <div id="menu">
    <!-- ici la definition du menu -->
  </div>
  <div id="entete">
    <!-- ici le logo dans un lien -->
  </div>
  <!-- et ici le reste du site -->
</body>


Ce que je voudrais faire, c'est aligner le bas de mon menu sur le bas de l'en-tête. Pour ça je peux faire un position: absolute et modifier top:, mais c'est plus ou moins du bricolage car si on augmente la police, le bas ne sera plus aligné comme je veux.

J'ai alors pensé à mettre le div menu dans le div en-tête, et toujours avec un position: absolute, faire un bottom: 0, hourra ça marche comme je veux mais si je survole le menu avec la souris, les items du menu apparaissent et s'alignent sur le bas de l'en-tête, faisant ainsi remonter mon menu...

Est-il possible de remédier à ce problème, afin que les titres de menu soient alignés en bas de l'en-tête, tout en les gardant à leur place lorsqu'on affiche le sous-menu ?

Merci d'avance pour vos réponses !
Modifié par Nebelmann (27 Oct 2007 - 17:19)
Je me doutais que le code serait léger... mais étant donné que je développe le site à l'aide d'un framework, je peux pas me contenter de copier coller quelques lignes, donc je vous ai refait deux pages récapitulant mon problème :

positionnement avec top:, le div menu est avant le div header, en grossissant la police on voit bien que le menu se décale par rapport à la ligne rouge

positionnement avec bottom:, le div menu est dans le div header, le placement est comme je le veux, sauf lors du survol du menu à la souris.

Pour des questions de réutilisabilité de la CSS, j'ai juste mis un "position: absolute" dedans et j'ai défini le "top:" ou le "bottom:" dans l'attribut style de mes balises div.

Merci pour votre aide

(le site est bien évidemment réduit au minimum, rassurez-vous le style final ne sera pas comme ça ^^)
Modifié par Nebelmann (28 Oct 2007 - 10:40)
Up ?
Personne n'aurait une idée ? ou alors me dire "c'est impossible..." Smiley smile
Modifié par Nebelmann (30 Oct 2007 - 19:02)
Sujet clos
Aller à