Bonjour,

Je pense que mon problème est précis et clair et je ne pense donc pas avoir besoin de vous fournir mon code (mais si vous en avez besoin n'hésitez pas à demander).

Sur mon site, il y a une entête de 175px (entête avec logo et navigation). Le site est en une page et les boutons de navigation descendent donc sur des ancres. Le problème est que l'entête étant fixe et de 175px. On loupe à chaque fois 175px quand on clique pour arriver sur une ancre.

Il y a t'il une solution à cela ? j'ai pensé à mettre des padding de 175px mais je ne vais quand même pas faire des grands trous dans le site à chaque ancre ...

Sinon j'ai aussi pensé à "simuler" avec une ancre plus haut, mais trop de bricolage...

Voilà j'espère que vous aurez compris mon problème, je reste dispo.

Merci d'avance.

Ton problème en lui-même est clair, mais sans informations sur ce que tu as fait, ou une description plus précise du problème ("des ancres", tu entends quoi par là ?), on ne pourra pas grand chose..

Déjà, si tu pouvais nous donner du code correspondant, voire un ou plusieurs screenshots détaillant ton problème, ça pourrait nous avancer.

Bonjour et merci pour la réponse.

<header>
   <nav>
      <ul>
         <li><a href=".accueil"> Accueil </li> 
         <li><a href=".contact"> Contact </li>
   </nav>
</header>

<div class="accueil">
<p> Bonjour ................. </p>
</div>

<div class="contact">
<p> Pour nous contacter......</p>
</div>

header{
  background-color: white;
  width: 175px;
  position: fixed;
}

Voilà en gros l'idée ... Du coup en fait ce que j'entends par ancre c'est quand on clique sur l'onglet "accueil", on est dirigé sur la partie "accueil". Sauf que la partie "accueil" va se mettre tout au dessus par rapport à l'écran, or au dessus il y a l'entête ... (donc on a une partie de +- 175px masquée)

Merci.

-
Edité par BBouly 14 juillet 2016 à 18:48:34

Coucou,

Problème connu avec la position fixed. Ton header ne bouge pas mais le point absolu 0.0 (left-top) de ton body est toujours à sa place sous ton menu.

Une solution est de mettre le reste de ton contenu dans un conteneur (une simple div) qui est lui bien à 175px du menu. Le contenu du site sera donc toujours visible car suite au menu <header>

-
Edité par pipelette13 14 juillet 2016 à 19:13:52

Je ne comprends pas...

Ça veut dire que je devrais "tricher" en mettant des blancs de 175px à chaque ancre ?

Pcq sinon je ne vois pas comment ça fonctionnerait.

Non vu que tu as décidé de mettre ton header en fixed il faut mettre une limite au reste de ta page. De toute façon tes 175px sont cachés donc ou ou est le souci. Si tu mets un conteneur global ensuite tu n'auras pas (normalement) à modifier tes ancres...

Bonjour,

il existe une bonne astuce pour ça : https://medium.com/@adactio/sticky-headers-fe9537519c83#.szft2pcam (lire le reste de l'article aussi, il est bien)

ah oui je vois, je vais tester ça. Merci.

edit:

Merci, ça fonctionne !

J'avais compris l'idée de pipelette13 mais ça ne fonctionnait que pour le l'élément se trouvant directement sous l'entête, dès que je cliquais sur les onglets c'était le même problème.

Par contre j'ai fait comme lamecarlate m'a conseillé et ça fonctionne ! C'est un peu plus fastidieux mais ça fonctionne.

Pour résumer pour les prochains qui passeraient:

<header>
   <nav>
      <ul>
         <li><a href=".accueil"> Accueil </li>
         <li><a href=".contact"> Contact </li>
      </ul>
   </nav>
</header>
 
<div class="accueil">
<p> Bonjour ................. </p>
</div>
 
<div class="contact">
<p> Pour nous contacter......</p>
</div>

header{
  background-color: white;
  width: 175px;
  position: fixed;
}
.accueil:before {
    display: block;
    content: "";
    height: 175px;
    margin: -175px 0 0;
}
.contact:before {
    display: block;
    content: "";
    height: 175px;
    margin: -175px 0 0;
}

Merci beaucoup. Bonne soirée !

-
Edité par BBouly 14 juillet 2016 à 19:36:00

Bonjour,

Pour ton ancre, les liens se font avec des #, pas des points.

Et pour ton paragraphe, ce n'est pas une classe qu'il faut utiliser mais un ID.

Et tu as oublié de refermer tes balises <a>.

Bonjour,

Il me semble qu'on peut bien utiliser des . et non des # en fonction de si on veut diriger vers une classe ou un ID, mais je ne suis pas sûr.

Par contre même si on perd en sémantique en utilisant des class au lieu des ID, je préfère utiliser des class partout (c'est certainement une mauvaise habitude, mais bon...).

La différence est qu'un ID est unique par page, alors qu'une classe peut être attribuée à plusieurs éléments donc difficile de cibler l'un d'antres eux ( ou alors avec JS)

Utilises des ID pour tes ancres et les classes pour le CSS.

BBouly a écrit:

Bonjour,

Il me semble qu'on peut bien utiliser des . et non des # en fonction de si on veut diriger vers une classe ou un ID, mais je ne suis pas sûr.

Par contre même si on perd en sémantique en utilisant des class au lieu des ID, je préfère utiliser des class partout (c'est certainement une mauvaise habitude, mais bon...).

Essaie  Exemple jsfiddle.

Oui, je comprends la problématique. C'est vrai que j'ai pris l'habitude d'utiliser des classes au lieu des ID et que donc ça peut poser un problème dans le cas des ancres.

En tout cas si on n'utilise qu'une seule fois la classe, ça fonctionne (chez moi en tt cas mais c'est vrai que jsfiddle n'a pas l'air d'apprécier...).

Je vais donc changer ça.

-
Edité par BBouly 14 juillet 2016 à 21:15:06

Préfère utiliser les ID pour quelque chose d'unique (comme une ancre). Même si ça à l'air de marcher pour toi, pense que pour d'autres ça peut bloquer.

Et puis même pour ta compréhension, je trouve que c'est logique : une ancre est unique, mais l'appelant peut être multiple (rien ne t'empêche d'avoir un href vers l'ancre au début dans ton header et à la fin, ça se fait souvent sur les site pour éviter d'avoir à scroller tout en haut de page pour retourner à l'acceuil).

C'est vrai que j'ai pris l'habitude d'utiliser des classes au lieu des ID et que donc ça peut poser un problème dans le cas des ancres

Ce n'est pas "soit l'un soit l'autre" : garde tes classes pour le CSS, et ajoute une id pour les ancres (ça c'est obligatoire, tu ne peux pas faire d'ancre sans id).

-
Edité par Lamecarlate 14 juillet 2016 à 21:30:45