De nouveaux exercices sur l’AJblog

J’ai reçu par mail, il y a quelques temps déjà, un message d’un lecteur me demandant pourquoi il n’y avait plus d’exercices depuis longtemps.

La raison en est simple : le manque de temps.

Ecrire un billet d’information ou de réflexion prend du temps, mais moins, beaucoup moins que la création d’un exercice complet.

Il faut l’idée de base, le sujet de l’exercice, définir son degré de difficulté, trouver les bonnes sources, le réaliser moi-même, chercher différentes pistes de réalisation en fonction du cahier des charges, le rédiger, regarder et analyser les propositions de réponse des uns et des autres ET rédiger sa propre réponse expliquée et argumentée.

Le plus dur étant de trouver un sujet dont la réponse ne se trouve pas en 30 secondes via une recherche Google, le but de ces exercices étant en général l’expérimentation et l’application concrète de connaissances de base.

Tout ça pour dire qu’à l’heure du Web 2.X et du User Generated Content (que c’est beau) je vous propose de participer à la création de ces exercices.

Je ne vous demande pas forcément de me pondre des exercices complets (quoique si vous vous en sentez le courage), mais de me proposer par mail des sujets propices à l’expérimentation.

Ces sujets peuvent venir de différentes sources :

  • Un problème auquel vous avez été confronté
  • Un exemple que vous avez vu sur un site en production
  • Toute autre source possible

En contrepartie, je promets d’essayer de créer un exercice autour de ce sujet ou au pire d’essayer de décrypter et d’expliquer les techniques utilisées pour arriver au résultat final que vous aurez pu voir.

Donc, si vous vous sentez l’âme partageuse, n’hésitez pas, mon email se trouve toujours à la même place, en haut à droite de la page que vous êtes en train de lire.

Correction d’exercice : un menu en rollover façon "dock" Mac

Pour rappel, voici le code source html qui sera utilisé pour les deux exercices :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

Les sources utiles :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • 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 : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Correction :

Il n’y a pas de grande difficulté pour cette exercice, vous avez presque toutes les réponses nécessaires en analysant bien les quelques exemples de menus fournis par le site Alsacréations.

Les grandes différences sont :

  • L’agrandissement de la surface active du lien au passage de la souris
  • l’effet de transition appliqué à l’image

Nous ne toucherons plus à la structure html, l’ensemble de l’exercice va se dérouler au niveau de la gestion de la feuille de style CSS et des images utilisée.

Le fichier CSS

Nous allons utiliser la technique du fond changeant en fonction du changement d’état du lien, passage du lien par défaut au lien (a) au passage de la souris (a:hover) et pour simplifier, à l’usage du clavier (a:focus).

Préparons la base de notre fichier CSS :

* {margin:0; padding:0;}
body {margin-top: 20%}
ul {width:350px; margin: 0 auto;}
li {display:inline;}

li a {
	display:block; 
	float:left; 
	width:50px; 
	height:100px; 
	}

Le sélecteur universel * est là pour remettre à zéro les valeurs de marge extérieure (margin:0) et marge extérieure (padding:0) qui peuvent être différentes d’un navigateur à l’autre. Au passage, en commençant toutes vos feuilles de style par ce petit bout de code, vous réglez 90 % de vos problèmes de rendu sur les différents navigateurs.

Les valeurs appliquées au body et au ul ne sont ici qu’à titre d’exemple et ne servent que pour la présentation de l’exercice, ce qui nous intéresse viens ensuite.

li {display:inline;} permet de changer la nature du conteneur li du type en bloc à type en ligne, pour résumer, cela vas permettre de présenter les éléments de la liste sur une ligne et non plus les uns « sous » les autres, pour plus d’informations vous pouvez aller voir cet article d’Alsacréations : La structure des balises : bloc et en-ligne.

li a {"valeurs"} c’est ici que nous construisons la forme de nos boutons, nous modifions la nature de la balise a pour la transformer en type « en bloc » (display:block), nous lui donnons un positionnement flottant à gauche (float:left;) de façon à ce qu’ils se positionnent les un a côté des autres, nous leur donnons une forme (width:50px; height:100px). Voila, nos boutons sont prêts.

Le 100px de hauteur des boutons n’est pas choisi au hasard, il correspond à la hauteur des boutons en mode actif, nous passerons donc de boutons de 50 pixels de large et 100 pixels de haut à des boutons de 100 pixels de large sur 100 pixels de haut.

c’est aussi pour ça que nous avons donné une largeur de 350 pixels à la liste (ul) car cela corresponds à 5 boutons de largeur 50 pixels et un de largeur 100 pixels. Ca vous évitéra des surprises de mise en page en prévoyant dés le début la taille maximale prise par votre menu.

