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 (3^rd part)

Animating the menu on the right

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

<span> in the menu1 on the right

Here is the HTML code:

<div class="men1">
<a href="#"><span></span> Link</a>
</div>

and the CSS displaying and animating the link:

#maincol .men1 a{
background-color:#D2E1FB;
color:#0A00B0;
margin-left:8px;
padding:8px 5px 8px 0;
text-decoration:none;
font-family:times,sans;
font-weight:800;
font-size:.95em;
width:8.5em;
display:block;
}
#maincol .men1 a:hover{
background-color:#A9CFFE;
color:#FFF;
padding-right:13px;
margin:0;
}

The following CSS will set the borders:

#maincol .men1 a:hover span{
border-top:8px solid #A9CFFE;
border-bottom:8px solid #A9CFFE;
border-left:8px solid #0A00B0;
}

The padding for the span is set to 8px for MSIE and 5px for the other browsers:

#maincol .men1 a span{
padding-right:5px;
}
* html #maincol .men1 a{
padding-left:8px;
}

MSIE will need some more hacks when hovering:

* html #maincol .men1 a:hover span{
margin:-8px 0 0 -16px;
}
* html #maincol .men1 a:hover{
text-indent:8px;
}

Many variations can be imagined (with adapted filters for MSIE):

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

Next

Right Column