Exercice CSS : un pied de page qui dépasse sur le contenu

La semaine dernière, je vous avais parlé d’une maquette à réaliser en urgence.

Cette maquette a été acceptée par le client, moyennant quelques petites modifications, mais le prestataire en charge de l’intégration m’est tombée dessus à propos de certaines libertés que j’avais prises d’un point de vue de la mise en page (coucou Myriam ;) ).

Euhhh, dis Aymeric, elle est sympa ta maquette, mais je ne rêve pas, ton pied de page là, il dépasse vers le haut, c’est super chelou à intégrer ça.

Tss tss femme de peu de foi dans les capacités des CSS (on notera au passage que ce pied de page est un mix entre ma proposition de maquette et celle de Myriam, donc je ne suis pas le seul fautif).

Je donne donc à Myriam deux ou trois trucs et astuces pour faciliter ce type d’intégrations (pour une fois que c’est dans ce sens, en général c’est moi qui appelle Myriam à l’aide pour des problèmes de php).

Donc, voici l’exercice.

Un pied de page qui dépasse sur le contenu de la page

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de positionner des éléments graphiques inclus dans la partie appelée « pied de page » de façon à ce qu’ils se superposent avec des contenus présents dans des éléments supérieurs de la page (voir image fournie pour une meilleure visualisation).
  • Niveau de difficulté : complexe
  • Difficulté détectée : Mise en page en trois colonnes, la colonne de gauche à un fond de couleur.
  • Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement et leurs interactions est nécessaire (des sources sont fournies en bas de page).
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Le design à une largeur fixe, les textes des colonnes visibles dans l’image jointe ne sont là qu’a titre indicatif, il faut, au final, que le texte du contenu central soit clairement positionné comme précisé sur le visuel. Comme toujours, le code html et CSS doivent être valides, c’est le minimum, je vous laisse tout liberté au niveau de contraintes supplémentaires si vous en avez envie. Bien sur au minimum compatible avec les principaux navigateurs du marché.

L’image

miniature de l'image de référence de l'exercice

Tout est dans l’image, une version à taille réelle est récupérable en cliquant sur l’image affichée.

Tout est réalisable à partir de cette image, si le besoin s’en fait sentir, je vous fournirai les fichiers graphiques source de chaque élément, mais ce n’est pas vraiment le fond du problème.

Je vous demande donc, de fournir un fichier html, un fichier css (ou le css intégré dans le fichier html), ainsi que les images découpées, et de si possible, préciser vos choix techniques.

Les sources (pour rappel) :

Voila, bon exercice et bon courage à vous.

Cordialement,
Aymeric Jacquet

Tags : , , ,