CSS / 3 colonnes / en-tête / pied de page
pas de javascript, pas de tableau, pas d'image
Appliquer un style à une balise <span>.
Un <span> vide dans un lien (3ième partie)
Animer le menu de gauche
Les règles placées dans l'ordre, voici le lien de la page précédente.
<span> dans le menu1 à droite
Voici le code HTML :
<div class="men1">
<a href="#"><span></span> Lien</a>
</div>
et les règles CSS qui affichent le lien et l'animent :
#maincol .men1 a{
background-color:#D2E1FB;
color:#0A00B0;
margin-left:8px;
padding:8px 5px 8px 0;
text-decoration:none;
font-family:times,sans;
font-weight:800;
font-size:.95em;
width:8.5em;
display:block;
}
#maincol .men1 a:hover{
background-color:#A9CFFE;
color:#FFF;
padding-right:13px;
margin:0;
}
Les instructions CSS suivantes vont créer les bordures :
#maincol .men1 a:hover span{
border-top:8px solid #A9CFFE;
border-bottom:8px solid #A9CFFE;
border-left:8px solid #0A00B0;
}
Le remplissage à l'intérieur (padding) pour la balise span est fixée à 8px pour MSIE et 5px pour les autres navigateurs :
#maincol .men1 a span{
padding-right:5px;
}
* html #maincol .men1 a{
padding-left:8px;
}
MSIE aura besoin de quelques filtres supplémentaires pour régir quand on passe le curseur au dessus du lien :
* html #maincol .men1 a:hover span{
margin:-8px 0 0 -16px;
}
* html #maincol .men1 a:hover{
text-indent:8px;
}
De nombreuses variations sont possibles (avec des filtres adaptés pour MSIE) :
Les pages suivantes traiteront des autres méthodes pour affecter un style et pour animer le lien.