Vermillion's Simple Navbar Tutorial

This is the output from the last part:

• Element 1
• Element 2
• Element 3
• Element 4

Now it's time to put all of them in a line.

<style type="text/css">
 
/*Navbar*/
#navbar {list-style:none;}
 
#navbar li {display:inline;
                 float:left;}
 
#navbar li a {text-decoration:none;
                   padding:5px;}
 
#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>

list-style:none: With this, you will eliminate the small dots that appear at the left of every list element.

display:inline: Instead of creating automatic line breaks after every li element, this will collapse all of them in only one line.

text-decoration:none: I'm using it to get rid of the underlines on the links.

padding:5px: To 'expand' the links by 5 pixels, so they won't be too close to each other.

You should have the following result to this point:

• Element 1
• Element 2
• Element 3
• Element 4