CSS et mise en page - 1 Entrée en matière

24.09.2007

Voilà bien LE papier emm… à écrire, parce qu'il n'y a aucune invention. Mais …

De quoi on va causer ?

Mais, lorsqu'on a soigné le choix des polices de caractères, des motifs décoratifs, des couleurs, des marges, etc. on peut vouloir ajuster finement la disposition de ses pages de blogs. La plate-forme OverBlog, si elle permet vraiment beaucoup de choses, ne peut pas tout prévoir et il faut bien alors s'instruire sérieusement sur HTML et CSS : pas tant l'art et la manière d'en écrire que les principes qui sont derrière.

Au fait, ajuster finement la disposition ça veut dire quoi ?

Des choses spectaculaires comme l'ajout d'un menu déroulant – grand classique de l'arrachage de cheveux pour lequel vous trouverez de nombreuses solutions dont aucune n'est idéale (la mienne encore moins que d'autres).
Des choses discrètes comme faire en sorte que les articles soient toujours à la même hauteur dans l'écran, qu'il y ait ou non une pagination (c'était le cas ici jusqu'à peu de temps).
Des choses un peu moins discrètes comme de faire apparaître un logo sur le côté gauche de toutes les pages, en dehors des colonnes de modules.
(liste non exhaustive)

Toutes ces questions de géométrie d'une page demandent de bien comprendre le jeu des margin et padding (ça, on connaît – ah ouais ?), mais aussi des float (légère pâleur), des position : relative ou position : absolute (pâleur intense), voire de overflow ou z-index (syncope).

Comment on va s'y prendre ?

Ceci n'est pas un recueil de recettes ou d'astuces. Bien qu'il y soit souvent question d'OverBlog (la plateforme où réside le blog que vous êtes en train de lire), bien que les exemples y fassent souvent référence, la matière de ces articles n'est pas spécifique à OverBlog, n'est même pas propre aux blogs. Il ne s'agit que d'expliquer (d'essayer, au moins) certaines questions générales de disposition d'une page HTML sur un écran.

L'itinéraire

Vous allez en prendre pour neuf (vi, vi : neuf) articles :

Entrée en matière
Vous y êtes. De quoi il sera question, quelques idées, un peu de vocabulaire utile pour la suite.
Les boîtes
Du groupe de mots jusqu'à la mosaïque d'images, tout ce qu'il y a dans une page s'organise en pavés rectangulaires : les boîtes . Revue de la question.
Inline et block
Distinction apparemment ésotérique mais fondamentale (émf) pour la suite
Flux, float, position
Explication de la notion de flux, elle aussi émf, premier aperçu des propriétés float et position.
Flottants : la théorie
La prise de tête commence…
Flottants : la pratique
Quelques exemples et contre-exemples, espérés utiles.
Dimensions et débordement
Width, height et overflow. Le bloc conteneur, encore une notion émf.
Le positionnement absolu
Moins compliqué qu'on ne croirait.
Empilement vertical
z-index

Chaque article ou presque comporte au moins une démonstration animée (JavaScript activé dans votre navigateur, please) pour illustrer le propos parfois ardu. Prenez le temps de jouer avec ces démos, elles ont leur importance : cinq minutes de pratique clarifient bien des discours.

Malgré le ton détendu et les jeux de mots déplorables, je me suis efforcé de ne pas écrire n'importe quoi ni n'importe comment. L'idée de ces articles est née de conversations avec des bloggeurs dans la panade, à la recherche de l'astuce miraculeuse qui ferait marcher une recette soufflée par d'autres. En renonçant à la magie noire, en comprenant (ce qui demande un effort) ce que faisait la recette miraculeuse, autrement dit ce que font HTML et CSS, la solution venait d'elle-même. Puissent ces articles vous en apporter autant.

Les textes sacrés

Bon, vous allez voir qu'on peut survivre … Aucune invention , avais-je annoncé : ces articles ne sont qu'une paraphrase de certains chapitres de la spécification CSS2 du W3C, seulement réordonnée à mon idée et enrichie d'exemples OverBlog et de démonstrations.

Vous avez dit spécification ? Une spécification est un document destiné aux développeurs de logiciel. Ce n'est, au départ, ni un tutoriel, ni un manuel de référence, mais ce que devrait savoir faire un navigateur, autrement dit un cahier des charges. Une spécification est donc le plus souvent un document technique, très précis, très complet, très illisible : en comparaison, Kant et Spinoza sont des auteurs frivoles.

Cependant, et faute de véritables documents de référence pour le grand public, les spécifs W3C ont fini par en tenir lieu et ont bénéficié d'un vrai effort de rédaction : ce sont des documents bien construits et accessibles au lecteur attentif et intelligent (vous, par exemple). Essayez, vous serez surpris.

L'auteur est prudent

Dernier point : ce papier et les suivants, comme tous les autres, se contentent d'expliquer ce que j'ai compris, les questions que je me suis posées, celles qu'on m'a parfois posées. Je ne suis agrégé de rien du tout, il peut y avoir des oublis ou des obscurités, voire des erreurs (horreur !) dans ce que j'écris. Je vous serai sincèrement reconnaissant de me les signaler en commentaire.

Allez, on plonge

Une page HTML, c'est joli. Avec un petit effort de CSS, c'est encore plus joli. M'enfin, il faut bien soulever le capot une fois dans sa vie pour y comprendre quelque chose : même le plus inspiré des peintres doit apprendre à tenir correctement un pinceau. Sans être indispensable, ça aide.

HTML : komanséfoutu ?

Donc, quand on regarde une page HTML (le code source d'une page de blog, par exemple) on découvre un apparent fouillis de balises. Très vite (non ?) on comprend que ce fouillis est organisé : les balises définissent des blocs, emboîtés les uns dans les autres. Toute la page rentre dans un très gros bloc html, qui en contient deux autres head et body. Le bloc head est une série d'indications techniques, nous ne regarderons dans la suite que body qui contient ce qui s'affichera à l'écran, le corps du document (body = corps, c'est pensé, non ?).

Un corps de document peut être très simple, sans aucune balise, mais c'est rare. Le plus souvent, il se divise en blocs qui à leur tour se divisent en sous-blocs qui à leur tour … Bref, ce machin est organisé de façon arborescente.

Arborescence : gné ?

Pas de panique, vous en manipulez une tous les jours : votre disque dur, c'est exactement pareil :

tout fichier ( document ou programme) se trouve dans un dossier et un seul,
un dossier peut contenir zéro, un ou plusieurs sous-dossiers mais un dossier donné est inclus dans un seul sur-dossier ,
tous les dossiers, de proche en proche, finissent par être inclus dans un seul et même ancêtre , le répertoire racine (toujours la végétation …) du disque dur, lequel répertoire racine n'est inclus dans aucun autre, d'où son nom,
enfin, les fichiers ne peuvent pas contenir de sous-dossiers : ils sont les terminaisons de l'arbre, ses feuilles , alors que les dossiers en sont les nœuds .

Hé bien une page HTML, c'est un peu pareil. Application au blog que vous lisez : sans descendre dans les détails les plus fins, la page sous vos yeux est organisée ainsi :

 body--+--global--+--ln_0 (bandeau supérieur) I +--ln_1--+--cl_1_0--+-- (les articles) I I +--cl_1_1--+--box categorie I I +--box calendrier I I +--box articlerecent I I +-- (les autres modules) I I--ln_2 (bandeau inférieur) I +--legals

Deux parties dans body : le corps du blog, global , puis le bandeau de mentions légales, legals . À son tour le corps de blog se divise en trois lignes (ln_0, ln_1 et ln_2), la ligne du milieu se subdivisant en deux cellules, l'une pour les articles (cl_1_0) l'autre pour les modules (cl_1_1) – c'est à peu près pareil sur tous les blogs OB.

Les feuilles de l'arbre sont les bouts de texte, plus ou moins longs, qui composent la page. Un simple span n'est pas encore une feuille : c'est le texte du span qui est la feuille.

En plus des notions de nœud et de feuille (ou nœud terminal ), on parle de parent , d' enfant et de frères : global est le parent de ln_0, ln_1 et ln_2 qui sont ses enfants et frères entre eux. On parle aussi d' ascendant (ou ancêtre ) et de descendant : global est un ascendant de ln_1, mais aussi de cl_1_0, cl_1_1, et tous les modules. Retournez la phrase pour savoir ce qu'est un descendant – le cas des cousins à la mode de Bretagne n'est pas couvert.

Arborescence : akwabon ?

Simple et imagé mais, au-delà du plaisir de s'instruire, à quoi ça sert ?

Les relations de parenté au sein de l'arbre déterminent un tas de choses. Il vous semble parfaitement normal qu'une police de caractères attribuée au body soit la même pour tout ce qui s'y trouve (sauf mention explicite du contraire), or il pourrait en aller autrement et que la police de global et toute sa descendance soit celle choisie par défaut par le navigateur. Ce mécanisme de transmission d'information s'appelle, sans surprise, héritage …

Pour les questions de mise en page qui vont nous occuper ici, le parent sert de référence, de port d'attache à l'enfant pour toute sa géométrie. Une observation simple pour le sentir : il vous semble parfaitement normal que, à l'affichage, ln_0, ln_1 et ln_2 soient dans global (sauf manœuvre tordue) et ne se chevauchent pas (sauf autre manœuvre tordue). Pourtant il serait aussi naturel et légitime de les disposer comme sur la figure …

Où l'on voit enfin le CSS

Et le CSS, dans tout ça ?

Le CSS modifie, de façon parfois spectaculaire, la présentation et l'organisation spatiale du document : c'est ainsi que la colonne de modules cl_1_1 se trouve à droite de cl_1_0 (le pavé des articles) alors que, sans CSS, elle se trouverait en-dessous de ce pavé (et au-dessus du bandeau inférieur).

Le CSS modifie la présentation du document mais pas son arborescence, sa structure. Par exemple, déplacer un bloc à l'intérieur d'un autre (faire apparaître un module dans le bandeau supérieur de la page, mettons) est un effet purement visuel, une illusion d'optique qui ne crée aucun lien de parenté entre eux . À preuve : vous ne pourrez pas, sans recourir à une astuce, arranger le texte du bandeau pour qu'il contourne le module. Le bandeau n'est pas sensible à la présence du module parce que ce module est dans la branche d'à côté.

Voilà tout pour aujourd'hui. On commencera à toucher terre dans le prochain article, promis.

Bonnes lectures

Pour mémoire :

le tutoriel du Site du Zéro si vous ne voyez même pas de quoi je veux parler ici (aucune honte à avoir, et c'est un très bon tutoriel),
et la spécification CSS, en français.

Pas compris ? Pas d'accord ? Parlez-en en commentaire.

Les boîtes