TP 07 : Outils classiques de mise en page « locale » — Polices web

1. Ajouter les propriétés margin: 30px;, width: 10em; et height: 20em; à la règle concernant les éléments de type strong.

Vous aviez constaté la semaine dernière que seules les marges horizontales étaient prises en compte sur les éléments de flux (= éléments « inline ») ; vous constatez maintenant que width et height n'ont également pas d'effet sur eux.

1. Ajouter maintenant la propriété display: block; à la règle. Expliquer ce qui se passe.

2. 

   Modifier la propriété en display: inline-block;. Constater qu'avec cette valeur de display, notre élément se comporte à la fois comme un élément de flux (il s'inscrit dans le flux du texte), et comme un bloc (qui respecte la largeur et les marges qu'on lui a données).

3. On constate cependant que l'alignement vertical de l'élément avec le texte est un peu étrange. Quand on insère une image au milieu d'un texte, l'image se retrouve « posée » sur la baseline du texte (la ligne sur laquelle les caractères sont posés). On pourrait s'attendre à ce que ce soit la même chose pour notre élément en inline-block, mais non : c'est la baseline de l'élément qui est alignée avec celle du texte autour, et cette baseline est définie comme celle de sa dernière ligne de texte. (A contrario, une image n'étant pas du texte, sa baseline est définie comme le bord inférieur de sa marge du bas.)

   En tout cas, comme pour les images, on peut modifier l'alignement vertical de notre élément inline-block avec la propriété vertical-align : tester plusieurs valeurs.

4. Ajouter la propriété float: right à la règle sur les éléments de type strong. Que se passe-t-il ? Constater que l'élément a été sorti du flux normal : la phrase qui précède l'élément dans le HTML et celle qui le suit se retrouvent accolées.

   Inspecter l'élément (avec l'inspecteur de Firefox) : vous devriez voir que les propriétés display: inline-block et vertical-align sont grisées, et accompagnées d'une petite icône « i ». Si vous passez la souris sur l'icône, Firefox vous explique, en gros, que ces propriétés n'ont pas d'effet sur un élément flottant (plus précisément : un élément flottant est toujours mis en display: block, or la propriété vertical-align est sans effet sur un élément en display: block).

   Constater également que notre élément dépasse de son paragraphe parent, et déborde dans le paragraphe suivant, dont il repousse également le texte. C'est un comportement logique : lorsque l'on désire avoir un bloc ou une figure « flottante », on veut qu'elle soit indépendante du texte.

5. 

   Il peut cependant parfois être ennuyeux que la mise en page d'un élément soit perturbée par un flottant précédent. On peut empêcher ça avec la propriété clear. Le paragraphe qui suit celui avec l'élément strong possède un identifiant, next-paragraph. Ajouter une règle qui s'applique à cet identifiant et qui contient la propriété clear: right;. Expliquer ce que ça change.

6. On s'intéresse maintenant à l'élément de type h1 (le titre principal de la page). Ajouter la propriété position: relative; dans la règle qui le concerne. Constater que visuellement, rien ne se passe.

   Ajouter maintenant les propriétés top: 200px; et right: 50px; à la règle. Que se passe-t-il ? Constater que seul le h1 a bougé : tout le reste de la page est resté à sa place. L'élément occupe toujours son espace initial, mais il a été décalé, et il recouvre même une partie des autres éléments (on les voit toujours car la couleur de fond du h1 n'est pas opaque). Utiliser l'inspecteur pour cocher/décocher la propriété position: relative; et bien voir ce qui se passe.

   Ajouter la propriété z-index: -1; à la règle. Quelle est la différence ?

   Avant de passer à la suite, remettre le h1 en position: static (c'est la valeur par défaut), sans toucher au reste des propriétés.

7. On s'intéresse maintenant à l'élément de type aside juste dessous.

   Ajouter la propriété position: absolute; dans la règle qui le concerne. Constater que l'élément ne bouge pas, mais est « sorti du flux » des éléments : il n'est plus pris en compte pour la mise en page, et les autres éléments se retrouvent donc dessous (heureusement, il n'est pas opaque lui non plus). Utiliser l'inspecteur pour cocher/décocher la propriété position: absolute; et bien voir ce qui se passe.

   En plus d'être sorti du flux, vous devriez constater que la largeur de l'élément n'est plus contrainte par celle du body. Lui donner une largeur de 400 pixels.

8. Pour l'instant l'élément est resté à sa place : on va le faire bouger. Ajouter les propriétés top: 10px; et right: 50px; à la règle portant sur le aside. Que se passe-t-il ? À quoi correspondent les longueurs 10 et 50 pixels ?

9. Modifier la propriété right pour mettre -300px : que se passe-t-il ?

10. Dérouler (« scroller ») la page vers le bas (zoomer sur la page si elle n'est pas assez longue). Constater que le aside disparaît : il est positionné par rapport au canevas, c'est-à-dire à la boîte de la page entière.

11. 

    Ajouter une propriété position: relative sur le body. Constater que cette propriété, toute seule, n'a pas d'effet sur le body (comme on l'avait vu précédemment sur le h1), mais qu'elle a un effet sur le aside: lequel et pourquoi ? (Ne pas hésiter à aller voir le cours…)

12. Changer la valeur de position à fixed à la place de absolute : que se passe-t-il ? (Essayer de scroller.)

    On voit que ces deux valeurs de position fonctionnent de manière proche, mais fixed positionne l'élément par rapport au viewport (c'est-à-dire la fenêtre du navigateur), pas à la boîte de la page ou d'un de ses éléments.