In these set of Video Tutorials we go over how to convert a design into and XHTML and CSS website. These videos introduce what is known as the “wire-frame” of the website or the layout and logical blocks such as header, navigation, sidebars, and footer.

Video 1. Logical web design deconstruction.

Video 2. Slicing the blocks using Photoshop.

Video 3. Adding the XHTML / CSS to Wireframe.

Video 4. Finishing touches to Wireframe.

The following tutorial will show web designers how to create a horizontal based css menu that uses images for the different button states rather than text-based css menus. There are several methods of doing so, I am just going to show you one. Feel free to play with the code to come up with something that works for you. Here goes.

Step 1: Create the XHTML for our menu.

CSS menus are usually always created using unordered lists. We will first create an unordered list with 4 list items. Each list item contains a link which will go to one of our four pages.

Home
Clients
Portfolio
Contact

This produces a simple list which looks like this:

Step 2: Make it horizontal

You’ll notice that lists by default are vertical (they stack on top of each other). That is not what we want. We are going to do a few things to fix this. 1st we’ll float the list items to left left, which makes them all go to the same line. Then we’ll take away the “bullet” from before them. Lastly we give each list item a 25px margin on the left side, to space them out a bit. I like turning borders on when I’m mocking lists up so that I can see the bounding box the list items take up. We will remove the border later on. Here is the CSS code that does that.

#mainMenu{
	width:800px;  /*---Give our UL a width ---*/
	list-style:none;  /*--- Makes the bullets go away ---*/
	margin:0;  /*--- Take out any default margin on the UL tag ---*/
	padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

#mainMenu li{
	float:left;  /*--- Make the list go horizontal ---*/
	margin-left:25px;  /*--- Give spacing in between list items ---*/
	border:1px solid red;  /*--- A temporary border  ---*/
}

Here is what that should look like:

Step 3: Add dimensions to our list item buttons

We need to add a width and height to our list item buttons to make them the same size as the actual images that are going to be used. This tutorial assumes that you already have your buttons created and that the buttons have three different states (normal, over, down)

The buttons this menu uses are all the same size and width, and look like this:

Our images are all 149 wide, by 69 tall. So the CSS code to make our menu do that is like so:

#mainMenu li a{
	display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
	width:149px;  /*--- Height of buttons ---*/
	height:61px;  /*--- Width of buttons ---*/
}

Note that if your buttons are not all the same width, you will have to add explicit widths to each button later on…

We now should have something like this:

Step 4: Add our images to each button

If you look back up at Step 1, you’ll notice that each of our li tags have a id associated with them. This allows us to give each one of our list items anchor tags a separate background image using CSS. This is what we’ll do next.

#mainMenu li#home a{
	background: url(images/home.png) no-repeat;
}

#mainMenu li#clients a{
	background: url(images/clients.png) no-repeat;
}

#mainMenu li#portfolio a{
	background: url(images/portfolio.png) no-repeat;
}

#mainMenu li#contact a{
	background: url(images/contact.png) no-repeat;
}

This should give us something that looks like this:

Step 5: Hide Text, Make Rollovers work

This step is going to make our menu finally start to work. First we are going to remove the red border from our list item tag by deleting the following line of code from our #mainMenu li selector

	border:1px solid red;  /*--- A temporary border  ---*/

Okay, border gone. Next we’ll add the hover or “over” button states to our CSS code. We do this with what are known as “pseudo” selectors. They look like the following and simply have the :hover pseudo selector state. These rules are in addition to the rules in step 4.

#mainMenu li#home a:hover{
	background: url(images/home-over.png) no-repeat;
}

#mainMenu li#clients a:hover{
	background: url(images/clients-over.png) no-repeat;
}

#mainMenu li#portfolio a:hover{
	background: url(images/portfolio-over.png) no-repeat;
}

#mainMenu li#contact a:hover{
	background: url(images/contact-over.png) no-repeat;
}

That should make our menu function, and the rollovers should now work

Step 6: Housecleaning, and make the “down” or active state work.

If you are familiar with Floating, (float:left) which we did to our list items to make them all be in a horizontal line, you will know that when we float an element, it gets taken out of the normal document flow. And any elements that are below are list will be mis-aligned! This is a problem that we have to fix. I’ve added a couple of borders to our “ul” tags and the “li” tags to illustrate what I’m talking about.

This first image is simply how our menu looks with a red border on the UL and a green border on the LI tags. Notice that the UL tag does not fully encompass the LI tags which hold our images. This is a problem. Since we floated them left, they were removed from document flow, thus they are not “contained” inside of our UL anymore.

In order to fix this, we have to do what is known as “clearing” the float. There are also several method of doing this. I’m going to illustrate just one. We add a break tag after the last List Item tag in our XHTML we created in step 1 and give it a class like so:

Then we have to add the appropriate CSS rule to make the clear work, like so:

.clear{
	clear:both;
}

We opted for the class attritube (.) instead of the id attribute (#) which we have been using thus far. We did this because we can have multiple classes on a single page, and we may have to clear the float on some other elements in our page design. Remember we can only use ID’s once, but we can use classes as many times as we want.

So now after adding those little tweaks are UL actually now contains our List Items and should look like this.

Finally:
In order to make the “down” or “selected” or “active” (however you want to call it) state work we add some additional code to our XHTML in Step 1, and add the corresponding CSS code. We are going to give the current page link a class of “current”, and add a custom cursor so current button will show a pointer instead of a hand when rolled over!

We are assuming we are currently viewing the “Portfolio” page. We first turn this:

Portfolio

into this:

Portfolio

Then we add the following CSS:

#mainMenu li#home a.current{
	background: url(images/home-down.png) no-repeat;
	cursor:default;  /*--- Show pointer instead of hand cursor for the current page---*/
}

#mainMenu li#clients a.current{
	background: url(images/clients-down.png) no-repeat;
	cursor:default;
}

#mainMenu li#portfolio a.current{
	background: url(images/portfolio-down.png) no-repeat;
	cursor:default;
}

#mainMenu li#contact a.current{
	background: url(images/contact-down.png) no-repeat;
	cursor:default;
}

And we are done! You should now have a fully functioning CSS menu with 3 different states.

Modifications

There are several things you could do to customize this menu. If you had only two states of buttons a “normal” and “over” you could change the menu around so that your “current” page displayed the “over” state images instead of a third “down” state image. You would simply group selectors like so in order to accomplish that.

These rules:

#mainMenu li#portfolio a:hover{
	background: url(images/portfolio-over.png) no-repeat;
}

#mainMenu li#portfolio a.current{
	background: url(images/portfolio-down.png) no-repeat;
	cursor:default;
}

Would become (respectively):

#mainMenu li#portfolio a:hover, #mainMenu li#portfolio a.current{
	background: url(images/portfolio-over.png) no-repeat;
}

#mainMenu li a.current{
	cursor:default;
}

If you had different sized buttons you would have to explicitly declare the sizes for the buttons in the css rules that reference the image. Assuming we are using our 3 state menus and lets say that our portfolio button 200px wide, and 69 high, the following current CSS rule for the portolio button:

#mainMenu li#portfolio a{
	background: url(images/portfolio.png) no-repeat;
}

Would need to be changed in order to have the height and width like so:

#mainMenu li#portfolio a{
	background: url(images/portfolio.png) no-repeat;
	height:69px;
	width:200px;
}

You would do that for the height and width for each of your separate buttons.

It’s a lot of code, but creates super clean, validating XHTML!

Click here to download all the Images, CSS, and XHTML files.