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.

visits: 497382
at 1:45:28 utc+ on Thu Jun 12, 2025