Barre de navigation fixée masque les ancres

**RowanMayfair** · 10/05/2020, 12h40

Bonjour,

J'ai donc une barre de navigation en haut, fixe.
Pour accéder à mes différentes sections, pas de soucis, grâce à data-offset :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body data-spy="scroll" data-target=".navbar" data-offset="100">
        <nav class='navbar navbar-default navbar-fixed-top'>
            <div class='container'>
                <div class='navbar-header'>
                    <button type='button' class='navbar-toggle' data-toggle='collapse'
                        data-target='#myNavbar'>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                    </button>
                </div>
                <div class='collapse navbar-collapse' id='myNavbar'>
                    <ul class='nav navbar-nav'>
                        <li><a href="#about">Accueil</a></li>
                        <li><a href="#skills">Compétences</a></li>
                        <li><a href="#experience">Expérience</a></li>
                        <li><a href="#education">Formation</a></li>
                        <li><a href="#portfolio">Projets / Travaux pratiques</a></li>
                        <li><a href="#veille">Veille</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>                
            </div>           
        </nav>

ça, ça fonctionne très très bien.

Mais, dans ma section "compétences", j'ai des div avec des liens : ces liens renvoient beaucoup plus bas dans la page, vers le TP concerné :
Un exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-sm-4">
                        <div class='lang_'>
                            <div class="titre">
                                <img src='images/logo blanc/logo_c.png' alt="logo c# blanc">
                                <p>C#<span class="glyphicon glyphicon-chevron-down"></span></p>                                
                            </div>
                            <div class="corps">                               
                                <ul>
                                    <li class="head_skills">Avec Visual Studio : </li>
                                    <li><a href="#dvd">Gestion Dvd</a></li>
                                    <li><a href="#contacts">Gestion des contacts</a></li>
                                    <li><a href="#pendu">Jeu de Pendu</a></li>
                                    <li><a href="#mastermind">Mastermind</a></li>
                                    <li><a href="#morpion">Morpion</a></li>                               
                                </ul>                           
                            </div>
                        </div>
                    </div>

Sauf que là bien sûr, c'est tout moche, c'est à dire que le haut du TP concerné est masqué par la barre
Nom : Capture.PNG
Affichages : 1068
Taille : 24,4 Ko

Or, je voudrai obtenir ceci :
Nom : Capture 2.PNG
Affichages : 1062
Taille : 32,1 Ko

Je ne trouve pas de solutions pour que l'ancre soit décalée 30px plus haut par exemple.

Connaissez vous une solution ?

D'avance merci

**RowanMayfair** · 12/05/2020, 12h13

Je vois bien que mon sujet vous a inspiré

C'est pas grave, j'ai trouvé un truc : je le donne, on en sait rien ça peut servir.

Donc, c''était en fait tout simple.

Dans mon html, j'ai rajouté une <div> vide, avec une classe .anchor, et l'id du TP concerné

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="col-sm-4">
                        <div class="anchor" id="pendu"></div>
                        <div class="tp">                                                   
                            <div class="titre">
                                <h2>Pendu</h2>
                                <div class="mauve-divider"></div>
                                <br>
                                <div class="logos">
                                    <img src="images/logo_visual.png" alt="image logo Visual Studio"> 
                                    <img src="images/logo_c.png" alt="image logo C#">
                                </div>
                                <div class="mauve-divider"></div>
                                <br>
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </div>
                            <div class="corps">
                                <p>TP : Le célèbre jeu de Pendu, développé avec une petite application graphique</p>
                                <img src="images/captures/Capture_pendu.png" alt="copie écran appli jeu de pendu">
                                <br> <br>
                                <a href="docs/synthese_Pendu.pdf" target="_blank">Fiche de Synthèse</a>                                
                            </div>
                        </div>
                    </div>

et en css, j'ai simplement appliqué une taille à cette classe .anchor, et le fond de la bonne couleur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.anchor {
    height: 35px;
    background: #b01973;    
}

et c'est tout en fait. C'était aussi simple que ça.
Quand on pense que je viens de passer la matinée à chercher et tester toutes les solutions proposées sur le net.....alors qu'en ajoutant une div vide pour le décalage c'était suffisant.

Voilà

**NoSmoking** · 26/05/2020, 19h14

Bonjour,

Quand on pense que je viens de passer la matinée à chercher et tester toutes les solutions proposées sur le net

cela paraît surprenant que tu n'ai rien trouvé d'exploitable.

alors qu'en ajoutant une div vide pour le décalage c'était suffisant.

C'est une solution qui oblige à modifier le code HTML, il existe une méthode qui utilise un pseudo-élément et qui ne demande que l'ajout d'un morceau de code CSS.

Le code CSS à ajouter à la page est des plus succinct :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
:target::before {
  content: " ";
  display: block;
  height: 4rem;         /* hauteur de la partie fixe */
  margin-top: -4rem;    /* moins la hauteur de la partie fixe */
}

Les propriétés height et margin-top sont à ajuster suivant la hauteur de la partie fixe.

Avec ce CSS c'est le pseudo-élément qui est masqué par la partie fixe.

Inutile donc d'ajouter des éléments à la page.

Exemple mis en ligne : Ancre cachée par un menu en position:fixed

**RowanMayfair** · 27/05/2020, 08h42

Envoyé par NoSmoking

Bonjour,

cela paraît surprenant que tu n'ai rien trouvé d'exploitable.

(...)

Ou pas si surprenant que ça.
J'utilise Bootstrap 3 dans ce ... truc, que je découvrais tout juste, et je commence seulement à me rendre compte tout ce qu'il peut générer comme css.
Alors quand ça m'arrange j'en suis bien contente, mais il est parfois difficile de comprendre pourquoi le bout de code trouvé sur le net et qui paraît-il fait le boulot ne fait...rien du tout chez moi.

En fait la solution est simplement, dans ce cas, de mettre !important au bout de chaque ligne pour "écraser" le css invisible.
Si j'avais fait ça, sur les solutions trouvées ici et là, sans doute que ça aurait fonctionné. Ou alors je suis vraiment une quiche, ça aussi c'est possible

Bref. Quand on débute et qu'en plus on apprend seule ou presque (avec des formations en ligne), ce genre de mésaventures, ça arrive.

**NoSmoking** · 27/05/2020, 09h22

J'utilise Bootstrap 3 dans ce ... truc

Je ne saurais trop te conseiller de passer à la version 4 d'autant que la v5 sera « bientôt » disponible !

mais il est parfois difficile de comprendre pourquoi le bout de code trouvé sur le net et qui paraît-il fait le boulot ne fait...rien du tout chez moi.

Il te faut apprendre à utiliser la console, F12, pour voir l'origine et le poids des sélecteurs, c'est devenu un outils incontournable surtout avec BootStrap.

Bref. Quand on débute et qu'en plus on apprend seule ou presque (avec des formations en ligne), ce genre de mésaventures, ça arrive.

Rassure toi, ou pas, mais bien d'autres t'arriveront, l'essentiel est de comprendre pour savoir comment résoudre ces problèmes.

Bonne continuation !

**RowanMayfair** · 27/05/2020, 09h38

Merci

Barre de navigation fixée masque les ancres

HTML

Vue hybride

Discussions similaires

Partager

Partager