Exemple de position

Ces trucs à propos de position vont peut-être avoir plus de sens dans un exemple pratique. Ci-dessous se trouve une mise en page réaliste.

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}
<div class="container">
<section>

La propriété margin-left pour les sections assure qu'il y a de la place pour la nav.

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>
<section>

Remarquez ce qu'il se passe lorsque vous redimensionnez votre navigateur. Ça marche plutôt bien !

</section>
<footer>

Si vous utilisez un header et un footer positionné en fixed, faites en sorte qu'il y ait de la place pour eux ! J'ajoute un margin-bottom sur le body.

</footer>

Cet exemple marche parce que l'élément conteneur est plus grand que la nav. Ci ce n'était pas le cas, la nav déborderait de son conteneur. Dans les pages suivantes nous discuterons d'autres techniques de mise en page qui ont différents avantages et inconvénients.

  • Creative Commons License