Creating a CSS layout from scratch : Subcide

11. The Navigation (arg!)

There's a lot of funky CSS in this chapter, its not imperative that you understand exactly what each bit of CSS does, just that you are able to modify this css to do what you want for other websites, which is basically changing heights widths and images. However i'll do my best to explain the code.

Lets start out easy. Remove the red background in the css, and show the navigation by removing the "hidden" class on the definition list.

The method of image rollovers we are going to use for this menu is a 100% CSS solution. The basic premise behind it is to position the items in a definition list next to each other (side by side) hide the text on them, and use CSS to change the background image depending on what state the button is in (rollover, normal, or selected).

For each of the 4 nav items we need to create an image like the one above. The first 3rd of the image is the normal state, the second is the mouseover state, and the third is the selected state. The animated gif below shows how this will work:

Hopefully you have some kind of understanding of how this works from the diagram above. Lets make our 4 nav images.
Save them in /images/nav/

Now i'm going to do my best to explain the CSS behind this block by block, bare with me.

Replace your #main-nav rule with the code below:

/* Main Navigation */

#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }

This sets the main-nav div height to 50px, and strips all margins from the datalist.

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

This is a hack that does 2 things, sets the left padding of the main-nav to 11px (so its bumped in slightly like the design shows), and fixes a bug on IE5/mac.

#main-nav dt { float: left; }

This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other.

#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	padding: 50px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

Sets the link to the same dimensions as its surrounding container, and hides the text using the overflow property.

#main-nav dt a:hover {
	background-position: 0 -50px;
}

Sets the background position to move up 50px when a link is hovered.

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

Sets the individual widths of each nav item, and the paths to each image.

Now if all your images are named as they are above, and are saved in the correct place, your navigation should work.

Last thing we need to do to make the navigation work, is to get the selected button states to show up when you are on the corresponding page.

We need to add some new css, and modify some existing css to achieve this. Add this CSS below the rest of your navigation CSS:

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
	background-position: 0 -100px;
}

This large CSS selector checks to see what class the body tag has, and then sets the background position of the correct navbar. So if you wanted the about navbar to be selected, you would set a class="about" on the body tag. Lets do that now:

<body class="about">

Now the problem we have, is that we also want the header image to change based on what section we are viewing. So we need to modify the #header rule like so:

body.about #header {
	height: 150px;
	background: #db6d16
		    url(../images/headers/about.jpg);
}

Now when you create pages for your other sections, you'd just change the class on the body from about, to say, contact, set up a css rule pointing to the correct header image, and you're done.

Subcide

Creating a CSS Layout from scratch

11. The Navigation (arg!)