SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials CSS Navigation Bar

CSS Navigation Bar

nathanael Tutorials Jun 22, 2007

CSS Navigation BarHere I'll teach you how to create the navigation bar below. This has been cross browser and cross OS tested, so functionality shouldnt be an issue. You can view my blog to see this in action

<html>
<head>
<title></title>

<style type="text/css">
#nav {
background-color: #c7ebff;
border: 1px solid #000000;
padding-top: 13px;
padding-bottom: 13px;
}
#nav li {
display: inline;
}
#nav a:link, #nav a:visited {
color: #000000;
padding-top: 13px;
padding-bottom: 13px;
text-decoration: none;
}
#nav a:hover, #nav a:active {
padding-top: 10px;
padding-bottom: 10px;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/img_articles/12083/#">home</a></li>
<li><a href="/img_articles/12083/#">tutorials</a></li>
<li><a href="/img_articles/12083/#">gallery</a></li>
<li><a href="/img_articles/12083/#">downloads</a></li>
</ul>
</body>
</html>

So theres the code, not very difficult to do, but I'll still break it apart.

The First part of the css is

#nav {
background-color: #c7ebff;
border: 1px solid #000000;
padding-top: 13px;
padding-bottom: 13px;
}

Here we set up the id for the whole bar. We tell it the background color, and border (if you wish to have these), and the padding size. If you dont wish to use a bg color or border, you dont really need the padding here. The padding depends on two things; the padding given to the a: and the border size given to the a:. This padding should be a sum of a: padding + a: border. Say you give the a: a border-top of 8px and padding-top of 10px, this padding would become 18px.

#nav li {
display: inline;
}

This is pretty simple, all this does is makes the li display horizontaly, not verticaly. if you want more spacing between your links, all you need to do is add padding-right: size in here.

#nav a:link, #nav a:visited {
color: #000000;
padding-top: 13px;
padding-bottom: 13px;
text-decoration: none;
}
#nav a:hover, #nav a:active {
padding-top: 10px;
padding-bottom: 10px;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
color: #000000;
text-decoration: none;
}

Here we have our links. This is where you set everything for the links, color, border color, border size, padding. For the regular state color, you change the color in a:link and a:visited. for the mouseover color and border color, change the color in a:hover, a:active. Notice the a:link, a:visited has a different padding than the a:hover, a:active. This is because there is no border for this state, so we need to make up the size difference in padding. The a:link, a:visited padding should match the padding of #nav. If you want more space between the link text, and borders, all you need to do is increase the padding.

<ul id="nav">
<li><a href="/img_articles/12083/#">home</a></li>
<li><a href="/img_articles/12083/#">tutorials</a></li>
<li><a href="/img_articles/12083/#">gallery</a></li>
<li><a href="/img_articles/12083/#">downloads</a></li>
</ul>

This is the html used to display the links, just a simple list, with the ul containing the id. Well, thats it, pretty simple for a different look.

subscribe to newsletter