Question

Saw this http://www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.

With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png

And how the links + the “[workatplay.com]” logo is set up at the right.

I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.

Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.

How can i make a header like this?

Answer 1

Here you go.. http://jeaffreygilbert.com/workatplayheader.html

Preview:

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);
    }

    /* 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;
        height: 80px;
        text-indent: -9999px;
    }
    .header ul li a, 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;
    }

    /* Nav */
    ul#nav {
        height: 80px;
        margin-top: 80px;
        -webkit-padding-start: 40px;
        display: block;
    }
    ul#nav li.services a {
        background-position: 0px 0px;
        width:115px;
    }
    ul#nav li.toolbox a {
        background-position: -115px 0px;
        width:115px;
    }
    ul#nav li.work a {
        background-position: -224px 0px;
        width: 86px;
    }
    ul#nav li.about a {
        background-position: -310px 0px;
        width: 93px;
    }
    ul#nav li.insights a {
        background-position: -403px 0px;
        width: 113px;
    }
    ul#nav li.home {
        float: right;
    }
    ul#nav li.home a {
        background-position: -533px 0px;
        width: 200px;
    }

    /* Sub Nav */
    ul#nav-sub {
        background-position: 0px -160px;
        background-repeat: no-repeat;
        height: 40px;
        overflow: hidden;
    }
    ul#nav-sub li.contact {
        float: right;
    }
    ul#nav-sub li.contact a {
        background-position: 0px -200px;
        width: 200px;
    }

HTML:

<div class="header">
    <ul id="nav">
        <li class="home"><a href="/">work [at] play vancouver</a></li>
        <li class="services"><a href="/services" title="services">services</a></li>
        <li class="toolbox"><a href="/toolbox" title="toolbox">toolbox</a></li>        
        <li class="work"><a href="/work#mattel" title="work">work</a></li>
        <li class="about"><a href="/about" title="about">about</a></li>
        <li class="insights"><a href="/think" title="insights">insights</a></li>
    </ul>
    <ul id="nav-sub">
        <li class="contact"><a href="/contact">contact work [at] play</a></li>
    </ul>
</div>