Soucis d'ancre

[elfaus]

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

[Ernestine]

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.

[elfaus]

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.

[yep]

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é.

[elfaus]

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 ?

[SStephane]

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>

[elfaus]

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é 18 Août 2012 par elfaus

[SStephane]

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

[elfaus]

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)

[SStephane]

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

[SStephane]

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

newhtml.html

[elfaus]

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é 18 Août 2012 par elfaus

[SStephane]

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