Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ancre et header fixe

    12 janvier 2021 à 0:41:57

    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

    • Partager sur Facebook
    • Partager sur Twitter
      12 janvier 2021 à 10:15:19

      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.

      • Partager sur Facebook
      • Partager sur Twitter
        12 janvier 2021 à 10:34:24

        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

        • Partager sur Facebook
        • Partager sur Twitter
          12 janvier 2021 à 11:16:09

          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

          • Partager sur Facebook
          • Partager sur Twitter

          La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

            12 janvier 2021 à 17:50:20

            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

            • Partager sur Facebook
            • Partager sur Twitter
              12 janvier 2021 à 18:43:29

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

              • Partager sur Facebook
              • Partager sur Twitter

              La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

                12 janvier 2021 à 22:03:16

                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;
                }
                Mon header est positionné dans la page en Php :
                <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

                • Partager sur Facebook
                • Partager sur Twitter
                  13 janvier 2021 à 7:53:28 - Message modéré pour le motif suivant : Message complètement hors sujet


                    13 janvier 2021 à 9:10:27

                    Supprimé

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

                    • Partager sur Facebook
                    • Partager sur Twitter
                      13 janvier 2021 à 13:12:59

                      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.

                      • Partager sur Facebook
                      • Partager sur Twitter

                      La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

                        13 janvier 2021 à 20:36:16

                        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

                        • Partager sur Facebook
                        • Partager sur Twitter
                          13 janvier 2021 à 23:58:07

                          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  :colere2:  .


                          • Partager sur Facebook
                          • Partager sur Twitter
                            14 janvier 2021 à 12:19:03

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

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

                            • Partager sur Facebook
                            • Partager sur Twitter

                            La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

                              Hier à 15:51

                              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 ?

                              • Partager sur Facebook
                              • Partager sur Twitter
                                Hier à 18:30

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

                                • Partager sur Facebook
                                • Partager sur Twitter

                                La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

                                  Hier à 20:44

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

                                  Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                                    Il y a environ 14 heures

                                    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

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Ancre et header fixe

                                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                    • Editeur
                                    • Markdown