Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here you go.. <a href="http://jeaffreygilbert.com/workatplayheader.html" rel="nofollow noreferrer">http://jeaffreygilbert.com/workatplayheader.html</a></p> <p><strong>Preview:</strong> <img src="https://i.stack.imgur.com/07jVk.png" alt="alt text"></p> <p><strong>CSS:</strong></p> <pre><code>/* 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; } </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="header"&gt; &lt;ul id="nav"&gt; &lt;li class="home"&gt;&lt;a href="/"&gt;work [at] play vancouver&lt;/a&gt;&lt;/li&gt; &lt;li class="services"&gt;&lt;a href="/services" title="services"&gt;services&lt;/a&gt;&lt;/li&gt; &lt;li class="toolbox"&gt;&lt;a href="/toolbox" title="toolbox"&gt;toolbox&lt;/a&gt;&lt;/li&gt; &lt;li class="work"&gt;&lt;a href="/work#mattel" title="work"&gt;work&lt;/a&gt;&lt;/li&gt; &lt;li class="about"&gt;&lt;a href="/about" title="about"&gt;about&lt;/a&gt;&lt;/li&gt; &lt;li class="insights"&gt;&lt;a href="/think" title="insights"&gt;insights&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id="nav-sub"&gt; &lt;li class="contact"&gt;&lt;a href="/contact"&gt;contact work [at] play&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload