Bonjour,

Je débute en html/css.

J'ai une ancre en milieu de page.

          <p id="ancre">Texte</p>

Quand je clique sur le lien,

          <a href="page.php#ancre">Texte</a>

l'ancre se positionne cachée sous mon header qui est fixe. Comment puis-je la faire apparaître plus bas que le header ?

Merci

-
Edité par Alain Chavenon 12 janvier 2021 à 17:41:33

Salut,
Pour palier le problème, 2 possibilités.

• En CSS, il faut que l'élément qui possède l'id ai un padding correspondant à la hauteur de header. Mais en fonction de ton design ça peut être compliqué à être mis en place (98% des cas du coup ...)
• L'autre solution consiste à faire du JS. En gros refaire le comportement de l'ancre mais au lieu de position le scroll à niveau de l'ancre, ce sera la position de l'ancre plus la hauteur du header. 

La seconde solution sera efficace à 100%, mais le travail est plus long (penser toute les situations) et il faut passer par le Javascript.

Merci.

Pour le JS, on verra plus tard. Je n'en suis pas encore là.

Pour le CSS. Je n'ai pas mon ordi près de moi pour tester mais, a priori, si je met un padding sur mon id, je vais avoir un décalage dans ma page. (mon ancre est en milieu de page, pas au sommet).

Y a-t-il un moyen de corriger ça avec le css ?

Bonne journée

Salut, je pense que le problème vient de ta position fixed du header qui cache le contenu en dessous.

Remplace fixed par sticky, ton problème sera résolu:

Petit tuto ici:

https://www.youtube.com/watch?v=mooeJrDA9zA

NadfriJS,

C'est en effet mon problème. J'ai corrigé mon post initial qui n'était pas clair.

J'avais utilisé padding comme le conseille Toutoclic plus haut. Il me convient bien pour d'autres raisons.

Merci pour ce "sticky" mais ça ne résout pas mon problème. Cela permet à ma section de s'afficher sous le header par défaut mais lorsque je clic sur le lien vers la même page (ou une autre d'ailleurs), l'ancre se positionne toujours sous le header.

-
Edité par Alain Chavenon 12 janvier 2021 à 17:51:11

Le plus simple serait de copier coller ton code, afin qu'on puisse le tester directement.

OK.

Donc, quelque part dans ma page, un lien :

<p>Texte<a href="#nom_ancre">Texte_lien</a>Texte</p>

Qui me dirige vers mon ancre, elle même située dans le corps d'une page :

<h2 id="nom_ancre">Texte</h2>

Sauf que l'ancre se planque derrière mon header (une image) dont voici le css :

header
{
width: 100%;
position: fixed;
left: 0px;
top: 0px;
background-color: white;
}

<header>
        <?php include("en_tete.php")?>
</header>

Il y aurait bien une solution :

#nom_ancre
{
  margin-top:-200px;
  padding-top:200px;
}

200 étant la hauteur de mon header.

Sauf que si j'ai de nombreuses ancres (et c'est mon cas), il faudra le faire pour nom_ancre_1, nom_ancre_2, ... etc.

Une idée pour améliorer ce point ?

Merci de votre aide. J'ai tourné pas mal sur d'autres sites mais rien de plus concluant en CSS.

Bonne soirée.

-
Edité par Alain Chavenon 12 janvier 2021 à 23:51:35

Supprimé

-
Edité par Alain Chavenon 13 janvier 2021 à 9:27:58

Salut, en effet c'et un problème que je n'avais jamais remarqué jusqu'à présent, et après quelques recherches j'ai trouvé un super truc:

.ancres {scroll-margin-top: 200px;}

Tu mets cela en CSS à tes ancres, et ca va décaler le scroll en conséquence.

Top @NadriJS je ne connaissais pas non plus, belle trouvaille !

Je pense que dans certaine situation ça peut être problématique (toujours le cas quand on modifie le comportement du scroll) mais ça ouvre pas mal de possibilités avant de passer sur du JS.

Yoann

Je comprends l'idée. Ca à l'air sympa.

Donc, j'ai toujours le lien :

<p>Texte<a href="#nom_ancre">Texte_lien</a>Texte</p>

Puis mon ancre avec un class (je devrais donc toutes les identifier ainsi) :

<h2 class="lien_ancre" id="nom_ancre">Texte</h2>

Et le CSS

.ancres {scroll-margin-top: 200px;}

Sauf que mon éditeur (NotePad++) ne me le "prends" pas. Il comprend scroll mais pas scroll-margin-top.

Ca à l'air d'être un autre problème ...

En attendant, je me débrouille avec les margin/padding mais si vous avez encore un peu de temps pour me conseiller, ce serait chouette. Je n'aime pas rester sur un truc que je n'ai pas compris    .

Toutes tes ancres doivent avoir une id unique, mais une class identique, voici un exemple ci dessous:

https://codepen.io/nadfri/pen/eYdQEXW

Salut,

Oui, c'est bien ce que j'ai fait comme dans ton exemple. D'ailleurs, très pratique ton site.

Mais je ne peux pas le tester car dans mon éditeur, la propriété scroll-margin-top  ne marche pas. Comme d'autres d'ailleurs.

Notepad ne me la donne même pas dans la liste de choix (il s'arrête à scroll) et si je l'écris, la coloration syntaxique ne s'applique pas.

Tu saurais pourquoi ?

Je te conseille vivement d'utiliser Visual Studio Code, c'est gratuit, et c'est le top.

(je conseille personnellement VSCodium, qui est la version libre dé-microsoftisée et sans le tracking)

Alain Chavenon a écrit:

Salut,

Oui, c'est bien ce que j'ai fait comme dans ton exemple. D'ailleurs, très pratique ton site.

Mais je ne peux pas le tester car dans mon éditeur, la propriété scroll-margin-top  ne marche pas. Comme d'autres d'ailleurs.

Notepad ne me la donne même pas dans la liste de choix (il s'arrête à scroll) et si je l'écris, la coloration syntaxique ne s'applique pas.

Tu saurais pourquoi ?

Désolé de paraître bizarre mais notepad++ the sert juste a taper ton Code, ce n'est pas un compilateur, qu'il reconnaisse ton code ou pas n'est pas le plus important. Lance le navigateur et voit si ça marche

Salut à tous,

Pour Asmitta,

Oui. Je ne l'avais pas précisé mais, bien sur, le navigateur ne me donnait pas la réponse attendue.

Pour tous,

Merci à tous pour vos réponses. Je vais déjà changer d'éditeur et je reviendrais vous dire si ça marche (y'a pas de raison).

La bise.

Alain

Salut à tous,

Et merci pour le soutien.

Scroll-margin fonctionne très bien pour résoudre ce problème qui, apparemment, embête bcp de monde.

Cette propriété n'était pas prise en compte par Notepad mais marche très bien sur Visual Code. Sur https://developer.mozilla.org/, dans les spécifications, elle a un état de "Candidat au statut de recommandation". Peut-être un rapport ? En tout cas, maintenant, ca marche.

Bon code !