CSS / 3 columns / header / footer
no javascript, no table, no image
Applying a style to the tag <span>.
An empty <span> in a link (4th part)
Animating the navbar
The navbar on top also uses empty spans.
Here is the HTML code:
<div class="menu_top">
<a href="#"><span class="right"></span></a>
<a href="#"><span class="left"></span></a>
</div>
and the CSS for both right and left:
.menu_top a{
display:block;
width:1em;
height:1em;
margin:0 0 0 -5px;
}
.menu_top a span{
display:block;
width:.1em;
height:.2em;
border-top:.4em solid #C9DDE4;
border-bottom:.4em solid #C9DDE4;
background:#C9DDE4;
overflow:hidden;
}
/* start IE_Mac hide\*/
* html .menu_top a span{
width:.5em;/*value for MSIE 5.x*/
height:1em;/*value for MSIE 5.x*/
cursor:pointer;
}
* html .menu_top a span/**/{
width:/**/.1em;/*value for MSIE 6*/
height:/**/0.2em;/*value for MSIE 6*/
}
/* end IE_Mac hide*/
The span on the left needs:
.menu_top a span.left{border-right:.5em solid #0A00B0;}
and for the animation (Gecko only):
.menu_top a:hover span.left{border-left-color:#E9F5FE;}
The span on the right needs:
.menu_top a span.right{border-left:.5em solid #0A00B0;}
and for the animation (Gecko only):
.menu_top a:hover span.right{border-left-color:#E9F5FE;}
The next pages will deal with applying a style to a non empty span.