definetly not the best way, but for a beginning coder, probably the easiest to
understand. In the end using a sprite with separate images for each also takes a lot of time (even in photoshop). I recommend either making the entire page into a psd (if your going to go heavy on the design) or just sticking with good old html/css, and making the text in html (nothing special about what you did in the image). Once again, I would highly advice you stick with html/css before moving onto psds and images like you tried out here.
Once you get the hang of that, you can move onto sprites
http://spritegen.website-performance.org/ which are primarily used to stop flickering images on hover and psd to html
http://vandelaydesign.com/blog/desig...html-services/ and image maps
http://www.w3schools.com/tags/tag_area.asp
I used an html5 doctype but not eric mayer's reset. That's important. You can google the pros and cons to not using it.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Why make something complicated?</title>
<style type="text/css">
* { margin: 0; padding: 0; }
/* not eric mayer html5 reset */
body.page {
font-family: Arial, sans-serif;
font-size: 12px;
}
.nav {
_zoom: 1;
}
.nav li {
display: inline;
float: left;
height: 100%;
}
.nav li a {
display: block;
height: 100%;
}
#nav-bar {
background: url('nav-bar.png') 0 0 no-repeat;
width: 506px;
height: 51px;
}
#nav-bar .nav { height: 100%; }
ul#site-links { width: 388px; float: left; }
#site-links li { margin-left: 1px; }
#site-links li:first-child { margin-left: 0; }
#site-links li a.about { width: 78px; }
#site-links li a.music { width: 86px; }
#site-links li a.show_dates { width: 128px; }
#site-links li a.contact { width: 92px; }
ul#social-follow { width: 118px; float: right; }
#social-follow li { margin-left: 3px; }
#social-follow li:first-child { margin-left: 6px; }
#social-follow li a { width: 33px; }
</style>
</head>
<body class="page">
<div id="nav-bar">
<ul id="site-links" class="nav">
<li><a href="#" class="about"></a></li>
<li><a href="#" class="music"></a></li>
<li><a href="#" class="show_dates"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
<ul id="social-follow" class="nav">
<li><a href="#" class="youtube"></a></li>
<li><a href="#" class="facebook"></a></li>
<li><a href="#" class="tumbler"></a></li>
</ul>
</div>
</body>
</html>
here's what it will look like (I recommend Chrome's developer tool), it's inspect element is essentially an upgrade as compared to firebug
IE7 screenshot is the same, though it will not work in ie6 due to the :first-child selector, but I don't really care about that browser anymore
Before you post, read our: 
