À la fin de cet exercice, vous devriez pouvoir formatter un tableau avec du CSS.
Cet exercice vaut 2 points, pour les obtenir il vous faut compléter tous les exercices et
déposer votre résultat sur Studium.
Étapes
À l'aide d'oXygen, vous devez reproduire la page de calendrier suivante lorsque la fenêtre a au moins 600 pixels de largeur.
mais plutôt s'afficher ainsi lorsque la largeur de la page est plus petite que 600 pixels.
NB: Sans utiliser de programmation, il est (je crois!) impossible d'obtenir ces deux types de présentations à partir d'une seul tableau
seulement avec du CSS.
Vous devez donc créer deux tableaux avec la même information et n'afficher que celui qui est
approprié selon la largeur de l'écran. Votre CSS devrait toutefois factoriser le plus possible les
propriétés communes aux deux présentations.
Voici les caractéristiques à reproduire en prenant bien soin que toute la mise en page est dans le
CSS et non le HTML.
Vous pouvez supposer qu'il n'y a qu'une activité par jour
En mode large,
les cases du calendrier sont des carrés de 100 pixels de côté.
Les dates doivent être centrés en haut, en grande fonte sans-serif
L'activité apparaît vers le bas de la case.
Les heures des activités sont en italique.
En mode étroit
La présentation est sur trois colonnes
Les dates doivent être cadrées à droite, en grande fonte sans-serif
Les heures et l'activité sont cadrées à gauche dans les mêmes fontes que dans
le mode large
Créez une archive zip contenant vos fichiers HTML et CSS.
Déposez votre archive sur Studium.
Défi supplémentaire (non noté): Si vous connaissez javascript: générez, au chargement de la page HTML, le tableau qui sera utilisé en mode étroit.