| 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 |