Bug élément sticky

Par kurdtkobane, il y a 5 ans

Les bases HTML/CSS

Bonjour,

Je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à faire une navbar en display grid avec sous menu caché.

Le code HTML:

<div class="navbar"> <div class="accueil"> <a href="index.php">Accueil</a> </div> <div class="cours"> <a href="cours.php">Les cours</a> <div class="sub-menu"> <div> <a href="html-css.php">HTML/CSS</a> </div> <div> <a href="php.php">PHP</a> </div> <div> <a href="js.php">JS</a> </div> </div> </div> <div class="cv"> <a href="cv.php">Mon parcours</a> </div> </div>

Le code CSS

.navbar { list-style-type: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); width: 75%; margin: auto; text-align: center; text-decoration: none; position: sticky; top:0; } .accueil{ grid-row: 1; grid-column: 1/3; grid-column-end: 2; background-color: blueviolet; } .cours{ grid-row: 1; grid-column: 2/3; background-color: brown; } .cv { grid-row: 1; grid-column: 3/3; background-color: yellowgreen; } .sub-menu { background-color: lightcoral; position: absolute; visibility: hidden; text-align: left; width: 33.33%; opacity: 0; transform: translateY(-2em); z-index: -1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .cours:focus .sub-menu, .cours:focus-within .sub-menu, .cours:hover .sub-menu { visibility: visible; background-color: lightcoral; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; } .navbar :hover{ background-color: white; } .accueil a{ display: block; } .cours a{ display: block; } .cv a{ display: block; } .sub-menu a{ display: block; }

Ce que je veux

Je cherche à supprimer cette artefact (cf ce que j'obtiens)

Ce que j'obtiens

La navbar fonctionne, mais j'ai un bug sur lorsque l'utilisateur zoom sur la page à 125% et 175% j'ai un artefact qui fait que la navbar n'est pas totalement à 0 en top.

https://www.casimages.com/i/210221125949554237.png.html

4 réponses

Arzou, il y a 5 ans

Hello !
Question con : as tu reset ton css ? avec un margin: 0 et un padding:0 au body ?

kurdtkobane, il y a 5 ans

oui j'ai un main.css avec

*{
margin: 0;
padding:0;
}

Arzou, il y a 5 ans

Ok ! Parce que j'ai testé chez moi et ça marche donc je ne sais pas d'ou peut venir le probème :(

kurdtkobane, il y a 5 ans

Oui bizarre, j'ai ce bug sur mes deux écrans de la maison, mais pas sur les 2 écrans du taf!