• 4 hours
  • Easy

Free online content available in this course.

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 12/5/13

Customisons notre diaporama… (1/2)

Log in or subscribe for free to enjoy all this course has to offer!

Vous savez créer un diaporama et vous voulez maintenant l'améliorer ? Rien de plus normal.
Ce chapitre est fait pour ça !

Un menu bien placé

Notre diaporama tient déjà la route, mais nous n'allons pas nous arrêter en si bon chemin.

Pour commencer, je vous propose d'y ajouter du texte (titre, menu…) que nous mettrons… dans l'espace central !
Comme ça, quand un agrandissement sera affiché, les photos cacheront notre texte et on ne verra plus que nos belles photos.

Voyons voir ce que ça peut donner…

Quelques consignes

Je vous propose de remplir toutes les conditions suivantes (vous aurez votre vie pour essayer autre chose).

  • Notre texte sera placé dans le div.centre.

  • Nous donnerons un titre au choix à notre diaporama dans un h1.

  • Nous ajouterons un lien vers un deuxième diaporama dans un p.

  • Notre lien sera toujours gris clair, mais si on le survole ou si on clique dessus il sera gris foncé. Il ne sera jamais souligné.

  • Nous créerons une deuxième feuille HTML avec un second diaporama pour que les deux puissent s'appeler mutuellement (grâce au lien dans le p).

  • Nous mettrons tout le CSS dans une feuille à part.

  • Vous n'oublierez pas de renseigner la propriété font-family avec les polices de votre choix.

  • Tout notre texte sera centré en hauteur et en largeur.

Précisions

Je vous ai demandé de centrer le texte en hauteur et en largeur et cela mérite quelques précisions.

Pour centrer du texte horizontalement, il suffit d'utiliser la propriété text-align que vous devez déjà connaître, et ça n'a rien de sorcier.
Mais pour ce qui est de centrer le texte en hauteur, là, ça devient plus épineux.

Bah non, nous sommes peut-être débutants mais nous avons tous déjà entendu parler de la propriété vertical-align !

vertical-align permet effectivement de centrer du contenu en hauteur de cette manière :

vertical-align:middle;

Mais le problème est que les éléments à aligner doivent être de type inline ou inline-block et que l'utilisation du positionnement absolu pour notre diaporama nous coince.
Donc nous allons faire autrement pour centrer notre texte en hauteur.

Voici ce que je vous propose :

  • placer notre texte dans un div.contenu à l'intérieur de .centre ;

  • donner à .contenu une position absolue (il se superposera à .centre) ;

  • placer notre .contenu à 50 % du bord haut ;

  • ajuster le centrage vertical du div en lui attribuant une marge haut qu'il faudra estimer à l'œil ;

  • le tout en s'assurant que notre contenu ne déborde pas de .centre.

Ou encore :

  • placer notre texte dans un div.contenu à l'intérieur de .centre ;

  • donner à .contenu une position absolue et une hauteur fixe ;

  • s'assurer que le texte occupe toute sa hauteur ;

  • centrer .contenu verticalement comme nous savons faire ;

  • le tout en s'assurant que notre contenu ne déborde pas de .centre.

Précisions de précisions :

  1. Il va falloir faire quelque chose pour le centrage horizontal suite au positionnement en absolu.

  2. Si notre contenu débordait de .centre, le survol des miniatures du bas ne permettrait plus l'apparition des agrandissements puisque le curseur se retrouverait en fait au-dessus de .contenu…

  3. Nous avons besoin d'un div dans .centre parce que .centredoit garder la hauteur de .gauche et de .droiteet la largeur de .haut et de .baset son positionnement, sans quoi notre structure se casserait la figure.

À vous de jouer

Ça y est, j'en ai fini avec mes explications, c'est à vous de travailler maintenant. N'oubliez pas de satisfaire à toutes nos consignes !
Tout cela représente au moins quelques minutes de travail, alors je vous laisse un moment, je file me préparer un café…


… …
… … …

Le XHTML

Vous avez déjà terminé ? Je n'ai même pas fini mon café ! Très bien, comparons nos résultats.
Voyez ce que j'attendais de vous, et si ce n'est pas ce que vous avez obtenu alors vous voudrez peut-être continuer à chercher un peu avant de voir le code que je vous ai concocté !


