HTML/CSS - TD3 : Pandora's box.

On découvrira ici quelques-unes des règles de formatage d'un document affiché à l'écran.

Toute la documentation nécessaire à la compréhension de ce TD peut être trouvée dans les chapitres 8 à 11 de la norme:

Comme on l'a vu dans les TDs précédents on emploie en HTML des balises pour formater un document. On peut ainsi utiliser la balise <p> pour définir un paragraphe. Dans ce paragraphe on pourra utiliser la balise <em> pour mettre en valeur une partie du texte. Mais si l'on veut pouvoir tirer le maximum possible du couple HTML/CSS, il est important de comprendre comment le navigateur interprète ces balises lors du rendu du document à l'écran.

Pour comprendre comment le navigateur fonctionne il faut connaître les deux notions de base qui sont utilisées lors du rendu. La première notion de base est la notion de boite. La seconde est la notion de mise en page (layout en anglais).

Pour expliquer les choses simplement, le contenu de tout élément appartient à une boite. Chaque boite en plus de son contenu possède 3 bords imbriqués les uns dans les autres: un padding, une border, et une margin. La figure qu'on peut trouver dans la norme à l'endroit suivant montre à quoi correspondent ces bords. Les dimensions du contenu de la boite sont censées être contenues respectivement dans les attributs width et height.

Ensuite lorsque l'on parle de mise en page en HTML il faut savoir que l'on manipule diverses catégories de boites (la catégorie en question est définie par l'attribut display). Il y a tout d'abord les blocs, qui sont entassés les uns à coté des autres ou les uns au dessus des autres. Par exemple un paragraphe est un bloc. On trouve ensuite principalement des boites "en ligne" comme celles générées par du simple texte ou encore par les balises telles que <em> ou bien <i> qui sont généralement employées pour changer les propriétés du texte. On trouve également quelques autres catégories de boites qui sont décrites dans la documentation.

Chaque boite en plus de son niveau possède un attribut définissant comment il doit être positionné. Cet attribut peut prendre 4 valeurs différentes: static, absolute, relative ou fixed. Dans le cas d'un positionnement autre que static on peut spécifier les valeurs top, left, bottom, right pour indiquer la position de la boite.

Une fois connu le type de boite auquel on a affaire, on peut les positionner dans le document. Les règles employées sont elles aussi décrites dans la documentation.

1. Il était une fois une boite. Ou plus d'une boite si affinités.

Utilisez les propriétés de padding, de border, et de margin de l'élément body de votre page de façon à avoir:

  • une marge de 20 pixels à gauche et à droite de votre page et de 40 pixels en haut et en bas,
  • une bordure fine et rouge à gauche,
  • une bordure épaisse et verte à droite,
  • une bordure en pointillés, moyenne et bleue en haut,
  • pas de bordure en bas,
  • un padding de 10 pixels dans toutes les directions,
  • une couleur d'arrière-plan #aaaaaa.

Vous vous arrangerez pour utiliser le moins de propriétés CSS possibles.

On peut créer facilement une boite de type block en utilisant un élément <div>. Modifiez votre feuille de style pour appliquer le style défini ci dessus à un élément de ce type. Ensuite vous transférerez le contenu de votre page dans un tel élément. Que peut-on dire de la marge?

2. Savez vous planter des boites à la mode....

Créez une nouvelle page dans laquelle vous placerez 4 images différentes. La première devra être positionnée statiquement. La seconde devra être positionnée relativement avec un bord gauche situé à -10 pixels de l'endroit où il devrait être. La troisième devra être positionnée absolument en bas et à droite du document, à 7 pixels des bords. La quatrième enfin devra être positionnée de façon fixe en bas et au centre de l'écran.

3. Webomaltine, c'est de la dynamique !!!

Il existe dans la norme CSS ce que l'on appelle des pseudo-classes. Pour avoir tous les détails regardez la documentation. Pour l'instant nous ne nous intéresserons qu'à une seule d'entre elles: la pseudo-classe hover. Cette classe permet d'altérer le style d'un élément lorsque l'on passe la souris au dessus de lui comme dans l'exemple suivant: 

<html>

<head>
<style type="text/css">
<!--
div.button
{
	background: white;
	color: black;
	padding: 5px;
	border: thin solid black;
}
div.button:hover
{
	background: black;
	color: white;
	border: thin solid white;
}
-->
</style>
</head>

<body>
<div class="button">bouton 1</div>
<div class="button">bouton 2</div>
<div class="button">bouton 3</div>
</body>

</html>

Ce petit bout de code permet d'obtenir des éléments <div> dont la couleur de fond et la couleur de texte changent quand on passe au dessus:

bouton 1
bouton 2
bouton 3

Il est également possible de modifier le style d'un élément autre que l'élément sur lequel on pointe si l'élément en question est un descendant de l'élément pointé: 

<html>

<head>
<style type="text/css">
<!--
p.hover_example:hover span
{
	color: red;
}
-->
</style>
</head>

<body>
<p class="hover_example">
	Si vous passez la souris au dessus de ce paragraphe alors
	toute la partie de ce paragraphe contenue dans le span 
	changera de couleur: &lt;span&gt;<span>la partie du 
	paragraphe contenue dans le span</span>&lt;/span&gt;.</p>
</body>

</html>

Qui permet de changer la couleur du contenu d'un span descendant d'un paragraphe lorsque l'on passe la souris au dessus de ce dernier:

Si vous passez la souris au dessus de ce paragraphe alors toute la partie de ce paragraphe contenue dans le span changera de couleur: <span>la partie du paragraphe contenue dans le span</span>.

En utilisant cette technique, disposez 10 d'images dont les id prendront les valeurs "b01" à "b10" sur une nouvelle page et faites en sorte que lorsque l'on passe sur l'une d'entre elles une image fixée en bas à gauche de l'écran et contenant l'image à sa taille originale apparaisse. Vous pourrez pour ce faire utiliser la propriété display en alternant sur les valeurs block et none. Vous tricherez bien évidemment... En effet rien ne vous empêche d'avoir plusieurs boites avec les diverses images plutôt qu'un boite dont vous changeriez le contenu :)

4. Flying superman ! (à rendre pour la semaine suivante)

Créez une page contenant 100 boites de largeur 1 pixel positionnées les unes à cotés des autres. Ajouter à cette page une image de superman. Faites en sorte que lorsque l'on passe au dessus d'une des 100 boites l'image de superman soit alignée à gauche avec cette image. Amusez vous ensuite à faire voler superman en passant plus ou moins vite de la gauche vers la droite sur les 100 boites !!! Amusez vous bien.