CSS: Making these navigation "picture"/logo links into normal html link

Question

Please see http://jeaffreygilbert.com/workatplayheader.html

and the accepted question answer http://stackoverflow.com/questions/3791692/css-how-to-make-this-topheader

As you can see all links(services, toolbox, and so including the work[at]play logo + contact us) is in this:

I wish to have normal html links.. so I have normal services. And it have anything to do with the sprite-nav.png.

Answer 1

If you don't want to use CSS sprites, but instead use that nav bar as a whole image, then u can use map tag to create a map over that image with links to separate pages. Here comes an example:

<map id="headermap" name="headermap">
  <area shape="rect" coords="43, 57, 119, 97" href="services.html" alt="Go to services" />
  and so on...
</map>
<img src="07jVk.png" alt="" usemap="#headermap" />

Well, I'm not sure if I completely understand your question, but I hope it's what you're looking for.

For detailed information about map, please refer to W3Schools website.

Answer 2

Those already HMTL links, just wrapped with list. All you need to do is only modify the CSS.

I did it for you, you can replace old style with this one:

CSS:

/* Resetter */
ol, ul, li, a {
    background: transparent;
    border: 0px;
    font-size: 100%;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}
ul, li {
    list-style-type: none;
}

/* Body */
body {
    background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
    font:13px Verdana;
}

/* Header */
.header {
    margin: 0px auto;
    position: relative;
    width: 1000px;
}
.header ul li {
    float: left;
}
.header ul li a {
    background-position: 0% 0%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    color:white;
    text-decoration:none;
    padding:10px;
}
.header ul li:hover {
    background:red;
}

/* Nav */
ul#nav {
    height: 80px;
    margin-top: 80px;
    -webkit-padding-start: 10px;
    display: block;
}
ul#nav li.home {
    float: right;
}

/* Sub Nav */
ul#nav-sub {
    background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
ul#nav-sub {
    background-position: 0px -160px;
    background-repeat: no-repeat;
    height: 40px;
}
ul#nav-sub li {
    margin-top:10px;
}
ul#nav-sub li.contact {
    float: right;
}