CSS / 3 columns / header / footer
no javascript, no table, no image
This page uses CSS. If you can see this message, CSS is not enabled in your browser options.
The page will not appear as intended.
no javascript, no table, no image
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;}
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.
Right Column
visits: 491482
at 10:51:55 utc+ on Fri Mar 29, 2024