CODEWITHSUNDEEP
css
Johnson
Johnson

Reputation: 818

CSS: How to make this topheader?

Saw this 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 alt text

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?

Upvotes: 1

Views: 1809

Answers (4)

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

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

Preview: alt text

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>

Upvotes: 2

Fopa L&#233;on Constantin
Fopa L&#233;on Constantin

Reputation: 12363

copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header

<html>
<head>
  <style>
         body {
            font : 20px Arial;
            margin: 0px;
         }

   div#header {
    background : black;
            color: white;
            padding-top : 25px;
   }

         /*The title*/
   div#header h1 {
     float: right;
     margin-right: 100px;
     border; 1px white;
     font : 20px Arial;
     }

   div#header ul {
    list-style: none;
    height: 50px;
   }         

   div#header li {
    float: left;
    width: 100px;
   }

    div#pink_area{
        background: pink;
        margin-top; 0px;
    }         

   div#pink_area ul {
    list-style: none;
    height: 50px;
   }     

   div#pink_area li {
    float: left;
    width: 45%;
    line-heigth: 20px;
    text-align : center;
    padding : 10px
   }
  </style>
</head>


<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
  <li>services</li>
  <li>toolbox</li>
  <li>work</li>
  <li>about</li>
  <li>insigths</li>
</ul>
    <div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>

Upvotes: 0

Tushar D
Tushar D

Reputation: 88

Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.

if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use

just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.

here you can experiment with this by changing and see result instantly.

Upvotes: 0

colithium
colithium

Reputation: 10327

Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.

As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.

width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;

etc

As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.

Upvotes: 1

Related Questions