Position fixed et largeur en pourcentages

Par hugopb82, il y a 11 ans

Les bases HTML/CSS

Bonsoir, j'ai un problème avec mon menu :
Sans scrollbar tout fonctionne bien :

Mais avec la scrollbar mon menu qui a une largeur a 20% ne tient pas en compte que la taille de la fenêtre a diminuée! :

Mon code html :

<nav id="menu"> <ul> <li><a href="<?= BASE_URL.'about/' ?>">À propos</a></li> <li><a href="<?= BASE_URL.'course/' ?>">Cours</a></li> <li><a href="<?= BASE_URL.'project/' ?>">Projets</a></li> <li><a href="<?= BASE_URL.'contact/' ?>">Me contacter</a></li> </ul> </nav>

et mon css :

#menu{ width: 20%; position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(0%) !important; }

Des idées ? Merci!
Hugo

3 réponses

tunguska, il y a 11 ans

Bonjour,

Essaye de mettre une largeur fixe à ton menu, et tu réduit cette largeur dans les media-querries selon la taille de la fenêtre, ca sera plus simple je pense, et je ne vois pas vraiment quelle sont ces deux barres bleues qui débordent, ce sont les couleurs d'arrière plan des objets se trouvant à l'intérieur de ton menu ? Si c'est le cas, il faut qu'elles gardent la taille de leur parent ;)

tunguska

betaWeb, il y a 11 ans

Tu peux aussi jouer avec la propriété

#menu{ overflow: hidden; /* le reste ici */ }

afin de "cacher" tout ce qui dépasse de ton élément accueillant ton menu.

hugopb82, il y a 11 ans

Merci pour vos réponses mais je viens de trouver ma solution : en fait ce décalage est dû à la scrollbar qui n'est pas prise en compte dans la taille des positions fixes. L'astuce consiste donc a mettre une div warp qui contient tout le code html et à lui donner une largeur de 100% ainsi qu'un overflow:hidden. Ainsi la largeur de mon menu est basée sur la largeur du warp.
Hugo