Aller au contenu

Soucis d'ancre


elfaus

Sujets conseillés

Bonjour,

je rencontre actuellement un soucis avec des ancres sur mon site.

j'ai réalisé un code avec la structure suivante

<header>
<nav>
<!-- menu -->
</nav>
</header>
<section>
<article>
<!-- contenu de la page -->
</article>
</section>

Le problème est le suivant :

Dans un soucis de pratique, le menu est en position fix tout en haut de la page (top: 0)

Si je souhaite utiliser des ancres dans le contenu de ma page avec des liens du style index.php#id, l'ancre se retrouve cachée derrière le menu.

J'ai essayé plusieurs choses, des padding, des margins, sur le menu, sur la section.

J'ai également tenté de créer une div "fantôme" permettant de maintenir un espace permanent entre la section et le menu mais rien n'y fait :(

C'est un bug qui est vraiment gênant puisque l'ancre fait pointée directement sur le contenu à consulter :/

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Je n'ai pas vraiment compris le problème. Déjà qu'on soit bien d'accord : il y a des ancres, et des liens qui pointent vers ces ancres. Quand tu dis que " l'ancre se retrouve cachée derrière le menu", je suppose que tu parles du lien ? Si c'est le cas, alors c'est juste une histoire de superposition de divs, et je ne vois pas en quoi c'est un bug : quand plusieurs divs sont les uns par-dessus les autres, il est logique que seul le div du dessus puisse intercepter les clics.

Lien vers le commentaire
Partager sur d’autres sites

j'ai une page sur mon site qui affiche un tableau avec à chaque ligne un id n et un lien dans une cellule pointant vers n

le soucis est que mon lorsque l'on scroll, on se retrouve avec le menu par dessus le tableau, et si l'on souhaite utilisé un lien pointant vers n, la ligne se retrouve derrière le menu.

Il y a bien la position relative avec le z-index, mais à ce moment le tableau se retrouve par dessus le menu (ou alors derrière et on retourne à la case départ).

Ce n'est pas un bug vis à vis d'un navigateur ou autre, c'est un bug vis à vis de mon site.

Il faudrait que lorsqu'on clic sur un lien menant vers une ancre, l'ancre s'affiche sous le menu et non derrière.

Lien vers le commentaire
Partager sur d’autres sites

Une possibilité pas sensationnel est de placer tes "id" plus haut dans le contenu afin que la hauteur entre l'id et le véritable contenu soit identique à celle du menu.

Une autre piste est d'exploiter JavaScript pour décaler le contenu de la hauteur du menu, une fois l'ancre (le lien) activé.

Lien vers le commentaire
Partager sur d’autres sites

Une possibilité pas sensationnel est de placer tes "id" plus haut dans le contenu afin que la hauteur entre l'id et le véritable contenu soit identique à celle du menu.

Une autre piste est d'exploiter JavaScript pour décaler le contenu de la hauteur du menu, une fois l'ancre (le lien) activé.

déplacer les id n'est malheureusement pas possible, donc la seule possibilité serait visiblement l'utilisation de javascript

problème, je ne voix pas du tout quoi faire, un scrolltop ?

Lien vers le commentaire
Partager sur d’autres sites

Ca devrait fonctionner comme ça, 200 étant la taille de ton menu à modifier :


<header>
<nav>
<!-- menu -->
</nav>
</header>
<section>
<article>
<table>
<tr id="andre1" style="position:absolute;margin-top:40px;">
</tr>
<tr id="andre2" style="position:absolute;margin-top:40px;">
</tr>
<table>
</article>
</section>

le problème c'est qu'il s'agit d'un tableau, si je fais ça je détache ma ligne x)

Modifié par elfaus
Lien vers le commentaire
Partager sur d’autres sites

Je te confirme que ça fonctionne (cf PJ), j'ai pas triché j'ai mis un tableau...

c'est vrai que j'aurais dû commencer par ça, mea culpa
/>http://momcards.no-ip.org/index.php?controller=cards&action=monster#62

J'ai essayé d'adapté ta version à la mienne, et dès que je met du contenu dans la balise a, la balise se détache x)

C'est bon j'y suis parvenu

J'ai utilisé un span avec id à la place d'un a qui lui est vide (name n'est plus pris en compte sous html5 ;)

On est donc avec :

<table>
<tr>
<td>
<span id="n"></span>
<a href="#n">link</a>
</td>
<td>blabla</td>
<td>blabla</td>
<td>blabla</td>
<td>blabla</td>
</tr>
<!-- loop -->
</table>

Sans oublier dans le css

table tr td span {position: absolute; margin-top: -50px;}

Merci pour tout Stephane =)

Modifié par elfaus
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...