Bonjour a toutes et a tous !

J'ai un problème d'ancrage sur mon site voici le code HTML :

<div class="Navigation">
      <img src="photo/logo.svg" />
        <div class="Lien">
          <a href="#Presentation">Présentation</a>
          <a href="#Prestation">Prestations</a>
          <a href="#Tarifs">Tarifs</a>
          <a href="#Contact">Contact</a>
          <a></a>
        </div>
    </div>

Cela me redirige donc vers différents id de la même page : le problème est que lors du déplacement vers les div ancrer, le header se place sur le début de ma div :

Voici le code css de mon header :

.Navigation {
    top: 0%;
    width: 100%;
    height: 80px;
    line-height: 80px;
    z-index: 2;
    position: sticky;
    background-color: #EBEBEB;
    box-shadow: 0px 5px 5px gray;
}

Le problème selon moi est que c'est en position sticky et par conséquent il ne prend en compte la taille du header mais comment faire pour que ça le prenne en compte

Exemple du problème :

Quand je clique sur Prestation je veux qu'il arrive sur l'ancre de la div comme ceci :

Mais il arrive comme ceci :

Merci d'avance pour votre aide !

-
Edité par Dorian_lll 21 septembre 2022 à 11:41:10

Hello. D'autres éléments que ceux que tu nous montres doivent perturber le fux.

Petit conseil si ce n'est déjà fait : impose un margin de 0 au body.

Bonsoir, Évitez les titres de sujets avec "problème", si vous postez on se doute que vous avez un problème inutile de l'indiquer dans le titre cela n'apporte rien comme information quand au contenu de sujet.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Plusieurs erreurs dans votre code. Sémantiquement si vous créer une navigation vous devriez utiliser la balise <nav> .

La balise <img> ne sort jamais sans son attribut alt obligatoire, celui-ci sert à indiquer un texte alternatif décrivant l'image. Cela est utile au personnes mal voyante utilisant une synthèse vocal mais également aux moteurs de recherche. 

Pas de width: 100% pour un block, comme il est positionner utilisez right: 0; left:0; pour qu'il prenne toute la largeur. Lire

 https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Pour votre problème deux solutions.

Solution 1: Petite bidouille, ajoutez la valeur de la hauteur de l’élément positionner à  un padding et si graphiquement cela crée trop d'espace retirer cette même hauteur avec un margin.

            section {
                margin-top: -80px;
                padding-top: 80px;
            }

Solution 2 (que je recommande) utilisez la propriété scroll-margin-top

https://developer.mozilla.org/fr/docs/Web/CSS/scroll-margin-top

            section {
                scroll-margin-top: 80px;
            }

https://caniuse.com/mdn-css_properties_scroll-margin-top

Merci pour vos conseil !