Passons à la décoration.

Nous allons en premier lieu préparer nos images.

Les boutons en version off :

Une simple image de 300 pixels de large et 100 pixels de haut dans laquelle vous allez créer vos boutons que vous placerez tous les 50 pixels.

Essayez avec des images simples pour l’exercice, rien de vous empêche par la suite de le refaire avec d’autres types de boutons, à vous d’adapter.

Voici l’image utilisée :

Nous avons utilisé un format gif pour une meilleure concordance de couleurs sous les différents navigateurs vu que nous devons utiliser des fichiers gifs pour les boutons en mode ON.

On les insère ensuite dans le document en ajoutant ces lignes à notre feuille de style :

#un a {background:transparent url(menu-rollover-jscript.gif) no-repeat  left top; }
#deux a {background:transparent url(menu-rollover-jscript.gif) no-repeat -50px top; }
#trois a {background:transparent url(menu-rollover-jscript.gif) no-repeat -100px top; }
#quatre a {background:transparent url(menu-rollover-jscript.gif) no-repeat -150px top; }
#cinq a {background:transparent url(menu-rollover-jscript.gif) no-repeat -200px top; }
#six a {background:transparent url(menu-rollover-jscript.gif) no-repeat -250px top; }

menu-rollover-jscript.gif est le nom de mon image, bien sur, utilisez le nom de l’image que vous avez créé.

Cela ne fonctionnera que si vous avez utilisé le code html fourni, ou chaque élément de liste (li) a son id propre (un, deux, trois, etc.).

On a utilisé la technique du positionnement de fond (left top, -50px top, etc) de façon à ce que chaque bouton ait bien le fond qui lui convient, une seule image pour les 6 boutons.

Les boutons version ON

En temps normal, pour un simple changement de fond, nous aurions utilisé la même image que celle du fond par défaut, en y incluant, plus bas, les versions ON des boutons, mais comme nous voulons obtenir un effet de transition, nous allons utiliser une image par bouton, un bon vieux gif animé.

Voici comment nous allons faire (l’exemple ci-dessous est réalisé avec Photoshop/imageready, si vous utilisez un autre logiciel pour vos gif animés, adaptez en fonction des spécificités de votre logiciel).

Créez une image de 100 pixels par 100 pixels avec un fond transparent.
Créez un équivalent du bouton de base bien centré dans votre image (par exemple outil elipse avec la touche shift enfoncée pour l’homothétie).

Ajoutez le texte correspondant (1, 2, etc.)

Fusionnez le texte avec votre bouton (calques photoshop)
Dupliquez le calque.
Réduisez le calque inférieur à 75% de la taille du calque supérieur, recentrez le si besoin.
appliquez à ce calque un flou gaussien (filtres/atténuation/flou gaussien), normalement le réglage par défaut devrait suffire.
Basculez sous imageready (bouton en bas à droite de votre barre d’outils flottante).

Une fois dans Imagerady (ou votre logiciel d’animations), créez deux « images » d’animation, la première avec l’objet flouté et la deuxième avec l’objet « normal ».
Pas de temps de transition et pas de répétition d’animation.
Enregistrez la copie optimisée sous et vous voila avec votre premier bouton ON.

Répétez l’opération pour les cinq autres boutons. Il y a bien sur une méthode plus rapide pour créer les cinq boutons, mais pour l’instant nous allons rester sur cette méthode « simple ».

Il ne vous reste plus qu’a appliquer ces fonds via votre feuille de style avec le code suivant à ajouter à la suite :

#un a:hover, #un a:focus {width:100px; height:100px; background:transparent url(1.gif) no-repeat left top; }
#deux a:hover, #deux a:focus { width:100px; height:100px; background:transparent url(2.gif) no-repeat left top; }
#trois a:hover, #trois a:focus {width:100px; height:100px; background:transparent url(3.gif) no-repeat left top; }
#quatre a:hover, #quatre a:focus {width:100px; height:100px; background:transparent url(4.gif) no-repeat left top; }
#cinq a:hover, #cinq a:focus {width:100px; height:100px; background:transparent url(5.gif) no-repeat left top; }
#six a:hover, #six a:focus {width:100px; height:100px; background:transparent url(6.gif) no-repeat left top; }

Nous appliquons le changement de taille et de fond lors des changements d’état :hover et :focus, pour que l’effet soit accessible soit à la souris, soit au clavier.

Encore une fois j’ai utilisé mes noms de fichiers, pensez à utiliser vos propres noms de fichiers.

