Most Popular Posts on Cardeo Design Blog for 2008

#1 Cardeo Minimal WordPress Theme
The free Minimal theme has been my most popular post and WordPress freebie for 2008. Make sure you go download it, if you haven’t already.

#2 Cardeo Minimal Website Template
So you guys like Minimal websites eh? The #2 post for 2008 is a website template based on the Minimal WordPress Theme. Also a free download, go and get it!

#3 How To Create a Single Image CSS Navigation Matrix
This is a tutorial on how to create an image based navigation with only CSS and 1 image. Check out www.apple.com or the demo to see this baby in action.

#4 Cardeo Mini WordPress Theme
This is another free Minimal WordPress Theme that is available for download.

#5 Free Christmas Vector Pack
This was the second of two vector packs I released in 2008. It was a great success and I plan to release more free vector packs in 2009!

#6 How to Add a Twitter Badge to Your Website
This tutorial is a quick explanation on how you can add a custom Twitter badge to your own website.

#7 Cardeo Public WordPress Theme
Public was the second free WordPress theme released in 2008. Like the most of my themes, it features a minimal layout, twitter integration, and flickr photostream integration.

#8 Barack Obama T-Shirts
2008 was the year of Obama. I tried to do my little part by designing some shirts and selling them on zazzle.com. I plan to donate the proceeds of the sales once a check is requested.

#9 Free Music Vector Pack
The first of two free vector packs I released in 2008. A rock n’ roll theme for all the Cardeo readers.

#10 Cardeo Standard WordPress Theme
Last but not least, my first WordPress theme. Cardeo Standard is a free theme based on Swiss graphic design and typography

Step 01 – Creating your Navigation Matrix Image

For this tutorial I have supplied you with the nav image. However, keep these points in mind for making your own matrix. It’s generally a good idea to keep your dimensions simple. For example, each buttons is 100px wide by 25px high. This will just make things less confusing when you are mapping out the button coordinates in your style sheet. When you are creating your image in photoshop, set the width to the total width of the nav bar. For our example that would be 300px wide.

You navigation matrix is going to be made up of four click-states which are: static, mouse over, mouse down, and selected. When you’re creating your image, we’re going to stack each state. Your total document height would be 100px (4 x 25px buttons). Your states should be stacked in the below order:

static = unselected button with no mouse over.
mouse over = when you roll the cursor over the button
mouse down = when you click on the button
selected = the selected button when you are on a specific page

Once you have your image ready, or please use the example for this tutorial, save it out and we are ready to move onto some CSS coding.

Step 02 – Coding the CSS for the Matrix

The first thing we need to do is a define a container for the entire navigation. Within this container we will define the dimensions of the bar, it’s position and the location of the matrix image. We’ll also setup the main styles which will be inherited to each of the nav buttons. The main container is set to position:relative so that if the window size changes, the nav bar moves with it. The inner buttons or li’s are set to position:absolute so that they always appear in the same location within the nav container. We’ve also set the li link to display as a block so that the entire height of the button is revealed.

Let me back up for one minute. I’m going to use an unordered list to setup the nav bar. An ID will be set for the entire bar, as well as, each individual button. There are other ways you could set this up but an unordered list makes the most sense to me.

#nav {
 width: 300px;
 height: 25px;
 margin: 0;
 padding: 0;
 position: relative;
 background: url(nav.gif)  no-repeat;
}

#nav li {
 margin: 0;
 padding: 0;
 position: absolute;
 list-style: none;
 top: 0;
}

 #nav a {
 background: url(nav.gif) top left no-repeat;
}

#nav li, #nav a {
 height: 25px;
 display: block;
}

Our next step is to setup an ID for each button and designate the coordinates for each button. To keep the length of this post manageable, I’m only going to do this for one button in this example. For the other buttons, you should apply the same styles, changing the coordinates for each button appropriately.

The first thing we need to do is setup an ID for the Home button. Let’s call it #nav-home. Here we will set the width of the button and it’s location as 0 (top left of the nav container).

Next we will setup the location for the selected Home button. This is where the body ID of home comes in. We’re telling the browser only on the Homepage to display the home button as selected (body#home #nav-home a {}). We want to have the 4th line of the nav image displayed so we set it to -75px (measured from the top left corner of the entire image. I’ve also changed the text color to #333 so it shows up against the light grey background that is used for the selected state.

Next we will setup the coordinates for the Static Home button. We want the top line of the nav matrix image to appear so the coordinates are set to 0 top and 0 left.

Next for the Mouse Over State we will want to display the second line of the nav matrix. The coordinates are 0 left and -25 top.

The final step is to setup the Mouse Down state where we want to display the third line of the nav matrix. The coordinates are 0 left and -50 top. That’s it for the home button. Check out all the CSS code below. Like I said, I’m not going to list all the code for each button. You can check that out in the source stylesheet. I will however list all the coordinates below this code example for quick reference.

#nav-home {
 width: 100px;
 left: 0;
}

body#home #nav-home a {
 background-position: 0 -75px;
 color: #333;
}

#nav-home a, #nav-home a:link, #nav-home a:visited {
 background-position: 0 0;
}

#nav-home a:hover {
 background-position: 0 -25px;
}

#nav-home a:active, #nav-home a:active {
 background-position: 0 -50px;
}

About & Contact Button Coordinates

About Static: 0 top -100 left
About Mouse Over: -25 top -100 left
About Mouse Down: -50 top -100 left
About Selected: -75 top -100 left (change your body ID to “about”)

Contact Static: 0 top -200 left
Contact Mouse Over: -25 top -200 left
Contact Mouse Down: -50 top -200 left
Contact Selected: -75 top -200 left (change your body ID to “contact”)

Step 03 – Styling Your Button Text

The last thing we need to do is add a couple of styles for the button text. Enter whatever text you want to appear on each button within each HTML document between the li tags for each button. For this example we are using Home, About, and Contact

I’ve set the line-height of the text to 25px which is the same as the button height. This is done to allow the text to center perfectly vertical within the button box. I’ve also set the text-align to center so the text is horizontally centered within each button. At a minimum those are the styles you need to use, feel free to add more.

a, a:link, a:visited, a:hover {
 font-size:10px;
 line-height: 25px;
 color: #fff;
 text-align: center;
}

View Demo | Download Source Files

Well that is probably my most complicated post to date. I hope my explanation was straight forward but if you have any questions, please post them below.