Le positionnement flottant
La technique présentée ici l'est à titre d'information. Elle est utilisée par la majorité des sites à l'heure actuelle mais comporte un certain nombre de défauts. Une meilleure technique, le positionnement inline-block, sera présentée un peu plus loin : je vous encourage à l'utiliser autant que possible.
Vous vous souvenez de la propriété float ? Nous l'avons utilisée pour faire flotter une image autour du texte (figure suivante).
L'image flotte autour du texte grâce à la propriété float
Il se trouve que cette propriété est aujourd'hui utilisée par la majorité des sites web pour… faire la mise en page ! En effet, si on veut placer son menu à gauche et le contenu de sa page à droite, c'est a priori un bon moyen. Je dis bien a priori car, à la base, cette propriété n'a pas été conçue pour faire la mise en page et nous allons voir qu'elle a quelques petits défauts.
Reprenons le code HTML structuré que nous avons réalisé il y a quelques chapitres :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Zozor - Le Site Web</title> </head>
<body> <header> <h1>Zozor</h1> <h2>Carnets de voyage</h2> </header>
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Blog</a></li> <li><a href="#">CV</a></li> </ul> </nav>
<section> <aside> <h1>À propos de l'auteur</h1> <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p> </aside> <article> <h1>Je suis un grand voyageur</h1> <p>Bla bla bla bla (texte de l'article)</p> </article> </section>
<footer> <p>Copyright Zozor - Tous droits réservés
<a href="#">Me contacter !</a></p> </footer>
</body> </html> |
Je rappelle que, sans CSS, la mise en page ressemble à la figure suivante.
Une page HTML sans CSS
Nous allons essayer de placer le menu à gauche et le reste du texte à droite. Pour cela, nous allons faire flotter le menu à gauche et laisser le reste du texte se placer à sa droite.
Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi rajouter une bordure noire autour du menu et une bordure bleue autour du corps (à la balise <section>) pour bien les distinguer :
nav { float: left; width: 150px; border: 1px solid black; }
section { border: 1px solid blue; } |
Voici le résultat à la figure suivante. Ce n'est pas encore tout à fait cela.
Le menu est bien positionné mais collé au texte
Il y a deux défauts (mis à part le fait que c'est encore bien moche) :
On veut bien que le pied de page (« Copyright Zozor ») soit placé en bas sous le menu mais, par contre, on aimerait que tout le corps de page soit constitué d'un seul bloc placé à droite.
Pour résoudre ces deux problèmes d'un seul coup, il faut ajouter une marge extérieure à gauche de notre <section>, marge qui doit être par ailleurs supérieure à la largeur du menu. Si notre menu fait 150 px, nous allons par exemple donner une marge extérieure gauche de 170 px à notre section de page (figure suivante), ici à la ligne 10.
nav { float: left; width: 150px; border: 1px solid black; }
section { margin-left: 170px; border: 1px solid blue; } |
Le corps de page est bien aligné à droite du menu
Voilà, le contenu de la page est maintenant correctement aligné.
À l'inverse, vous pouvez aussi préférer qu'un élément se place obligatoirement sous le menu. Dans ce cas, il faudra utiliser… clear: both;, que nous avions déjà découvert, qui oblige la suite du texte à se positionner sous l'élément flottant.
Créé avec HelpNDoc Personal Edition: Créer des aides HTML, DOC, PDF et des manuels depuis une même source