Ah oui, dernier point, votre texte s’affiche toujours à l’écran, pour éviter cela vous pouvez utiliser text-indent:-5000px; a ajouter a votre partie de feuille de style li a {…}. Ou pour faire plaisir à Florent V. jouer avec la taille de police, les couleurs des images et les couleurs de fond des balises a de façon à ce que le texte apparaisse si les images sont désactivées.

Et voici le résultat :

http://www.ajcrea.com/exercices/rolloverjscript/

Attention : cette méthode a un défaut, comme les images « ON » ont une animation qui ne s’effectue qu’une fois, on ne peut les précharger sans que l’animation ne s’active, donc au premier affichage dans le menu, vous aurez une latence d’affichage, le temps que le navigateur charge le fichier. C’est bien pour ça que j’ai continué à creuser pour en arriver au deuxième exercice.

Fin de la correction pour ce matin, le travail m’appelle, je publierai la correction du deuxième exercice cet après midi.

Nous revoila avec la correction du deuxième exercice :

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Rappel des directives :

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • 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 : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Nous partons toujours du fichier html fourni en début de correction et encore une fois tout va se jouer au niveau du CSS et des images.

Un peu de réflexion

Quand j’ai commencé à réfléchir à ce type de menu, j’ai d’abord essayé avec la méthode du premier exercice, mais elle ne m’a pas totalement convaincue.

J’ai donc creusé dans mes connaissances des comportements CSS pour voir comment je pouvais contourner les difficultés détectées :

  • Il me fallait un changement multiple d’images pour simuler les augmentations proportionnelles des boutons (du plus grand au plus petit).
  • Une compatibilité avec un maximum de navigateurs, donc pas de trucs et astuces ne fonctionnant pas sur Internet Explorer.
  • Que « l’animation » soit fluide, donc pas d’animations longues à charger au survol de la souris.
  • Pas de javascript
  • Que soit globalement « accessible »

Je vous livre dés maintenant la solution :
[
Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac »|http://www.ajcrea.com/exercices/rolloverjscript/test2.html|fr].

L’image utilisée :

La feuille de style CSS :

body {margin-top: 20%}

* {margin:0; padding:0;}
ul {
position:relative; 
width:350px; 
height:100px; 
margin: 0 auto; 
background:transparent url(global.png) no-repeat  left top; }
li {display:inline;}

li a {
	display:block; 
	width:50px; 
	height:100px; 
	text-indent:-5000px;
	}
#un a {position:absolute; top:0; left:0px; z-index:200; }
#deux a {position:absolute; top:0; left:50px; z-index:200; }
#trois a {position:absolute; top:0; left:100px; z-index:200;}
#quatre a {position:absolute; top:0; left:150px; z-index:200;}
#cinq a {position:absolute; top:0; left:200px; z-index:200;}
#six a {position:absolute; top:0; left:250px; z-index:200;}

#un a:hover, #un a:focus, #deux a:hover, #deux a:focus, #trois a:hover, #trois a:focus, #quatre a:hover, #quatre a:focus, #cinq a:hover, #cinq a:focus, #six a:hover, #six a:focus  {
position:absolute; top:0; left:0px; 
width:350px; height:100px; 
z-index:100
}

#un a:hover, #un a:focus {
background:transparent url(global.png) no-repeat left -100px;
}
#deux a:hover, #deux a:focus {
background:transparent url(global.png) no-repeat left -200px;
}
#trois a:hover, #trois a:focus {
background:transparent url(global.png) no-repeat left -300px;
}
#quatre a:hover, #quatre a:focus {
background:transparent url(global.png) no-repeat left -400px;
}
#cinq a:hover, #cinq a:focus {
background:transparent url(global.png) no-repeat left -500px;
}
#six a:hover, #six a:focus {
background:transparent url(global.png) no-repeat left -600px;
}

Ce qui nous donne la page suivante :

http://www.ajcrea.com/exercices/rolloverjscript/test2.html

Explications :

Je ne vais pas revenir sur les points déjà vus dans le premier exercice, juste expliquer les différents points importants.

La liste non ordonnée :

utilisation du positionnement relatif (position:relative) pour une seule raison, permettre aux éléments enfants en positionnement absolu (position:absolute) de se fixer sur son layout et non pas sur la page.

Le fond de base est appliqué a cet élément, et non pas aux éléments liens (a).

les boutons version OFF (les éléments a) :

Ils sont positionnés en absolu pour ne pas bouger quand nous allons modifier les comportement des a:hover et a:focus.
On leur donne une forme (width:50px, height:100px) et un z-index de 200, l’intérêt du z-index va venir par la suite.

les boutons version ON (:hover, :focus) :

On profite du changement d’état pour donner une nouvelle taille au bouton (width:350px; height:100px;) soit la taille exacte du menu, on les positionne en absolu en haut à gauche pour qu’ils commencent graphiquement au début du menu.

