Discussion :

[JefReb]

Bonjour,

Je rencontre un problème avec les points d'encrage.

Par exemple :

Code html :

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

<a name="syn1"></a><h2>Définition d'un style</h2>

J'ai modifié mes pages de façon à ce qu'il y ait un bandeau fixe en haut de page avec le menu. Lorsque le contenu est plus grand que la fenêtre, elle passe donc derrière le bandeau qui est de 200px de haut.

J'ai donc une table des matières qui me permet d'aller directement à un point d'encrage :

Code html :

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

1
2
3
4
5
<ul>
    <li><a href="#syn1">Définition d'un style</a></li>
    <li><a href="#syn2">Les sélecteurs de balise</a></li>
    etc.
</ul>

Le problème est que le point d'encrage se positionne tout en haut de la fenêtre et donc derrière le bandeau. Donc invisible.

Je n'avais pas ce problème évidemment lorsque mon bandeau n'était pas fixe.

Question :
Y a-t-il un moyen de positionner le point d'encrage de façon à ce qu'il apparaisse à disons 200px du haut de la fenêtre, c'est à dire après le bandeau ?

Merci à tous.

[rodolphebrd]

Bonjour,

je n'ai pas bien compris votre problème. Au début je pensais plutôt à un problème de Typo (encrage)

Peut-être qu'avec plus de code, des images avec le problème en question et l'effet souhaité ou une page en ligne on pourrait y voir plus clair...

[pipala]

Hello,

Tu peux utiliser du css et mettre un

Code :

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

margin-bottom: 200px;

sur l'élément qui porte l'ancre.

Ainsi, ton h2 se situera à 200px sous l'élément qui porte l'ancre et sera visible sous ton menu.

[JefReb]

Merci pour vos réponses.
Je pense que la solution est plutôt du coté CSS et je vais tester la réponse de Pipala.

Difficile de mettre une page en ligne car je suis en plein reconstruction de mon site avec le bandeau fixe.
Je vais expliquer en images. Mais je pense qu'il y a une solution CSS. Sinon tant pis, je n'aurai plus de table des matières.

Exemple1 est la page qui s'ouvre: image1

Si je veux aller directement à Les sélecteurs de balise
je désire obtenir ceci: image2

Mais en fait j'obtiens: image3

Car Les sélecteurs de balise se retrouve derrière le bandeau

Merci à tous

[rodolphebrd]

Une page en ligne ou le code css et html, c'est mieux.

Et puis des images en pièces jointes car elles sont trop volumineuses

[pipala]

Et pour que le margin ne se fasse qu'au moment ou tu cliques sur le lien t'emmenant à l'ancre, il faut que tu utilises la propriétés css3 :target

Si tu pouvais joindre ton fichier html, il serait plus facile de t'aider

[JefReb]

Bon je vais essayer de faire un fichier simple, car pour le moment, il faut que je joigne les css externes, les fichiers php include (menu horizontal, verticale, bandeau, pied de page etc...), les images et cela fait une gros "paquet".
Je vais prendre du temps pour simplifier à l'extrême et donner un fichier exemple.
A bientôt dès que j'ai fait la maquette.
Merci encore

[JefReb]

Je viens de faire un fichier minimaliste en taillant à la serpe dans mon code et CSS. Cela donne bien une idée du problème.
Je répète qu'il n'y a aucun problème évidemment quand le bandeau n'est pas fixe et qu'il est lié à la page.

Dans le sample, le contenu passe derrière le bandeau, pas de problème. Mais si on clique sur un lien de la table des matière, le point d'encrage est caché tout en haut sous le bandeau.
En attendant une idée de votre part, je suis en train d'explorer css3:target et le margin-bottom. Mais je préfèrerais une solution qui n'est pas QUE css3.

Merci d'avance pour le temps passé sur cette demande d'aide.

[rodolphebrd]

La difficulté est que dans la mesure où votre header est en position fixe, votre contenu "glissera" dessous et son "top" prendra toujours appui sur le bord supérieur de la fenêtre du navigateur. Point de salut avec des padding, margin, ou créations d'éléments poussant votre contenu vers le bas.

