Jump to content
Sign in to follow this  
elfaus

Soucis d'ancre

Rate this topic

Recommended Posts

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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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é.

Share this post


Link to post
Share on other 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 ?

Share this post


Link to post
Share on other sites

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


<header>
<nav>
<!-- menu -->
</nav>
</header>
<section>
<article>
<a name="ancre1" style="position:absolute;margin-top:-200px;"></a>
<p>blabla</p>
<a name="ancre2" style="position:absolute;margin-top:-200px;"></a>
<p>blabla</p>
</article>
</section>

  • Upvote 1

Share this post


Link to post
Share on other 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)

Edited by elfaus

Share this post


Link to post
Share on other sites

N'ai-je pas mis de balises <a> à cet effet ?

C'est par ailleurs comme ça qu'on fait les ancres me semble t'il même si ça fonctionne aussi à ta manière ;)

Share this post


Link to post
Share on other sites

si, mais le problème est similaire, la position absolue se fait par rapport au td qui contient le a et à ce moment c'est le a qui se démarque x)

Share this post


Link to post
Share on other sites

Me force pas à ouvrir netbeans pour te montrer que ça fonctionne, tu peux mettre une page en ligne ? :P

Share this post


Link to post
Share on other 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 =)

Edited by elfaus

Share this post


Link to post
Share on other sites

Généralement, les ancres n'ont pas spécialement à avoir de contenu, c'est peut-être old school, je ne sais pas, je ne fais plus d'html depuis un bout de temps : http://webaim.org/techniques/skipnav/

Sinon, content pour toi si ça marche ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...