Previous | Home | Next |
Navigation is the essential requirement for any web site. With CSS you can transform good-looking navigation bars. A navigation bar is basically a list of links, so using the <ul> and <li> elements
<ul> <li><a href="default.aspx">Home</a></li> <li><a href="Home.aspx">News</a></li> <li><a href="contact.aspx">Contact</a></li> <li><a href="about.aspx">About</a></li> </ul>
Now let's remove the bullets and the margins and padding from the list-
ul { list-style-type:none; margin:0; padding:0; }
Vertical Navigation Bar
ul { list-style-type:none; margin:0; padding:0; }
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
li { display:inline; }
Floating List Items
li { float:left; } a { display:block; width:60px; }
Previous | Home | Next |