granolocks · August 17, 2012 18:05
diff --git a/header markup.html b/header markup.html
 <!DOCTYPE html>

 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
      <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
        <head>
          <meta charset="utf-8" />

          <!-- Set the viewport width to device width for mobile -->
          <meta name="viewport" content="width=device-width" />

          <title>Welcome to Foundation</title>

          <!-- Included CSS Files (Uncompressed) -->
          <!--
          <link rel="stylesheet" href="stylesheets/foundation.css">
          -->

          <!-- Included CSS Files (Compressed) -->
          <link rel="stylesheet" href="stylesheets/foundation.min.css">
          <link rel="stylesheet" href="stylesheets/app.css">

          <script src="javascripts/modernizr.foundation.js"></script>

          <!-- IE Fix for HTML5 Tags -->
          <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->

          <style type="text/css">
            body { background-color: lightblue; }
            #header-wrapper { width: 100%; }
            #header { 
              position:relative;
              background-color: red;
            }
            img#logo { 
              position: absolute; 
              top: 1em;
              left: 1em;
              z-index: 10;
            }
            #primary-nav { background-color: blue; }
            #primary-nav-inner-wrapper {
              padding: 0;
            }
            #primary-nav-inner-wrapper ul {
              padding: 0;
              margin: 0;
            }
            #primary-nav-inner-wrapper .nav-bar > li > a:first-child {
              padding: 0 35px 0 20px;
            }
            #primary-nav-inner-wrapper .nav-bar > li.has-flyout > a:first-child::after {
              right: 10px;
            }

            #secondary-nav { padding-top: 5em; background-color: yellow; }  
            
            #secondary-nav input,
            #secondary-nav input[type="submit"] {
              display: inline-block;
              float: right;
            }
            #secondary-nav h4 {
              display: inline;
            }
           .header-filler { 
              min-height: 40px; 
              background-color: red;
            }
            .text-right { text-align: right; }
            .no-padding { padding: 0; }
            .no-margin { margin: 0; }
            .no-margin-left { margin-left: 0; }
            .no-padding-left { padding-left: 0; }
          </style>
        </head>
        <body>
          <div id="header-wrapper">
            <div id="header" class="row">
              <img src="http://cageme.herokuapp.com/300/200" id="logo" class="hide-for-small"/>
              <div class="twelve columns">
                <div class="row header-spacer"></div>

                <div id="secondary-nav" class="row">
                  <div  class="four columns header-filler">
                  </div>
                  <div class="eight columns text-right">
                    <div class="row">
                      <div class="five columns offset-by-three no-padding no-margin">
                        <h4><a href="#">Link!</a></h4> | 
                        <h4><a href="#">Link!</a></h4> | 
                        <h4><a href="#">Link!</a></h4>  
                      </div>
                      <div class="four columns no-margin-left no-padding-left">
                        <form>
                          <input type="submit" value="submit"/>
                          <input style="width: 65%;" type="text"/>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="primary-nav" class="row">
                  <div  class="four columns header-filler" >
                  </div>
                  <div id="primary-nav-inner-wrapper" class="eight columns">
                    <ul class="nav-bar">
                      <li class="has-flyout">
                      <a href="#">Nav Item 2</a>
                      <a href="#" class="flyout-toggle"><span> </span></a>
                      <ul class="flyout">
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                      </ul>
                      </li>
                      <li class="has-flyout">
                      <a href="#">Nav Item 2</a>
                      <a href="#" class="flyout-toggle"><span> </span></a>
                      <ul class="flyout">
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                      </ul>
                      </li>
                      <li class="has-flyout">
                      <a href="#">Nav Item 2</a>
                      <a href="#" class="flyout-toggle"><span> </span></a>
                      <ul class="flyout">
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                      </ul>
                      </li>
                      <li class="has-flyout">
                      <a href="#">Nav Item 2</a>
                      <a href="#" class="flyout-toggle"><span> </span></a>
                      <ul class="flyout">
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                      </ul>
                      </li>
                      <li class="has-flyout">
                      <a href="#">Nav Item 2</a>
                      <a href="#" class="flyout-toggle"><span> </span></a>
                      <ul class="flyout">
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                      </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </body>
      </html>
No results found