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 (2ième partie)
Animer le menu de droite
Les règles et hacks en place, on peut animer le lien de la page précédente.
En modifiant les couleurs :
div.menu_droite a:hover{background-color: #0A00B0;color: #FFF;}
div.menu_droite a:hover span.gauche{border-right-color: #0A00B0;}
div.menu_droite a:hover span.droite{border-left-color: #0A00B0;}
En modifiant l'aspect :
div.menu_droite2 a:hover{background-color: #0A00B0;color: #FFF;width: 9.6em;font-weight: bold;}
div.menu_droite2 a:hover span.gauche{border-right: 20px solid #0A00B0;}
div.menu_droite2 a:hover span.droite{border-left: 20px solid #0A00B0;}
La balise <span> du menu de gauche
Voici le code HTML d'une ligne :
<a href="#"><span class="left"></span> Lien</a>
Voici le code CSS correspondant à l'affichage du lien :
#maincol .menu_gauche a{
background-color: #D2E1FB;
border: 1px solid #000;
color: #0A00B0;
display: block;
padding: 4px 3px 5px 15px;
margin: -1px 0 0;
text-decoration: none;
font-weight: 800;
width: 7.8em;/*problème de largeur avec MSIE 5.x*/
}
/* caché pour IE_Mac début\*/
/*hacks qui ne peuvent être inline*/
* html #maincol .menu_gauche a{
text-indent: .6em;
}
/* fin - IE_Mac reprend sa lecture*/
On anime quand le pointeur passe au dessus du lien :
#maincol .menu_gauche a:hover{
background-color: #A9CFFE;
color: #FFF;
}
On fait apparaître span (avec MSIE, il faut que le filtre suive) :
#maincol .menu_gauche a span.left{
background-color: #D2E1FB;
padding-left: .3em;
margin-right: .3em;
}
/*filtre pour MSIE, ne peut être mis inline
L'affichage ci-dessous est donc incorrect*/
* html #maincol .menu_gauche a span.left{
padding-left: 0;
}
* html #maincol .menu_gauche a:hover span.left{
display: block;
height: 1%;
position: absolute;
margin-left: -.6em;
padding-left: .3em;
}
On peut aussi changer (ne peut être mis inline) sa couleur en ajoutant à la feuille de style :
#maincol .menu_gauche a:hover span.left{
background-color: #0A00B0;
}
Les pages suivantes traiteront des autres méthodes pour affecter un style et pour animer le lien.