Lab 7 CSS Navigation Page

Lab 7
Vertical Navigation Bar Edition
If you would prefer to do the horizontal 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 to the right side).

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:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
   (insert your navigation links here)
</ul>
<div class="content">
    (insert your content here)
</div>
</body>
</html>

*Note: style.css is my style sheet's name... change it according to how you have it named!!
*The <div> tag is used here to separate what is the list of links from the rest of the page content. I knew it had a use!!!

Within the <ul> and </ul> 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 mind blowing additions!!!!

*(modified 11/24: li does not need it's own id)
*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 in between the <div> and </div> tags... something so that it isn't so boring.

style.css (or whatever you named that)

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

#nav {
    margin:20;
    padding:0;
    width:10%;
    float:left;
    list-style:none;
}
#nav li {
    padding:0;
    margin:0;
}
div.content{
    padding: 0;
    margin: 0;
    width: 80%;
    border:0;
    float: left;
}

*float:left aligns the navigation bar to the left side of the page. Since <div> shows up second, it is the second furthest thing on the left
*list-style:none ensures that the bullet points of the list do not show up. You may choose to exclude that line if you want the bullet points.
*The width of the navigation bar is set to 10% and the content area is set to 80% to allowing the remaining 10% of the page to reasonably space the two sections apart. You can set specific sizes instead of percentages if you want. Everything else is also a matter of spacing (you can add spacing between list elements if you want just by changing the numbers of padding and margin).

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 an example of this in action, look at either the top of this page or the lab 5 Thunderbird setup page.

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