28111 sujets

CSS et mise en forme, CSS3

Problème entête menu

Bonjour,

Je travaille actuellement sur un site et je dois régler un problème que je n'arrive pas à résoudre.

Il y a un menu en haut a droite avec des liens vers les réseaux sociaux et qui d'autres qui permettent de changer la langue du site. Comme vous pouvez le voir, on peut seulement cliquer sur la traduction, ce qui pose problème.

Les deux divs sont superposées et en changeant le z-index ça change la visibilité de l'autre.

Comment puis-je faire pour cliquer les deux ?

Lien: http://www.bea-bati.fr/

(Dans la partie traduction il peut y avoir plusieurs éléments)


Merci d'avance
Bonsoir.

Si les deux divs se superposent, c'est qu'elles sont plus grandes que leur contenu.

Une solution est de diminuer la largeur des deux divs ('div id="site_traduction"' et 'div id="lien_entete"') en passant leur largeur(width) à 100px et en changeant la propriété left de 'div id="lien_entete"' à 920px.

Mais que c'est tordu...

Smiley smile
Administrateur
Bonjour et bienvenue, Smiley smile

pour positionner ces éléments, il ne faut qu'en dernier recours utiliser le positionnement absolu (oui je sais, position pour positionner ça sonnait bien mais nan).
Il permet en effet ce genre de superposition parce que les éléments positionnés en absolu ne "réagissent" plus à la quantité de contenu qu'ils ont ; on dit que contenu est sorti du flux.

Tu peux remplacer par display: inline-block; sur chacun des éléments (la barre à gauche, la traduction et il y en a peut-être un 3e entre les 2).
L'idéal ce serait Flexbox mais si tu débutes, ce n'est peut-être pas une bonne idée. Quoique si tu réunis tous les conteneurs / éléments dans un même élément parent, c'est aussi simple que d'ajouter display: flex; sur ce dernier (après pour positionner verticalement et autres améliorations nécessaires, il y a pas mal de propriétés à connaître mais on peut t'aiguiller Smiley smile )
Sujet clos
Aller à