This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
This is the third (and last) in a set of lessons showing you how to create a simple CSS-driven layout. If you missed the first two lessons, you can find them and . Otherwise you are almost certain to become confused.
Instant Replay
Okay, let's recap.
Here's what we've created so far.
We’ve created this simple, CSS-driven layout with enough content to make it work. It validates. It has decent (not awe-inspring) typographical color schemes. If you wanted to, you could take it right now and make a functional Web site with it by doing nothing more than changing out the HTML content. Seriously. You wouldn’t blow anyone away with it, but that’s not the point. It works.
But if you’re like me, you always want more. The obvious next step is to get rid of those boring text links in the sidebar. Let’s make some buttons out of them, shall we?
Creating a Vertical Navigation List
We’ve already done this in Lesson 11, when we created a horizontal navigation scheme for our first set of test pages. This one will actually be easier. Why? Because vertical lists are easier to design than horizontal.
Like our first navigation scheme, this one is adapted from a scheme originally provided by Russ Weakley.
We won’t need to touch our HTML structure. Heck, we’ve already got the #navlist ID to use!
Here’s the first bit. Add this to your layout.css CSS file. Put it at the bottom.
/*** Navigation ***/
#navlist {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
You probably understand this by now, but let’s break it down anyway.
The margin and padding selectors eliminate the default margins on the list items. (Right now they’re pushed unpleasantly to the left side of the display, but we’re going to fix that shortly.) The list-style-type selector eliminates the bullets. The font-family selector changes the font to an elegant set of serifs.
Next, add this under the code you’ve just pasted in:
#navlist a {
display: block;
padding: 8px;
width: 160px;
background-color: #27408b;
border-bottom: 1px solid #eee;
margin-left: 5px;
}
This changes the appearance of the list of links. We’ve changed each to a block-level element, used a margin to provide a bit of space between the list and the left-hand border of the browser display, added a little padding, set a width of 160 pixels, added the same medium-dark blue color we used in the heading, and added a gray border to set the buttons off a bit. (The default blue of the links is now virtually lost in the blue of the link "buttons", but that’s going to change.)
More about block and inline elements.
Let’s make that color change now.
Add this code underneath what you pasted in a moment ago:
#navlist a:link, #navlist a:visited {
color: #eeeeee;
text-decoration: none;
}
That changes things a bit. Now the link and visited states of the links are light gray in color (the same as the border, which makes for some color consistency), and the links have no lines under them.
Last stop. Paste this in underneath what you just pasted.
#navlist a:hover {
background-color: #b2dfee;
color: #27408b;
}
Here we’ve changed the hover state. We’ve changed the background color to the same as the background of the #maincontent area of the page (more color consistency), and changed the font color to match the darker blue of the heading and the regular background color (how consistent can you get?).
Here’s what it should look like.
This is quite a simple navigation list. You can play with the colors, add some borders (such as the outset and inset borders we added in the previous lessons), play with the fonts, the sizing, whatever works for you. Have fun with it.
