ansaurus

Question

Answer 1

+1 A:

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.

colithium 2010-09-24 23:20:57

+1 for inspecting computed styles!

elusive 2010-09-24 23:25:24

Saved me from hours of frustration when I discovered that little feature.

colithium 2010-09-24 23:27:57

@colithium: I am using Firebug on a daily basis at work. This is incredibly useful sometimes.

elusive 2010-09-24 23:33:11

Answer 2

A:

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.

hashtd 2010-09-24 23:32:25

Answer 3

A:

Hi

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>

Leonzo Constantini 2010-09-24 23:46:31

Answer 4

A:

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>

Jeaffrey Gilbert 2010-09-25 01:57:37

ansaurus

tags:

views:

answers:

CSS: How to make this topheader?

related questions