Arrow to tab

Welcome to FreeCSS.info. Your source for free css templates and wordpress themes

This is the navigation which is used in the free css template: Green and Brown Template.

Navigation Demo

The HTML

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">CSS Templates</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">CSS Templates</a></li>
</ul>
</div>

The CSS

<style type="text/css">
#navcontainer ul{
margin:0;
padding-top:5px;
height:37px;
background:url(http://freecss.info/wp-content/uploads/2008/04/navbg.gif) repeat-x top;
border-bottom:3px solid #3e3128;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
font-size:11px;
font-weight:bold;
color:#b33b2d;
text-transform:uppercase;
text-align: center;
}

#navcontainer a
{
color:#b33b2d;
text-decoration: none;
display: block;
padding-bottom:10px;
padding-top:7px;
padding-left:20px;
padding-right:20px;
margin-left:3px;
text-decoration:none;
margin-right:3px;
background:url(http://freecss.info/wp-content/uploads/2008/04/arrow.gif) bottom center no-repeat;
}
#navcontainer a:hover { 
background:#3e3128;
color:#fff;
 }
</style>

The Images Used

Bookmark It

Add '<span>Arrow to</span> tab' to Del.icio.us

Add '<span>Arrow to</span> tab' to reddit

Add '<span>Arrow to</span> tab' to Stumble Upon

Add '<span>Arrow to</span> tab' to Twitter

Comments Posted

Stealth- April 25th, 2009 at 3:46 pm

You seem to have an aeeor in your CSS. for some reason youve added html tags to the links.
admin- April 25th, 2009 at 5:01 pm

Sorry about that. It is a problem I get with wordpress.