Making a Navigation Bar with CSS

I got the idea to put a horizontal navigation bar on my page by looking at the tutorial on the W3School site here.  Unfortunately, it didn’t exactly work with my page layouts very well because  it uses the “List of Links” method, and uses the html tags of <ul> and <li>. I was using these tags on my page so the layout became very jumbled. Anyway, here is my variation on how to make a navigation bar.

In your permanent css file (for me it is web.css) enter the following code.

#navigation {

list-style-type:none;
margin:0em;
padding:0em;
padding-top:0px;
padding-bottom:0px;
float:right
}

The margin and padding can be changed as you see fit, I used 0 for all for now because I want my navigation bar to float snugly in the right hand corner.

a:link,a:visited
{
font-weight:bold;
color:#FFF9C0;
background-color:#B24376;
text-align:center;
padding:0px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#3C9;
}

You can change the properties such as the color, background color and font weight as you see fit. “a:hover,a:active” show what color you link will turn when you hover the mouse over the link.

make colors of links different than default when you hover

Now, to make the navigation bar appear on every page enter the following code first thing under “<body>”

<div id=”navigation”>
<a href=”index.html”>Home</a>
<a href=”placepics.html”>Place Pictures</a>
<a href=”postsecret.html”>Post Secrets</a>
<a href=”inclass97.html”>In Class Work</a>
<a href=”twitterstory.html”>Twitter Story</a>
<a href=”artexhibits.html”>Art Exhibits</a>
</div>

You can change the link references depending on what type of page you are linking to. I find these work well for the class work we have had so far.

It will appear something like this in the scope of the top of the page.

And a close up:

Advertisements

~ by mlw53 on September 19, 2010.

 
%d bloggers like this: