Le code HTML
La partie HTML de cet effet est très simple. Par contre du côté du CSS, il faudra trafiquer le tout afin de faire fonctionner l'effet sous Internet Explorer, car comme tout le monde le sait, ce dernier a encore beaucoup de difficulté à bien gérer les standards web. Afin de créer ce bel effet, nous avons ajouté nos liens dans une liste <ul>. Vous verrez par la suite qu'il est très simple de le faire de cette manière sinon il vous sera beaucoup plus difficile de faire l'effet sans liste.<div id="lien">
<ul>
<li><a href="http://www.pckult.net/#" title="Text">Entête du lien
<em>Description du lien</em>
<span>Date d'envoie</span></a>
</li>
<li><a href="http://www.pckult.net/#" title="Text">Entête du lien
<em>Description du lien</em>
<span>Date d'envoie</span></a>
</li>
</ul>
</div>
Le code CSS
Du côté du CSS, afin que l'effet fonctionne sous Internet Explorer, il faut impérativement que la largeur du lien soit la même que la largeur de l'item de la liste. Si vous ne faites pas cela, l'effet ne sera perceptible que lors du passage de la souris sur le lien et non lorsque vous serez votre curseur sera sur un item de la liste.#lien ul {
list-style-type: none;
width: 400px;
}
#liens li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#lien li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #lien li a { /* CSS Hack - Permet de voir l'effet sous IE */
width: 400px;
}
#lien li a:hover {
background: #ffffcc;
}
#lien a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#lien a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}