Html Garder Un Titre Fixe En Haut De La Page

Salut ! Assieds-toi, prends un café. On va parler d'un truc sympa aujourd'hui : comment garder un titre toujours visible en haut d'une page web. Tu sais, comme les menus de navigation sur certains sites ? C'est super pratique, non ? Plus besoin de scroller tout en haut pour s'y retrouver !

Alors, comment on fait ça en HTML ? C'est plus simple qu'il n'y paraît. La magie se cache dans une propriété CSS : position: fixed;. Tu connais ? Si non, pas de panique, on décortique ça ensemble.

L'ingrédient principal : position: fixed;

Imagine que tu as ton titre, disons, un joli <h1> bien stylé. Pour le fixer en haut, on va lui appliquer une classe CSS, par exemple "titre-fixe".

Dans ton fichier CSS, tu auras quelque chose comme ça :

.titre-fixe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white; /* Ou une autre couleur sympa ! /
  z-index: 100; / Pour être sûr qu'il soit au-dessus des autres éléments /
}

Voyons ça de plus près :

• position: fixed; : C'est la clé ! Ça dit au navigateur : "Hé, ce truc, il reste là, collé à l'écran, quoi qu'il arrive."
• top: 0; : On le colle en haut de la fenêtre. Simple, non ?
• left: 0; : On le colle à gauche aussi, pour qu'il prenne toute la largeur.
• width: 100%; : Il prend toute la largeur de l'écran.
• background-color: white; : Pour qu'on puisse le voir clairement, surtout si le reste de la page est sombre. Tu peux choisir la couleur que tu veux, bien sûr !
• z-index: 100; : Ça, c'est pour s'assurer que le titre reste au-dessus du reste du contenu de ta page. Si ton titre se retrouve caché derrière d'autres éléments, c'est probablement à cause du z-index. Augmente-le !

Attention à la petite chose à laquelle on ne pense pas toujours...

Ah, oui ! Un petit détail important. Quand tu fixes un élément, il sort du flux normal de la page. Du coup, le contenu qui suit ton titre risque de se retrouver caché derrière. Catastrophe !

La solution ? Ajouter une marge supérieure (margin-top) au premier élément qui suit ton titre fixe. Cette marge doit être au moins égale à la hauteur de ton titre fixe. Facile, non ?

Par exemple, si ton titre fait 60px de haut, tu ajouteras :

body {
  margin-top: 60px;
}

Ou, si tu as un conteneur principal :

.conteneur-principal {
  margin-top: 60px;
}

Adapte ça à ta structure HTML, bien sûr.

Un petit exemple concret

Voici un petit bout de code HTML pour te donner une idée :

<header class="titre-fixe">
  <h1>Mon Super Titre Fixe</h1>
</header>

<div class="conteneur-principal">
  <!-- Le reste de ton contenu -->
</div>

Et le CSS qui va avec :

.titre-fixe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  z-index: 100;
}

.conteneur-principal {
  margin-top: 80px; / Adapter selon la hauteur de ton titre */
}

Alors, tu vois, ce n'est pas si compliqué ! Avec quelques lignes de CSS, tu peux rendre la navigation de ton site beaucoup plus agréable. Et ça, c'est bon pour tes visiteurs, et donc bon pour toi !

Maintenant, à toi de jouer ! Amuse-toi à personnaliser le style de ton titre fixe. Change la couleur, la police, ajoute des ombres... Laisse libre cours à ta créativité !

Et surtout, n'oublie pas : le web, c'est un terrain de jeu. Alors, explore, expérimente, et surtout, amuse-toi ! À la prochaine, et bon codage !