CSS / 3 columns / header / footer

Home Menus Page Hacks CSS/PHP CSS PopUps Span Debugging CSS En français Contact

Applying a style to the tag <span>.

An empty <span> in a link (2^nd part)

Animating the menu on the right

Rules and hacks in place, we can animate the link of the previous page.

By modifying colours :

div.menu_right a:hover{background-color: #0A00B0;color: #FFF;}
div.menu_right a:hover span.left{border-right-color: #0A00B0;}
div.menu_right a:hover span.right{border-left-color: #0A00B0;}

By modifying aspect:

div.menu_right2 a:hover{background-color: #0A00B0;color: #FFF;width: 9.6em;font-weight: bold;}
div.menu_right2 a:hover span.left{border-right: 20px solid #0A00B0;}
div.menu_right2 a:hover span.right{border-left: 20px solid #0A00B0;}

An empty <span> in the menu on the left

Here is the HTML code of one line:

<a href="#"><span class="left"></span> Link</a>

The CSS code used to display the link:

#maincol .menu_left 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;/*width problem with MSIE 5.x*/
}
/* start IE_Mac hide\*/
/*hacks that cannot be inline*/
* html #maincol .menu_left a{
text-indent: .6em;
}
/* end IE_Mac hide*/

Let's animate when the pointer hovers the link:

#maincol .menu_left a:hover{
background-color: #A9CFFE;
color: #FFF;
}

Then let's apply the code to make the span appear (with MSIE, filters must overwrite the rules):

#maincol .menu_left a span.left{
background-color: #D2E1FB;
padding-left: .3em;
margin-right: .3em;
}

/*filter for MSIE, cannot be set inline
Thus the display below won't be correct*/
* html #maincol .menu_left a span.left{
padding-left: 0;
}
* html #maincol .menu_left a:hover span.left{
display: block;
height: 1%;
position: absolute;
margin-left: -.6em;
padding-left: .3em;
}

We can also change (cannot be set inline) colours by adding to the stylesheet:

#maincol .menu_left a: hover span.left{
background-color: #0A00B0;
}

The next pages will deal with the other methods to apply a style and animate a link.

Next

Right Column