… …
… … …

…
	<div class="centre">
	    <div class="contenu">
		<h1>Titre du diaporama</h1>
		<br /><br />
		<p>
		    À voir également :<br /><br />
		    <a href="votre_fichier.html">Lien vers votre autre diaporama</a>
		</p>
	    </div>
        </div>
…

Il peut y avoir des variantes mais grosso-modo vous avez dû trouver la même chose.
Ce qui distingue ce fichier HTML de l'autre fichier que je vous ai demandé de créer, c'est uniquement l'adresse du lien et des photos.
− Test −

Le CSS

Positionnement de .contenu
#diaporama .centre .contenu {
    position:absolute;
    width:400px;
    top:50%;
    margin-top:-120px;
    …
}

Il faut donc positionner le bloc en absolu et le pousser vers le bas jusqu'à ce qu'il soit grossièrement centré en hauteur.
Mais attention ! il faut aussi lui donner toute la largeur de .centre, sinon il ne prendra que la place dont il a besoin et le centrage horizontal ne sera pas parfait !

Le texte
#diaporama .centre .contenu {
    font-family: Tahoma, Geneva, Kalimati, sans-serif; 
    text-align:center;
}

Il n'y avait ici rien de compliqué…
On détermine notre famille de fontes et on centre notre texte.

Les liens
#diaporama a {
    text-decoration:none;
    font-weight:bold;
    color:#888;
}
#diaporama a:hover {
    color:#555;
}

Nous voulions des liens gris sans soulignement qui se foncent lorsque nous les pointons.

Petit souci

Certains vont me dire :

Il est vrai que notre travail n'est pas terminé. Laissez-moi d'abord vous expliquer la cause de notre mal avant de vous donner le vaccin.

Bien comprendre la propriété z-index

Le pourquoi du comment

Lorsque nous avons positionné nos éléments, cela a été fait dans un certain ordre chronologique : d'abord les photos de .haut, puis celles de .gauche, ensuite notre .centre, puis les photos de .droite et enfin celles de .bas.

Vous savez que si vous affichez des éléments sur d'autres éléments, le dernier élément affiché s'affichera par-dessus les autres (à condition que le positionnement autorise plusieurs éléments à partager le même espace). Un peu comme le système des calques dans un logiciel de graphisme.

Et notre problème, c'est que quand nous affichons l'agrandissement d'une des miniatures de .haut par exemple, eh bien c'est comme si nous affichions cette image avant de commander l'affichage de notre menu (même si cet agrandissement apparaît après le chargement de la page à l'aide d'un :hover).

Image utilisateur

Image trouvée sur Smashing Magazine.

En toute logique, le texte sera donc visible sur tous nos agrandissements qui arrivent chronologiquement avant.contenu dans le HTML, c'est-à-dire toutes les photos de .haut et de .gauche.
En revanche, les photos de .droite et de .bas qui arrivent après.contenu se positionnent par-dessus .contenu. C'est pour ça que ce « problème » ne touche que la moitié de nos photos.

Moyen de contournement

Pour résoudre notre problème, nous utiliserons la propriété CSS z-index, mais je ne vais pas vous donner la solution tout de suite. Je voudrais que vous cherchiez sur Internet jusqu'à ce que vous compreniez, parce que j'ai peur qu'en vous donnant les réponses trop facilement vous ne deveniez trop passifs.

Résultats avec et sansz-index :

Faites chauffer les serveurs !

À présent, informez-vous et essayez par vous-mêmes de résoudre notre problème d'affichage ; ces quelques pistes devraient vous aider :

Correction

Si vous lisez ça, c'est soit parce que vous avez réussi à utiliser z-index pour afficher nos agrandissements sans le texte, soit parce que vous avez essayé pendant une semaine sans manger et que vous avez finalement abandonné…

D'accord, d'accord ! Voici la réponse :

#diaporama div .grande { z-index:1; }

Par cette petite ligne, nous disons à CSS que toutes nos images .grande ont un coefficient z-index de 1. Par défaut, la priorité d'affichage de nos éléments est déduite par rapport à la chronologie de leur arrivée. Or, là, nous stipulons une priorité d'empilement à nos agrandissements. Cela fonctionne parce qu'aucun autre élément de la même zone n'a de z-index plus élevé que 1.

