[Résolu] Problème d'ancre

Bonjour,

Je rencontre un problème avec des ancres, je suis entrain de faire une onepage avec un menu dont les liens vont vers un id, sauf qu'il s’arrête après l'article et non vers l'id de ma div au titre de l'article.

Voici comment écrit mon code
Menu

<nav id="menu">
			<ul>
            	<li><a href="#haut">Article</a></li>
            </ul>        
        </nav>

Ancre de l'article

<div id="haut" class="separator"></div>
    <article>
        	<h1>Mon titre</h1>
        	<p>Mon article</p>
      </article>

Je ne comprends pas pourquoi il dépasse mon article.

Merci par avance de votre aide.
Modifié par byters (27 Nov 2015 - 19:01)

Bonsoir,

Il n'y a pas un problème de positionnement du .separator par hazard ? Cela expliquerait le dépassement de l'article ciblé.

Mais de toute façon, perso, j'aurais mis l'ID sur l'article, directement :

<div class="separator"></div>
    <article id="haut">
        	<h1>Mon titre</h1>
        	<p>Mon article</p>
      </article>

Modifié par Olivier C (28 Nov 2015 - 15:59)

Bonjour Olivier C,

Merci pour ta réponse c'est l'une des choses que je n'avais pas faite. Mais voilà ça ne fonctionne pas mieux.

Ha ! C'est idiot et je ne l'avais pas vu : il manquait un dièse ! (EDIT : non en fait)
Modifié par Olivier C (28 Nov 2015 - 15:59)

Je viens de voir ton code tu mets bien sans le # mais tu rajoute un lien. Si je regarde ce tuto qui ce trouve sur alsacréations il n'y en a pas je te laisse le lien.
http://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html

Ton site est en ligne ?
Si oui donnes le lien et indiques nous l'ancre.

Bonjour tatianapetit,

Je l'ai mis en ligne pour que vous puissiez voir ce qui ce passe. Car j'ai fait un test d'une simple page avec des liens dessus et des paragraphes Ipsum et ça fonctionne je dois avoir autre chose qui perturbe mes ancres.

Voici l'adresse http://forezgaz.fr/

Merci.

byters a écrit :
Voici l'adresse http://forezgaz.fr/

Tiens ! un forezien comme moi (du moins il y a quelques années...)

byters a écrit :
Il me semble qu'il n'en faut pas un # dans l'id, mais uniquement dans le lien. Mais dans le doute j'ai testé ca ne fonctionne pas du tout

Exact, j'avais oublié que l'on pouvait s'en passer sur la cible.

Reste donc la piste d'un mauvais positionnement de la cible... Et du coup le problème vient effectivement de là : la cible remonte en haut de la page, comme prévue... mais elle se trouve masqué par le sticky menu, qui de par nature est positionné en fixed.

Il faut donc que l'élément cible arrive sous le menu, en compensant la hauteur de ce menu avec une bidouille du genre :

{
    margin-top: -92px; // environ la hauteur du menu en fixed
    padding-top: 92px; // pour compenser visuellement la règle précédente
}

Chez moi c'est ok.

PS : attention aux h1, il ne devrait y en avoir qu'un seul par page en pratique, même si en théorie il est possible d'en mettre plusieurs en html5 (un par section/article), tout cela pour une question de référencement de la page.
Modifié par Olivier C (29 Nov 2015 - 07:28)

Merci à toi Olivier C, problème résolu !

Bonjour Byters,
Pour ton ancre, comment as-tu fait cette effet de "glissement" vers l'info?
j'ai fait la même chose que toi mais quand je clique, ça amène d'un coup, je voudrais que ça glisse vers le id correspondant comme sur ton site: http://forezgaz.fr/

exemple:
cette lien:
<ul id="menu_horizontal" style= "list-style-type:none">
<li><a href="#slide3">PRESENTATION</a></li>
</ul>

mène vers cette id:
<div id="slide3">
</div>

et c'est tout ce qui me permet de faire l'ancre, est-ce qu'il faut ajouter un truc?
est-ce qu'il faut que j'ajoute plus d'informations? Mon site n'est pas en ligne encore malheureusement



Merci d'avance