En pur Css la solution que je vous propose est celle-ci.
Vous définissez un élément vide auquel vous attribuez l'identifiant de menu exemple pour l'item3: <i id="syn3"></i>Puis vous le placez à un endroit du texte (balise p) qui correspond à 200px de haut comme cela: codepen

[pipala]

Oui mais cela signifie qu'il doit placer un peu à l'aveugle des éléments en espérant que ce soit à 200px au dessus de son ancre.

Tu as une autre alternative sinon c'est d'utiliser du Javascript.

Au clic sur le lien, tu vas détecter la position de ton ancre dans la page et tu pourras faire défiler la fenêtre jusqu'à la position en enlevant 200px.

[pipala]

Je te joins un exemple:

http://jsfiddle.net/fGrE7/2/

[JefReb]

Merci à tous les deux.
Je suis très étonné des rapides réponses reçues. Et je me sens moins réactif.
Je n'ai pas trop compris la réponse de Rodolphebrd, mais je vais creuser.
Par contre la réponse et l'exemple de Pipala me plait beaucoup.
Evidemment, il y a toujours le risque que les personnes désactives le javascript, mais bon, cela permet de sortir parfois plus facilement de ce genre de difficulté.
Je vais y travailler.
J'attends un peu avant de clore ce topic que je puisse maitriser la solution.
Encore merci
Jef

[rodolphebrd]

Je restais sur une solution en css pur pour montrer que c'est réalisable mais effectivement aléatoire...
Bien vu @pipala
en n'oubliant pas que c'est du Jquery et qu'il ne faudra pas oublier de charger la bibliothèque.

@JefReb : il vous suffit juste de regarder l'exemple en ligne que je vous ai transmis, pour comprendre

[JefReb]

Désolé, mais je n'arrive pas à faire comme Pipala. Il est vrai que je ne connais pas le script (je vais m'y mettre).
Mais j'utilise les jQuery avec les lightbox sans problème.

J'ai téléchargé la dernière version Jquery 1.10 mais cela ne change rien.
Puis-je vous soumettre le sample que j'ai modifié pour voir où se trouve mon erreur?
D'avance merci

[rodolphebrd]

Passez par Codepen, c'est gratuit et plus simple pour ceux qui vous aident.

[pipala]

Hello,

Modifie la ligne:

Code javascript :

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

var hrefValue = $(this).attr("href");

en mettant:

Code javascript :

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

var hrefValue = $(this).attr("href").replace('#','');

[JefReb]

Désolé Pipala, mais je viens de remplacer par ton code et cela ne change rien.
Je joins le nouveau sample.

Pour Rodolphebrd, je ne voulais pas le vexer. C'est une solution que j'aurais aimé, car elle est pure CSS. Mais aussi CSS3 avec :target.
Quand est-il avec les versions antérieures?
De plus, elle est beaucoup plus contraignante à régler et à coder je pense.
Mais je te remercie d'avoir contribué et je garde dans un coin cette solution.

Pour le script je suis frustré de ne pas y arriver.
Si Pipala pouvait m'envoyer mon sample corrigé, je pourrai comprendre si c'est le code ou bien le jQuery qui est en cause.

Merci d'avance
Jef

[pipala]

En testant sur jsfiddle, ton code marche bien (à part que tu aies écrit 2 fois Article 5, et que tu aies choisi de mettre -210 à la place de -200).

Peut-être que chez toi il n'arrive pas à trouver le fichier jquery? Es-tu sûr du chemin?

[CCyrillus]

Bonsoir,

Pour ne pas dependre de javascript pour repositionner le contenu, le positionement relatif (sur body) ou sur la portion article fonctionne bien aussi:
http://jsfiddle.net/fGrE7/3/
Modifications: valeur de scrollTop non modifié dans le jascript.
Contenu repositionné en relatif a top:200px;

Voilou
Cdt,
GC

[JefReb]

Bonjour,
Effectivement j'ai testé mon code dans jsFiddle et cela fonctionne.
http://jsfiddle.net/JefReb/WG4hy/1/

Je ne comprends pas ce qui se passe sur mon PC, car je code tous mes sites avec Dreamweaver et WampServer. J'utilise beaucoup les lightbox, sexylightbox, visualbox et tous utilise le jQuery.
Donc je vais chercher.
Merci de votre aide. Je cloturerai ce topic quand je serai sûr.