Un peu de pratique

Question :

Essayez par exemple de donner un z-index de -1 à .contenu et testez le résultat… Que constatez-vous ?

Réponse :

  • Le texte n'est plus sélectionnable ;

  • le lien n'est plus cliquable.

Parce que .contenu a été mis au dernier plan : puisqu'il n'y a rien dans .centre pour cacher le texte, alors ce dernier reste visible, il est comme caché par une couche transparente.
Pour bien comprendre, essayez de donner à .centre une couleur de fond quelconque, vous verrez que le texte de .contenu ne sera plus visible.

Question :

Pourra-t-on cliquer sur notre lien si on attribue des z-index ainsi ?

#diaporama .centre { z-index:2; }
#diaporama .centre .contenu { z-index:1; }

Réponse :

Oui, parce que .centre étant en position float, z-index n'a pas d'effet sur lui. .contenu peut se mettre derrière .centre mais .centre ne peut pas venir se mettre devant .contenu.
Tordu, n'est-ce pas ? o_O

Question :

Listez les inconvénients de cette configuration :

#diaporama div .grande { z-index:-2; }
#diaporama .centre .contenu { z-index:-1 }

Réponse :

La priorité des éléments est ainsi faite : les agrandissements sont moins prioritaires que .contenu qui est moins prioritaire que .centre (à 0 par défaut !). Donc :

  • le texte n'est pas sélectionnable ;

  • le lien n'est pas cliquable ;

  • et le texte de .contenu recouvre tous les agrandissements.

Le résultat opposé de ce qu'on voulait en fait ! Essayez si vous ne me croyez pas. :)

Question :

Si on avait cette configuration :

#diaporama div .grande { z-index:10; }

Quelle serait la condition pour que le texte ne s'affiche au-dessus d'aucun agrandissement et que le lien soit cliquable ?

Réponse :

Il suffirait que .contenu se voie attribuer un z-index inférieur à 10 et supérieur ou égal à celui de .centre (à 0 par défaut).

Question :

Que se passerait-il si on avait cette configuration ?

#diaporama div .grande { z-index:10; }
#diaporama .centre .contenu { z-index:10 }

Réponse :

On retomberait exactement sur notre problème de départ. Puisque .contenu et .centre ont la même valeur z-index, alors c'est la chronologie d'appel dans le HTML qui détermine la priorité d'affichage, et on verra le texte de .contenu sur les agrandissements des miniatures inclues dans .haut et .gauche.

Je n'ai plus rien à dire sur z-index et je pense que vous avez saisi son fonctionnement. Passons à la suite !

Brève introduction à la propriété border-radius

À quoi ça sert ?

Ça sert à arrondir les coins de nos éléments HTML.

C'est possible ? Il doit y avoir un piège… non ?

Oui, et un gros :

Voici comment on l'utilise :

border-radius:valeur_en_pixels/%/em;

Par exemple :

border-radius:15px;

Compatibilité

Mais il semble que Firefox (entre autres) ne l'accepte pas comme tel en novembre 2010.
Il faudra donc remplacer cette ligne par d'autres avec préfixes pour que tous les navigateurs récents (Mozilla, Opera, Safari, IE9 et Chrome) affichent correctement ce que vous leur demanderez (même si ce n'est pas obligatoire pour tous) :

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;

Que c'est compliqué…

Et comment je sais si mon navigateur supporte cette propriété ?

Tester son navigateur

En suivant ce lien de test, vous devriez obtenir une image centrée à l'intérieur d'un conteneur plus large que l'image, centré lui aussi.
Et bien sûr, nos deux éléments se sont vu appliquer la propriété border-radius (sinon ça ne servirait à rien :lol: ) :

border-radius:15px;

