Non-rectangular links

• ONE
• TWO
• THREE
• FOUR
• FIVE
• SIX
• SEVEN
• EIGHT
• NINE

Information

Continuing the theme of no active borders we now have the non-rectangular links.

These links are crosses and there is no overlapping of adjacent links. Try it.....

Each link only occupies its coloured cross.

The background and color will change on hover and also on active/focus.

AND it's all done with just css.

I think I will call this the 'Nicholls Dotted Line Replacement Technique' or:

=========================

ul#off {list-style-type:none; padding:0; margin:0; width:360px; height:360px; margin:1em auto; position:relative;}
ul#off li {display:block;}
ul#off a {display:block; width:0; height:0; position:absolute; text-decoration:none; font-size:1em; line-height:40px;}

ul#off a.one {top:0; left:80px;}
ul#off a.two {top:40px; left:160px;}
ul#off a.three {top:80px; left:240px;}
ul#off a.four {top:80px; left:40px;}
ul#off a.five {top:120px; left:120px;}
ul#off a.six {top:160px; left:200px;}
ul#off a.seven {top:160px; left:0;}
ul#off a.eight {top:200px; left:80px;}
ul#off a.nine {top:240px; left:160px;}

ul#off a em.top {display:block; font-style:normal; width:40px; height:40px; color:#000; position:absolute; top:0; left:40px; cursor:pointer;}
ul#off a em.middle {display:block; font-style:normal; width:120px; height:40px; color:#000; position:absolute; top:40px; left:0; cursor:pointer; text-align:center; color:#fff;}
ul#off a em.bottom {display:block; font-style:normal; width:40px; height:40px; color:#000; position:absolute; top:80px; left:40px; cursor:pointer;}

ul#off a.one em {background:#666633;}
ul#off a.two em {background:#669966;}
ul#off a.three em {background:#669999;}
ul#off a.four em {background:#6699CC;}
ul#off a.five em {background:#6699FF;}
ul#off a.six em {background:#9999FF;}
ul#off a.seven em {background:#9999CC;}
ul#off a.eight em {background:#999999;}
ul#off a.nine em {background:#999966;}

ul#off a:hover {color:#c00;}
ul#off a:hover em {background:#000; color:#fc0;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#FF66FF; color:#000;}