Correction d’exercice CSS : un pied de page qui dépasse sur le contenu

Pour rappel :

Le lien vers l’exercice : Exercice CSS : un pied de page qui dépasse sur le contenu

Et les consignes :

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

Pour la suite, c’est par ici…

Voici donc ma correction, vous trouverez les propositions des lecteurs en fin d’article.

En premier : le code html

Pas de grandes difficultés, il s’agit d’une mise en page classique en trois colonnes comme on en trouve un peu partout, vous avez d’ailleurs d’excellents exemples sur Alsacréations : Modèles de mise en page en CSS

On va donc faire une construction simple, avec : un bloc d’en tête (header), une colonne gauche (qui sera le menu principal), un contenu central, une colonne droite, un pied de page (footer).

Comme la colonne de gauche fait office de menu général, on va donc sans aucun remord la placer avant le contenu central dans le flux de la page.

Ca nous donne la structure suivante (en XHTML strict) :

Lien vers la page de code (pensez à afficher la source)

Vous remarquerez deux choses:

  • J’ai déjà identifié mes blocs via une ID unique pour chaque, j’utilise toujours les mêmes ID dans mes constructions html, tout simplement pour pouvoir m’y retrouver facilement et pour pouvoir recycler des modèles de feuilles de style CSS facilement.
  • Le code est commenté, pour l’instant il est très lisible, mais dans des pages à fort contenu, il est toujours bon de commenter son code, soit pour s’y retrouver aisément, soit pour qu’un autre s’y retrouve.

Pour l’instant, nous n’allons pas mettre de contenu, nous allons construire la mise en page de ce squelette via une feuille de style CSS simple.

Et pour savoir quelles valeurs de hauteur/largeur nous allons donner à nos différentes parties, nous allons nous baser sur la maquette fournie :

miniature de la maquette cotée

Le design fait 990 pixels de large, chaque colonne fait 200 pixels de large, le pied de page fait 50 pixels de haut.

Ce qui nous donne le code CSS suivant :

#general {width:990px; margin: 0 auto;}
#header {height:100px}
#colgauche {
	float:left;
	width:200px;
	height:400px;
}
#central {
	float:left;
	width:550px;
	height:400px
}
#coldroite {
	float:right;
	width:200px;
	height:400px;
}
#footer {
	clear:both;
	height:50px;
}

J’ai attribué une hauteur aux éléments de contenu pour les tests, pensez à les retirer une fois qu’il y a un vrai contenu.
Ensuite, les images de déco.

Et bien, nous n’allons pas nous embêter à découper l’image utilisée en fond du pied de page, nous allons l’utiliser en entier, son poids global (si bien compressée) ne pose pas de problèmes, une fois nettoyée des résidus de texte (pour exemple, l’image que je vais utilise est en png24 et fait 35 kos).

C

Toute la découpe va se faire via un mélange de html et de CSS.

Ces images de décoration, n’ont aucune valeur d’information, aussi nous pouvons les afficher via des fonds CSS sans aucune arrière pensée, elles n’apportent aucune information utile à la page, elles sont juste là à titre de décoration.

Voici comment nous allons procéder :

Nous allons créer 3 conteneurs/division (div) vides que nous allons positionner juste avant la balise fermante (</div>) du pied de page (footer).

<div id= »decogauche »>
</div>
<div id= »decocentre »>
</div>
<div id= »decodroite »>
</div>

Puis nous allons leur donner une forme et un fond via CSS, on connait le fond, on connait leurs largeurs, la seule inconnue est la hauteur optimale pour qu’elles se marient le mieux avec les contenus des colonnes et du contenu central, pour l’instant nous allons leur donner une hauteur égale à celle de l’image utilisée, soit 190 pixels.

Au passage, nous allons en profiter pour attribuer le fond au pied de page.

Voici donc le code CSS appliqué à ce moment là :

#footer {
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	width:590px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Les colonnes faisant 200 pixels de large chacune, on a déduit la largeur du bloc central à 590 pixels (990-400). On a positionné le fond de ce bloc à -200 pixels sur la gauche de façon à ne faire apparaitre que la partie qui nous intéresse.

Si vous avez effectué ces opérations et que vous affichez votre page dans un navigateur, vous voyez le pied de page avec un fond et 3 blocs qui s’affichent en dessous et qui correspondent au parties sur lesquelles nous allons travailler.