Code complet pour les curieux :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Tikal</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    body {
		background-color:black;
	    }
	    div {
		position:absolute;
		width:400px;
		left:50%;
		margin-left:-200px;
		height:400px;
		top:50%;
		margin-top:-200px;
		background-color:white;
	    }
	    img {
		position:absolute;
		width:300px;
		left:50%;
		margin-left:-150px;
		height:300px;
		top:50%;
		margin-top:-150px;
	    }
	    div,
	    img {		
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		-o-border-radius: 15px;
		-khtml-border-radius: 15px;
		border-radius: 15px;
	    }
        </style>
    </head>
    <body>
    <div>
	<img src="../image/tikal/29.jpg" alt="Tikal" />
    </div>
</body>
</html>

Toutefois, chez moi, seul Chrome arrondit les coins de l'image en plus de ceux du conteneur.
Opera et Firefox (dans leurs dernières versions sous Linux) n'arrondissent que les coins du conteneur.

Il est également possible d'arrondir coin par coin en déterminant les quatre valeurs séparément ou d'un coup, dans le sens des aiguilles d'une montre, à l'instar des margin et autres padding.

Arrondir coin par coin

Pour arrondir tous les coins sauf le coin en bas à droite, on ferait ainsi en théorie :

border-radius:15px 15px 0px 15px;

Un joli résultat

En théorie encore, la propriété border-radius permet de faire de nos éléments des ronds.

Si, à la place de 15 pixels tout à l'heure, nous avions mis 50 % de la largeur de nos éléments, ceux-ci auraient dû s'arrondir :

border-radius:200px;

− Test −

Image utilisateur

En apprendre plus

Si vous voulez de plus amples informations, je vous invite à aller les chercher sur Alsacreations : créer des coins arrondis avec border-radius.
Vous pouvez aussi essayer cette démonstration : border-radius.com.

Cette présentation succincte est déjà terminée et vous aurez plus loin l'occasion d'appliquer cette propriété de nombreuses fois.

Des commentaires pour nos photos

Nous sommes prêts à mettre des commentaires !

Pour cet exercice, je vous propose une approche différente de ce que nous avons fait jusqu'à présent. Je vais vous donner un exemple que j'ai réalisé et je vais vous demander d'essayer de l'imiter sans regarder le code.

Contrainte : l'utilisation de classes est interdite pour nos images et nos span.

À l'attaque !

Prêts ? O.K. ! Je vous demande donc d'essayer de réaliser quelque chose qui ressemble à ceci : exemple à copier.


… …
… … …

Première série d'indices :

Commençons avec le HTML :

  • nous devons ajouter des commentaires aux photos que nous voulons commenter dans un conteneur ;

  • nous devons regrouper chaque miniature ainsi que son agrandissement et son commentaire dans un autre conteneur.

Puis le CSS :

  • nous allons avoir besoin des sélecteurs de frère adjacent ;

  • il faut commencer par cacher les agrandissements et les commentaires ;

  • il faut ensuite modifier la façon dont on fait apparaître les agrandissements et trouver comment faire apparaître les commentaires.

Ce n'est qu'une fois que ces bases seront obtenues qu'il sera question de rendre le tout plus élégant.


… …
… … …

Deuxième série d'indices :

Vous vous êtes creusé la tête et vous n'avez toujours pas réussi ? Peut-être que je vous en demande trop alors. :p

Votre commentaire sera contenu dans un span qui se trouvera lui-même dans un span avec la miniature et l'agrandissement correspondants. S'il n'y a pas de commentaire, il faudra quand même regrouper la miniature avec son agrandissement pour homogénéiser le tout.

On obtient donc l'une ou l'autre de ses structures autant de fois qu'on a de photos dans notre diaporama :

<span><img … /><img … /><span>Blabla</span></span>
<span><img … /><img … /></span>

À partir de là, on voit mieux comment agir sur nos éléments.

On veut cacher l'agrandissement qui est, admettons, en deuxième position, quel moyen a-t-on ? On voit qu'il suit immédiatement une image… Affaire à suivre !
Pour ce qui est du commentaire, c'est un span qui suit immédiatement une image, ou encore un span descendant d'un span, au choix !

Une fois que vous avez fait disparaître vos agrandissements et commentaires, essayez de continuer par vous-mêmes.


… …
… … …