On leur donne un z-index de 100 pour qu’ils se positionnent au dessous des zones réactives des liens (qui elles, sont en z-index:200 soit « au dessus »), de fait, le fond recouvre bien l’ensemble des boutons, mais les zones réactives de chaque lien restent accessibles au survol et clic de souris (et au clavier).

Attention : bien que personnellement je trouve l’effet efficace, il faut faire attention au poids de l’image utilisée en fond qui peut finir par être assez lourde si vous faites un menu vraiment graphique.

Pour finir

Le premier exercice n’était pas bien compliqué, il s’agit juste d’une variante des menus que vous trouvez dans la galerie d’Alsacréations fournie dans les sources.

Le deuxième demandait presque plus de travail au niveau de l’image que des CSS, mais quand même je suis assez content du résultat.

Comme toujours, si vous avez des questions ou des remarques, n’hésitez pas.

Exercice CSS : un menu en "rollover façon "Dock Mac"

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • 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 : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Voici ce qui m’a donné envie de tester ce genre de rendu (bien joué julien A ;) ) : attention le cargement de cette page risque de « geler votre navigateur pendant de longues secondes.
http://archive.dojotoolkit.org/nightly/tests/widget/test_FisheyeList.html

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • 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 : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Attention !!

Ces deux exercices, quel que soit leur niveau, demandent quand même de prendre un peu de recul par rapport à vos méthodes de travail. Leur but principal est de vous faire penser « rendu » dans sa globalité, une page web est un ensemble de choses, pour arriver à un rendu, il faut parfois prendre les choses sous un angle différent de ce à quoi vous êtes habitués.

Dernier point : le questionnement sur les images utilisées est important.

Bon courage à vous.

PS : j’oubliais, voici le code html utilisé :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

PPS : pour information, les deux constructions on été testées avec succès sur : IE5.5, IE6, IE7, Opera 9, FF 1.5 et FF 2.

Le corrigé :

Correction d’exercice : un menu en rollover façon « dock » Mac

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

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.

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.

Exercice CSS : un bloc de texte chevauchant deux colonnes

En fait, c’est un peu plus compliqué que ce que le titre indique. ;)

J’inaugure par cet exercice une série de billets présentant des cas « pratiques » d’application des CSS à une structure html.

Je fais plein de tests dans mon coin, sur des comportements, des rendus, des compatibilités et j’ai décidé d’en publier sur l’AJblog, mais sous la forme d’exercice.

Par contre, ne vous attendez pas à des tutoriels tous faits ou de simples pages de code commentées. Je laisse ça à d’autres qui font ça très bien.

Voyez ça plutôt comme des articles d’auto formation.

Un corrigé sera bien sur fourni à la suite, soit le mien, soit celui d’un visiteur si la technique appliquée est plus propre, plus simple, mieux en clair. Je n’ai pas la prétention d’être un « gourou ».

Un bloc de texte chevauchant deux colonnes

  • Objectif : à la fin de cet exercice, vous serez capables de créer un bloc de texte chevauchant deux colonnes également remplies de texte.
  • Niveau de difficulté : moyen
  • Difficulté détectée : il faut que le texte des deux colonnes principales « habille » le bloc les chevauchants (voir visuel joint). Il faut de plus que le rendu soit le même (à peu près) quel que soit le navigateur (récent, c’est à dire à partir de IE6 ;) ).
  • Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement est un plus (des sources sont fournies en bas de page).
  • Matériel nécessaire : un simple éditeur de texte peut suffire
  • Informations complémentaires : Vous avez droit à 5 conteneurs neutres (div) au maximum (n’oubliez pas il y a un footer ;) ). Vous avez droit à 7 ids d’objets différentes, les classes ne sont pas autorisées. Le code html et le CSS doivent être le plus propres possibles et bien sur Valides.

L’exemple en image :

Un joli bloc de texte habillé pour l'hiver

Si vous avez besoin d’informations complémentaire, n’hésitez pas à en demander.

Précisez dans les commentaires si vous avez fini l’exercice en mettant un lien vers la page, ou si vous n’avez pas d’hébergement, envoyez moi vos fichiers je les hébergerai.

Les sources :

EDIT : Pour vous permettre de pouvoir donner l’URL de vos fichiers, j’ai temporairement désactivé l’antispam sur .htm et .html (bilan : 2 spams de commentaires dans la nuit).

Bon exercice.

Les réponses actuelles :

  • 20cent : 20cent.net/docs/divers/ex…
  • Florent V. : web.covertprestige.info/d…

Merci à vous de participer.

La correction de l’exercice : Correction d’exercice : un bloc de texte chevauchant deux colonnes