Vermillion's Simple Navbar Tutorial

Category: CSS, HTML
Reviewed by: Vermillion   
Reviewed on: Nov 24 2008
» Discuss this topic ( Posts)

It's time to decorate this navbar a bit. Feel free to experiment with more things here, like background images.

<style type="text/css">
 
/*Navbar*/
#navbar {list-style:none;}
 
#navbar li {display:inline;
                 float:left;}
 
#navbar li a {text-decoration:none;
                   padding:5px;
                   background-color:#336633;
                   color:#ffffff;
                   font-weight:bold;
                   font-family:Arial, Helvetica, sans-serif;}
 
#navbar li a:hover{}
 
</style>
 
<ul id="navbar">
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
</ul>

background-color:#336633: Adding a green background color.

color:#ffffff: Adding white font to the text.

font-weight:bold: Will make the text bold.

font-family: Arial, Helvetica, sans-serif : Just adding a font style.

Everything I did here was to add some visual, pleasant effects =P.

Your result should be this:
Forums
Latest Articles