Barre de navigation fixée masque les ancres

Version imprimable

2 pièce(s) jointe(s)

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:

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:

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
Pièce jointe 564383

Or, je voudrai obtenir ceci :
Pièce jointe 564384

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 :D

Je vois bien que mon sujet vous a inspiré :mouarf:

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:

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:

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à :D

26/05/2020, 19h14
NoSmoking
Bonjour,

Citation:

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.

Citation:

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:

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
27/05/2020, 08h42
RowanMayfair

Citation:

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 :mouarf:

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.
27/05/2020, 09h22
NoSmoking

Citation:

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 !

Citation:

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.

Citation:

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 !
27/05/2020, 09h38
RowanMayfair

Merci :D