À la dernière leçon, j’avais promis d’approfondir la typographie Web, mais on m’a demandé entre-temps d’expliquer quelques notions de base de la mise en page (celle-ci est pour toi, Ryuki). Soyez assurés que nous reviendrons en temps et lieu à une typographie plus avancée.
La mise en page en colonnes : le pain et le beurre des CSS
Autrefois, les sites Web utilisaient souvent des tableaux pour disposer des blocs de texte et d’images; cela a mené à la pratique courante du découpage d’images, avec des tableaux pour faire tenir ensemble ces agencements complexes.
En conception Web avec les CSS, cette technique de mise en page est mal vue, principalement parce qu’elle ne constitue pas une utilisation sémantique du balisage. Les tableaux ont une fonction précise : afficher des données tabulaires, comme des statistiques, où le contenu des cellules a des relations définies.
Avec une poignée de règles CSS essentielles, vous pouvez obtenir des mises en page sophistiquées sans utiliser de tableaux, tout en conservant un balisage sémantique.
Retour aux bases
Avant d’aborder cette leçon, vous voudrez peut-être revoir les bases du XHTML. Voici une excellente introduction d’Accessify.com à consulter. Même les vétérans du HTML y apprendront quelque chose.
Vous pouvez aussi consulter les épisodes précédents de cette série (2, 3, 4) pour quelques notions d’introduction aux CSS que nous utiliserons.
Deux colonnes, plusieurs façons
Veuillez consulter les documents d’exemple de balisage et de feuille de style pour des explications plus détaillées de ce qui suit.
Les CSS se prêtent bien aux mises en page à plusieurs colonnes, comme celle utilisée pour The Standard. Dans ce design et d’autres semblables, les éléments graphiques se répètent verticalement en mosaïque, ce qui donne un résultat homogène pouvant s’étendre à l’infini.
Commençons par regarder la page d’exemple de la dernière leçon. Le balisage et le résultat final suivent le même ordre linéaire, s’affichant de haut en bas.
Nous avons utilisé ici des div pour styliser des blocs de texte, mais les divisions peuvent aussi servir à agir sur la mise en page.
Deux colonnes – méthode 1 : le float
Quatre régions du balisage sont séparées en autant de divisions : #header, #sidebar, #content et #footer. Vous pouvez nommer ces div comme bon vous semble, mais je leur ai donné ici des noms descriptifs.
Dans la feuille de style liée, ces div reçoivent des règles de mise en page. Les règles les plus importantes ici sont :
#sidebar { float: left; width: 150px; }
et
#content { margin-left: 180px; }
La valeur de width est arbitraire, mais la valeur margin-left qui suit doit tenir compte de la largeur et de tout padding utilisé. Si vous voulez une mise en page plus fluide, remplacez ces valeurs fixes par des pourcentages.
Essayez de retirer la règle float et voyez ce qui se passe. Remarquez que la div #content se place sous le bas de la div #sidebar. Si vous gardez le float mais retirez le margin-left de #content, cette dernière s’affiche derrière la première.
Essentiellement, la propriété float retire l’élément concerné de l’ordre d’affichage. Cela ne s’applique qu’aux éléments qui suivent un élément flottant. Remarquez que #sidebar ne flotte pas au-dessus de la div #header qui la précède.
Les éléments de niveau bloc qui suivent des éléments flottants les ignorent (les éléments de niveau bloc, comme les titres, s’affichent avec un espace au-dessus et au-dessous).
Les éléments en ligne qui suivent des éléments flottants les contournent (les éléments en ligne s’affichent les uns à côté des autres sur une ligne). La div intitulée #boxout en est un exemple.
Essayez de créer une barre latérale alignée à droite. Il suffit de modifier les valeurs de float et de marge indiquées ci-dessus.
La prise en charge du float est encore un peu inégale d’un navigateur à l’autre, alors prenez mes descriptions avec un grain de sel. PiE décrit les erreurs de float courantes que vous pourriez rencontrer, et comment y remédier.
Restez à l’écoute…
La prochaine fois, nous verrons une autre façon de créer une mise en page à deux colonnes. Et si vous vous posiez la question, nous verrons comment faire descendre la barre latérale jusqu’au bas de la mise en page.