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 (4ième partie)
Animer la barre de navigation
La barre de navigation ci-dessus utilise elle aussi des spans vides.
Voici le code HTML :
<div class="menu_haut">
<a href="#"><span class="right"></span></a>
<a href="#"><span class="left"></span></a>
</div>
et le code CSS commun aux deux flèches :
.menu_haut a{
display:block;
width:1em;
height:1em;
margin:0 0 0 -5px;
}
.menu_haut a span{
display:block;
width:.1em;
height:.2em;
border-top:.4em solid #C9DDE4;
border-bottom:.4em solid #C9DDE4;
background:#C9DDE4;
overflow:hidden;
}
/* start IE_Mac hide\*/
* html .menu_haut a span{
width:.5em;/*value for MSIE 5.x*/
height:1em;/*value for MSIE 5.x*/
cursor:pointer;
}
* html .menu_haut a span/**/{
width:/**/.1em;/*value for MSIE 6*/
height:/**/0.2em;/*value for MSIE 6*/
}
/* end IE_Mac hide*/
La flèche de gauche utilise :
.menu_haut a span.left{border-right:.5em solid #0A00B0;}
et pour l'animation (Gecko uniquement) :
.menu_haut a:hover span.left{border-left-color:#E9F5FE;}
La flèche de droite :
.menu_haut a span.right{border-left:.5em solid #0A00B0;}
et pour l'animation (Gecko uniquement) :
.menu_haut a:hover span.right{border-left-color:#E9F5FE;}
Les pages suivantes traiteront de style appliqué à une balise span non vide.