Troisième série d'indices :

  • Pour faire apparaître notre agrandissement et notre commentaire, il faudra des expressions différentes.

  • L'agrandissement suit directement une image… vous savez donc comment faire.

  • Et pour faire apparaître le commentaire, on voit qu'on a un élément span dans un autre élément span… Voilà qui ne devrait pas vous poser de problème.

Ensuite, pour ce qui est du style appliqué au texte du span, pas besoin d'aide.


… …
… … …

Correction

Le HTML

Côté HTML, les modifications sont minimes.

Nous aurions aimé nous passer des span, mais puisque nous avons trois éléments à gérer (miniature, agrandissement et commentaire), il nous sera impossible de ne pas les rassembler dans un conteneur.

Il suffisait donc de faire ainsi pour toutes nos images :

…
<span><img src="votre_chemin/1.jpg" alt="Uxmal" /><img src="votre_chemin/1.jpg" alt="Uxmal" /><span>Vue du pied de la grande pyramide</span></span>
<span><img src="votre_chemin/2.jpg" alt="Uxmal" /><img src="votre_chemin/2.jpg" alt="Uxmal" /><span>Vue de la place centrale sur la grande pyramide</span></span>
<span><img src="votre_chemin/3.jpg" alt="Uxmal" /><img src="votre_chemin/3.jpg" alt="Uxmal" /><span></span></span>
<span><img src="votre_chemin/4.jpg" alt="Uxmal" /><img src="votre_chemin/4.jpg" alt="Uxmal" /><span>Un mexicain à l'ombre !</span></span>
…

Vous remarquerez qu'il n'y a de classe ni pour les images, ni pour les span, puisqu'on peut faire sans !

Le CSS

Là, il y avait du boulot ! Allons-y par étapes.

Pour rendre nos agrandissements invisibles, il fallait utiliser le sélecteur de frère adjacent car l'agrandissement suit la miniature :

#diaporama div img + img { display:none; }

Il est bon de noter en passant que si nous avions gardé la classe .grande pour nos agrandissements, il aurait été possible de procéder ainsi :

#diaporama div span .grande { display:none; }

Il faut bien comprendre que ça ne fonctionnerait pas en remplaçant .grande par img puisque dans ce cas-là, la miniature serait aussi sélectionnée en tant que descendant img de span. Et on ne verrait donc plus aucune image !

Pour rendre les commentaires invisibles, c'est le même principe. Le span des commentaires est l'unique descendant span du span conteneur, donc ceci fonctionnerait :

#diaporama div span span { display:none; }

Mais le span de commentaire (et lui seul) est aussi juste à la suite d'une image, donc on pouvait aussi opérer ainsi :

#diaporama div img + span { display:none; }

Pour faire apparaître nos agrandissements, pareil que tout à l'heure !

#diaporama div img:hover + img { … }

Avouez qu'il était facile, celui-là. :)

Enfin, pour faire apparaître nos commentaires, nous n'avons pas le choix. C'est même pour cette ligne que nous sommes obligés d'encadrer nos trois éléments dans un span, car sinon, on ne saurait pas faire apparaître nos commentaires.

Nous sommes donc obligés d'utiliser le sélecteur descendant :

#diaporama div span:hover span { … }

Pour le reste, je pense que ça a été. Je vous donne tout le CSS et quelques explications plus bas.

#diaporama {
	position:absolute;
	width:500px;
	left:50%;
	margin-left:-250px;
	height:500px;
	top:50%;
	margin-top:-250px;
}
#diaporama div img + img,
#diaporama div span span{
	display:none;
}
#diaporama div img:hover + img {
	display:inline;
	position:absolute;
	width:400px;
	left:50%;
	margin-left:-200px;
	height:400px;
	top:50%;
	margin-top:-200px;
	z-index:1;
}
#diaporama div span:hover span {
	display:block;
	position:absolute;
	padding:0px 5px 0px 5px;
	width:490px;
	text-align:center;
	background-color:orange;
	top:500px;
	border-radius:0px 0px 10px 10px;	/* N'oubliez pas les préfixes pour que ça fonctionne sur tous les navigateurs */
}
#diaporama img {
	float:left;
	width:50px;
	height:50px;
}
#diaporama .haut,
#diaporama .bas {
	width:500px;
	height:50px;
}
#diaporama .gauche {
	float:left;
	width:50px;
	height:400px;
}
#diaporama .centre {
	float:left;
	width:400px;
	height:400px;
}
#diaporama .centre .contenu {
	position:absolute;
	width:400px;
	top:50%;
	margin-top:-120px;
	font-family: Tahoma, Geneva, Kalimati, sans-serif; 
	text-align:center;
}
#diaporama a {
	text-decoration:none;
	font-weight:bold;
	color:#888;
}
#diaporama a:hover {
	color:#555;
}
  • J'ai donné un padding à gauche et à droite du span des commentaires pour que l'action de border-radius n'efface rien des premières et dernières lettres.

  • Un border-radius de 10 pixels me paraît convenable, mais une autre valeur irait aussi très bien.

  • J'ai donné une largeur de [largeur du diaporama moinspadding gauche et droite] au span des commentaires pour que la couleur de fond des commentaires prenne toute la largeur du diaporama même quand le contenu fait moins de la largeur du diaporama.

  • C'est tout, je pense que tout le reste coule de source. :-°

