TD 3 - Mise en page : posons le cadre.



Quelle est la différence entre un traitement de texte classique et un moteur de rendu HTML ? Quelles en sont les conséquences ?

Un logiciel de traitement de texte gère plusieurs pages dans un même document tandis que pour un moteur de rendu HTML, chaque page correspond à un fichier différent. Un traitement te texte charge tout le fichier, alors qu'avec le HTML, uniquement la page active est chargée.

Si j'écris la règle CSS suivante :

h1 {
border: 2px red 4px yellow;
}

Ce code ne s'appliquera pas car on utilise des propriétés pas compatibles entre elles.

Quels avantages y a-t-il à utiliser une taille absolue ?

Une taille absolue permet de définir une taille pour un élément peu importe la taille de la fenêtre. Cela peut causer le fait de ne pas voir tous les éléments dans une page à moins de la redimensionner.

Une taille relative ?

Une taille relative redimensionne automatiquement les éléments de la page en fontion de la teille de cette dernière.

À quoi correspond l'unité em ?

L'unité em est une unité de mesure relative. Elle dépend de la police de caractère. De manière générale, la taille de l'élément est fixée par rapport à celle de son élément parent.

Et la nouvelle unité rem ?

L'unité rem est une unité de mesure relative. Elle est liée au premier élément de la page (donc à la balise root). Cela facilite la mise en place de page dite "responsive".

Expliquez le principe des nouvelles unités vh et vw et leur intérêt.

L'unité vh est une unité de mesure relative. Elle est liée à un centième de la hauteur de la fenêtre. Elle permet donc d'adapter les éléments en fonction de la hauteur de la fenêtre du navigateur.

L'unité vw est l'équivalent de vh pour la largeur.

Pourquoi DIV #1 est-il devant DIV #4, alors que son z-index est plus faible ?

DIV#1 est devant DIV#4 car DIV#1 a un "z-index" plus grand que DIV#3 et DIV#4 est contenu à l'interieur de DIV#3.

Accéder à la galerie

Dans l'exemple précédent, que se passe-t-il si l'on supprime la bordure de main (en pointillés) ? Pourquoi ?

La marge en dessous du main disparaîtra et se collera aux éléments A et B. En effet : "Si un élément parent A contient un élément enfant B, et que leurs marges externes se touchent directement (A n'a pas de bordure, pas de padding...), alors la marge de B est intégrée à celle de son parent A (en prenant le max des deux valeurs)."