Ajout page crédits

Ajout de la page Crédits – mention légales.

Le lien vers cette page est quelque peu atypique.
Il s’agit d’un texte à la vertical.

J’ai donc pris une image représentant le texte à la verticale. On a besoin de la couleur du texte (noir) et de la transparence, j’ai donc pris le format gif avec transparence qui est suffisant dans ce cas.
Le css est utilisé pour décorer le lien avec cette image

#credits a {
display: block;
height:181px; width:11px;
background:transparent
  url('images/credits.gif')
  bottom left no-repeat;
}

puis une autre image en cas de survol de la souris.

#credits a:hover {
display: block;
height:181px; width:11px;
background:transparent
  url('images/credits_h.gif')
  bottom left no-repeat;
}

display:block permet d’afficher comme un bloc ce qui est au format inline à la base, cela nous permet d’avoir l’image entièrement.

L’image étant à la vertical, il a fallu s’arranger pour que la hauteur de l’image ne perturbe pas l’affichage de la page.
Ce détail a été résolu avec un positionnement en absolu de la div qui contient l’image

#credits { position:absolute;
bottom: 10px; left: 100px;
}

(au passage on place l’image où on veut qu’elle soit avec bottom et left)
et en spécifiant au conteneur de cette div un positionnement relatif

#footer { position:relative; }

Le code html associé :

<div id="footer">
 <div id="credits">
  <a href="votre lien"></a>
 </div>
</div>