1. Accueil
  2. librairie de codes
  3. css
  4. creer un ancre avec un header fixe

Créer un ancre avec un header fixe

Découvrez l'exemple
<header>
  <nav>
    <ul>
      <li><a href="#ancre1">Ancre 1</a></li>
      <li><a href="#ancre2">Ancre 2</a></li>
      <li><a href="#ancre3">Ancre 3</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <h2> <a name="ancre1">Ancre 1</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p> 
    <h2> <a name="ancre2">Ancre 2</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p>     
    <h2> <a name="ancre3">Ancre 3</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p> 
  </article>
</section>
header{
  position:fixed; 
  top:0;
  height:150px;
  background:#CCCCCC; 
  width:100%; 
  margin:0
}
 
section{
  margin-top:150px;
  width:100%;
}
 
section h2 a{
  margin-top:-150px;
  padding-top:150px;
}