Encore un exercice, décidément…

J'espère que vous aimez les commentaires parce que j'ai un exercice spécial pour vous !

On remet ça

Je vous propose d'essayer de modifier le résultat que vous venez d'obtenir pour faire apparaître des commentaires en bas et en haut, en fonction de la miniature survolée.

Le point le plus difficile de cet exercice est le suivant : lorsque l'on met des commentaires en bas, le span augmente vers le bas en fonction du contenu. Mais si on plaçait simplement les commentaires en haut et que certains étaient longs, alors il se pourrait qu'ils débordent sur nos images (puisque le texte s'étend vers le bas). Et ça, nous ne pouvons pas nous le permettre…

Saurez-vous résoudre ce problème ? Voici le modèle à copier (je ne prétends absolument pas présenter une pratique qu'il est souhaitable de trouver dans des diaporamas, je ne fais que vous aider à progresser par le biais d'un exemple concret, et néanmoins intéressant).

À vos marques ! Prêts ? Cherchez !


… …
… … …

Solution

Côté HTML, le seul changement vient des balises span qui contiennent nos trois éléments. Il faut leur donner une classe qui varie. J'ai choisi .distop (display top) pour les miniatures de la moitié nord et .disbot (display bottom) pour les miniatures de la moitié sud.

Côté CSS, ça se corse. Je vais commencer par ce qui est commun à tous nos span conteneurs.

#diaporama div span:hover > span {
	display:block;
	position:absolute;
	padding:0px 5px 0px 5px;
	width:490px;
	text-align:center;
	background-color:orange;
}

On rend les commentaires visibles, on place en absolu, on donne du padding à gauche et à droite, on donne aux commentaires toute la largeur du diaporama, on centre le texte et on ajoute une couleur de fond.

Puis on apporte quelques précisions :

#diaporama div .disbot:hover > span {
	top:500px;
	border-radius:0px 0px 10px 10px;
}
#diaporama div .distop:hover > span {
	bottom:500px;
	border-radius:10px 10px 0px 0px;
}

Côté border-radius, c'est simple. On veut que le span épouse le diaporama, on arrondit donc les coins les plus éloignés en fonction de sa position.

Le plus délicat à trouver était le reste. Quand on place un élément en fonction du bord haut, il s'étendra vers le bas. Et pour qu'un élément s'étende vers le haut, il faut… le positionner en fonction du bas.

D'accord, je reprends.

En positionnant un élément en fonction du haut, on dit à CSS : « la distance entre l'extrémité la plus haute de l'élément et le haut est fixe. S'il a besoin de s'étendre, il s'étendra ou il pourra mais pas vers le haut (donc vers le bas) ».

En positionnant un élément en fonction du bas, on dit à CSS : « la distance entre l'extrémité la plus basse de l'élément et le bas est fixe. S'il a besoin de s'étendre, il s'étendra ou il pourra mais pas vers le bas (donc vers le haut :) ) ».

Super, vous savez maintenant insérer des commentaires !

Vous êtes devenus accrocs aux diaporamas et vous en voulez encore plus ?
Je vais voir ce que je peux faire pour vous rassasier…

Example of certificate of achievement
Example of certificate of achievement