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.

visites : 367546
à 12:25:44 utc+2 le 24/06/2017