CS06 Lab Episode 7: Revenge of the CSS Navigation Page

Lab 7
Horizontal Navigation Bar Edition
If you would prefer to do the vertical side navigation bar. Click here.
(You only need to do one or the other)

Today is a continuation of CSS coding, so if you need to catch up, here is what we did in Lab 6

This week, we are doing a navigation bar from a list (the thing at the very top of this page). For a detailed tutorial, click here, or go to
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/.

Setup

Just like in last week's exercise, you will have multiple files. This week, we will make your front page (I will call mine index.html, you can call yours whatever you like) and a style sheet (I will refer to mine as style.css, you might have it named differently, and if you have one already, go ahead and continue adding to that one).

index.html (or whatever you name it)

Your index.html should have at least the following:

*Note: style.css is my style sheet's name... change it according to how you have it named!!

Within the <body> and </body> tags type out an unordered list of linked pages you might want to navigate to. Here is what I put in mine:

*If you remember your html, the <a href...> stuff is how you set up links, and as you can guess, these are links to the different lab descriptions for this class.

Now to set up the interesting additions:

*OMG what a change!!!
*An id in CSS is just like a class, the only difference is that ids are unique to a page while classes can be refered to several times in a single page.

That's it for the setup on index.html, I would strongly suggest sprucing up the page; add a background, and some content... something so that it isn't so boring.

style.css (or whatever you named that)

Now it's time to define those nav ids we put in index.html file by putting this info into our style.css file:

#nav {
    margin:0;
    padding:0;
}
#nav li {
    display:inline;
    padding:0;
    margin:0;
}

*inline effectively removes the bullet formating of the list and displays it... inline!! Everything else is a matter of spacing (you can add spacing between list elements if you want just by changing the numbers).

Now for those of you who followed the book, this next step should be familiar. We're going to make the background color of the links:

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
}

*color is the text color (in this case #000 = black) and background is... the background color (some sort of tan green color, you can change it if you want)

To make it a little bigger, as if there were boxes around them:

#nav a:link,
#nav a:visited {
    color:#000;
    background:#b2b580;
    padding:0px 20px 0px 20px
}

*The spacing for the padding tag is for the top, right, bottom, and left, respectively.

Beyond this is making it more stylized, prettier, and ever more presentable. The last chunk of code I will go over is to change the color of the links to highlight which one you are on:

#nav a:hover {
color:#fff;
background:#727454;
}

If you want to see the result of what my page looks like (plus some of the things I did last week) check it out here or just go to the top of this page.
If you would like to add a bit more flair to your navigation bar, click here, or go to http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/ for additional details.

**Keep in mind that although I set most of my margin, padding, and border values to 0, try to mess around with them to get the proper look and style that you want. You can set backgrounds for pretty much everything mentioned here, and if you would like to see the different styles I used, look here (*warning, additional values were set so try to understand them before you use them!!).

*Assignment:

Create a front page that links to at least 3 different pages (your personal page would be one of them, you can simply make dummy pages for the rest) using either CSS navigation scheme mentioned. For an example of what we are looking for, take a look at my CS06 cover page or the top of this page. This lab should get you started on your personal projects, which will be a multipage website of your own design. When you are done, upload the pages onto your CS website.