C’est bien beau, mais maintenant ?

Maintenant, on va doucement positionner tout ça en utilisant le positionnement absolu (position: absolute).

Pour ce faire, nous allons commencer par donner un positionnement relatif (position: relative) au pied de page (footer). En effet, donner un positionnement relatif à un conteneur, permet que ses conteneurs enfants en position absolue se fixent par rapport à sa forme et non plus par rapport à la page.

De plus, nous allons réduire la hauteur des blocs concernés de 50 pixels (la hauteur du pied de page) de façon à ce que les fonds se marient le plus parfaitement possible.

Voici ce que donne le css maintenant (du moins la partie que nous modifions) :

#footer {
	position:relative;
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

C’est déjà pas mal, mais ce n’est pas encore ça, nous avons découpé notre image en hauteur en fonction de l’élément le plus haut, la petite fille sur son vélo à droite, seulement la partie gauche et la partie centrale n’ont pas besoin d’être aussi hautes, on va donc travailler le CSS de façon à ce qu’ils fassent juste la hauteur nécessaire et surtout repositionner les fond en fonction.

Faites vos essais, mais voici ce que ça donne pour moi :

#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 100px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left -40px;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 55px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px -85px;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Pour terminer, pensez à donner à vos éléments de contenu (colgauche, central, coldroite) une marge intérieure basse (padding-bottom) au mois égale à la hauteur des blocs de déco pour que leur contenu de passe pas sous les blocs déco.

Voici la construction dans sa version « finale » : page3.html

Bon, je vous rassure, il y a, dans ce cas précis, une méthode beaucoup plus simple. ;)

Vu que nous avons utilisé une seule et grande image, nous aurions pu mettre cette image comme fond du conteneur « general » et appliquer les règles de marges intérieures basse aux éléments de contenu (et chercher une solution pour le fond de la colonne de gauche). Je crois d’ailleurs que c’est en partie la solution gardée par Florrent V.

Mais je le rappelle, il s’agit d’exercices pour apprendre à mieux appréhender les différents comportements des CSS.

Les contributions des lecteurs :

La réponse de clb56 :
http://www.clb56.fr/test_css/aj_css_exercice3/
http://www.clb56.fr/test_css/aj_css_exercice3bis/

La réponse de Florent V :
http://web.covertprestige.info/divers/ajblog/exo3.html

Maintenant, essayons de déterminer ensemble quelle est la « meilleure » solution, à vos claviers.

Cordialement,
Aymeric Jacquet

Tags : , , ,

Be Sociable, Share!

4 Commentaires pour Correction d’exercice CSS : un pied de page qui dépasse sur le contenu

  • Florent V.

    Je crois que je préfère ma version (comme tu l’indiques, plus simple pour ce cas précis, même si pédagogiquement moins intéressante)… que j’améliorerais cependant, pour un site en production, en séparant la partie haute de l’image (comme image de fond d’un bloc de contenu global ne comprenant pas le pied de page), et la partie basse (comme image de fond du pied de page). Le but de la manoeuvre : pouvoir avoir un pied de page extensible en hauteur, en fonction de son contenu et de la taille du texte.

    Le 8 mars 2007 à 18 h 21 min

  • En fait l’intérêt réel de l’exercice, c’est dans le cas ou ces « surparties » contiennent de l’information, comme des liens, un rédactionel, etc. En fait comme toi, dans une optique de production (avec prise en compte des possibles élargissements de police), je subdiviserais l’ensemble en regroupant colgauche, coldroite, central et les 3 blocs de deco dans un bloc « general bis », pour supporter les déformations du pied de page.

    Le 8 mars 2007 à 18 h 37 min

  • clb56

    Salut,

    En fait la solution que j’ai donnée qui correspond à la construction du document html que tu envisages est la troisième.

    http://www.clb56.fr/test_css/aj_css_exercice3ter/

    Le 9 mars 2007 à 11 h 46 min

  • J’aime assez ta proposition de structure de page avec les titres donnés :

    • Entame du document (= header)
    • Navigation
    • Contenu
    • Annexe
    • Cloture du document (= footer)

    C’est très parlant.

    Le 9 mars 2007 à 18 h 21 min