SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Last Item in Nav List Approx 50% Below Others

    I have never seen this in all my css navigation menus.

    The last item from left to right remains about 50% below the others in the list.

    screenshot attached menu-issue.png

    Not live page as it is just a landing page concept now.


    there is more than enough space on the left and right sides.

    I changed the padding:0;margin:0; to text-align-left; and no change.

    Ideally I want it to span across the whole area within the div it is inside.


    Here is
    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Extra Strength Responsive Grids</title>
      <meta name="description" content="The Cure for Rigid Grid Syndrome">
      <meta name="viewport" content="width=device-width">
      <link rel="shortcut icon" href="./favicon.ico" >
    
      <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
      <link href="css/grid.css" rel="stylesheet" />
      <link href="css/main.css" rel="stylesheet" />
      <!--[if lt IE 9]>
          <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
          <script src="js/vendor/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
    
    
    <div class="page-wrap">
      <header class="grid-whole padded header-top">
        <div class="grid-demo grid-whole">
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
          <div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
        </div>
        <div class="grid-quarter padded">
          <div class="hero-img-contain">
            <img class="hero-img" src="img/box.png" />
          </div>
        </div>
        <div class="grid-whole l-grid-9 padded">
          <div class="l-padded">
            <h1>Extra Strength Responsive&nbsp;Grids</h1>
            <h2>The Cure for Rigid Grid Syndrome</h2>
            <p><small><em>a <a href="http://dfcb.github.com">Draftfcb Open Source</a> project from <a href="https://twitter.com/johnpolacek">John Polacek</a></em></small></p>
          </div>
        </div>
        <ul id="nav">     
         <li><a href="#">Divisional</a></li>     
         <li><a href="#">Wildcard</a></li>     
         <li><a href="#">Seahawks</a></li>     
         <li><a href="#">Niners</a></li>     
         <li><a href="#">Patriots</a></li>     
         <li><a href="#">Broncos</a></li>     
        <li><a href="#">Team Owners</a></li>
         </ul>
      </header>
    
      <section id="main" role="main">
        
        <div class="grid-whole padded content-top">
          <div class="l-grid-two-thirds padded-sides">
            <div class="padded-inner-sides">
              <p><strong>Do you suffer from rigid grid syndrome?</strong> Wish your grids were a little more pliant? The key active ingredient in Extra Strength Responsive Grids is <em><strong>MQ</strong> (a.k.a media queries)</em>. Apply <em><strong>MQ</strong></em> to your grids today!</p>
              <p>Have you tried responsive grids before? Did you run into issues where your <em>'responsive'</em> grids weren't responsive enough? Have you had a bad experience with a grid system that was afflicted with <em>'grid snap'?</em> Extra Strength Responsive Grids are percentage-based, for smooth, non-snappy width adjustments. Are you frustrated when collapsing your grid into a single column seems to be your only option for small screens? And what about those <em>pesky phablets?!</em></p>
              <p><strong>Extra Strength Responsive Grids can cure all<sup>1</sup> your responsive layout problems!!</strong></p>
              <div class="content-download center">
                <a href="https://github.com/dfcb/extra-strength-responsive-grids/archive/master.zip" class="btn-big">⬇ Download Now</a>
                <p>or <a href="https://github.com/dfcb/extra-strength-responsive-grids">view the project on Github</a></p>
              </div>
            </div>
          </div>
    
          <aside class="l-grid-third padded">
            <div class="padded-inner content-box content-box-secondary">
              <h2>Extra Strength Responsive Grids</h2>
              <ul class="clearfix">
                <li class="m-grid-half">Fluid Percentage-based</li>
                <li class="m-grid-half">Media Queries</li>
                <li class="m-grid-half">Easy Alignment</li>
                <li class="m-grid-half">Nested Grids</li>
                <li class="m-grid-half">Easy-To-Remember Classes</li>
                <li class="m-grid-half">Great for Prototyping</li>
                <li class="m-grid-half">Expressive</li>
                <li class="m-grid-half">SASS-enabled</li>
                <li class="m-grid-half"><em>Includes equalize.js!</em></li>
              </ul>
            </div>
          </aside>
        </div>
    
        <div class="grid-whole padded">
          <div class="grid-whole padded">
            <div class="padded-inner-sides header-example">
              <h3><em>With Extra Strength Responsive Grids, you can take total control of your layouts.</em></h3>
            </div>
          </div>
          <div class="grid-whole equalize">
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">You can do the normal columns</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">that collapse to stacked</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">when you are on a small screen...</div>
            </div>
            <div class="grid-quarter m-grid-half s-grid-whole padded">
              <div class="padded-inner content-box">How about four columns on large...</div>
            </div>
            <div class="grid-quarter m-grid-half s-grid-whole padded">
              <div class="padded-inner content-box">two columns on medium (phablet!)...</div>
            </div>
            <div class="grid-quarter m-grid-half s-grid-whole padded">
              <div class="padded-inner content-box">and stacked on small...</div>
            </div>
            <div class="grid-quarter m-grid-half s-grid-whole padded">
              <div class="padded-inner content-box">Not a problem!</div>
            </div>
          </div>
        </div>
    
        <div class="grid-whole padded">
          <div class="grid-whole padded-sides">
            <div class="padded-inner content-box content-box-header">
              <h3>Or take for example a content group with a header block...</h3>
            </div>
          </div>
          <div class="l-grid-three-quarters padded-sides l-flow-opposite">
            <div class="padded-inner-sides clearfix">
              <p>and a main content area that goes to the right on large screens, but stacks on top of the sidebar on medium &amp; small (via the <code>.flow-opposite</code> class - thanks <a href="https://github.com/davatron5000/Foldy960">foldy</a>)</p>
              <h3>Go for it! <small><em>(resize your browser to see it in action)</em></small></h3>
            </div>
          </div>
          <div class="l-grid-quarter padded">
            <div class="padded-inner content-box clearfix">
              <div class="m-grid-whole m-padded-sides">
                <p>and a sidebar area</p>
              </div>
              <div class="equalize">
                <div class="m-grid-quarter m-padded-sides">
                  <div class="padded-inner content-box content-box-inner">with inner boxes</div>
                </div>
                <div class="m-grid-quarter m-padded-sides">
                  <div class="padded-inner content-box content-box-inner">that stack on large screens,</div>
                </div>
                <div class="m-grid-quarter m-padded-sides">
                  <div class="padded-inner content-box content-box-inner">are columned on medium,</div>
                </div>
                <div class="m-grid-quarter m-padded-sides">
                  <div class="padded-inner content-box content-box-inner">then go back to stacked on small?</div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
    
        <div class="grid-whole padded-inner">
          <div class="padded-inner-sides header-example">
            <p><strong>Do class names like <code>.grid-6</code> and <code>.grid-4</code> confuse you?</strong> Instead, try our simple to understand and easy to remember classes like <code>.grid-half</code> and <code>.grid-third</code>.</p>
          </div>
        </div>
    
        <div class="grid-whole padded-sides">
          <div class="grid-whole padded"><div class="padded-inner content-box center">.grid-12 = .grid-whole</div></div>
          <div class="grid-half padded"><div class="padded-inner content-box center">.grid-6</div></div>
          <div class="grid-half padded"><div class="padded-inner content-box center">.grid-half</div></div>
          <div class="grid-third padded"><div class="padded-inner content-box center">.grid-third</div></div>
          <div class="grid-two-thirds padded"><div class="padded-inner content-box center">.grid-two-thirds</div></div>
          <div class="grid-quarter padded"><div class="padded-inner content-box center">.grid-quarter</div></div>
          <div class="grid-three-quarters padded"><div class="padded-inner content-box center">.grid-three-quarters</div></div>
        </div>
    
        <div class="grid-whole padded-inner">
          <div class="padded-inner header-example">
            <p><strong>Do your grids suffer from bad alignment?</strong> Extra Strength Responsive Grids comes with padding classes so you can make sure all your boxes line up just right!</p>
          </div>
        </div>
        <div class="grid-whole padded padding-demo">
          <p><code>.padded</code></p>
          <div class="grid-half s-grid-whole padded padding-demo">
            <p><code>.padded</code> <small><em>(for grid gutter spacing)</em></small></p>
            <div class="content-box padded-inner">
              <p><code>.padded-inner</code> <small><em>(double padding for content)</em></small></p>
            </div>
          </div>
          <div class="grid-half s-grid-whole padded padding-demo padding-demo-last">
            <p><code>.padded</code></p>
            <div class="content-box padded-inner-sides">
              <p><code>.padded-inner-sides</code> <br /><small><em>(double padding only on the sides)</em></small></p>
            </div>
          </div>
        </div>
    
        <div class="grid-12 padded-inner">
          <div class="padded-inner-sides header-example">
            <p><strong>Do you like to nest your grids?</strong> With Extra Strength Responsive Grids, you can nest grids inside of grids that are nested within nested grids. Get crazy with it! Go bonkers! Fly your grid freak flag high!</p>
          </div>
        </div>
        
        <div class="nesting-demo center padded-inner clearfix">
          <div class="grid-half padded content-box">
            <div class="content-box-transparent">
               <div class="grid-quarter m-grid-whole s-grid-half padded content-box-transparent">
                <div class="content-box-transparent">a</div>
              </div>
              <div class="grid-quarter m-grid-whole s-grid-half padded content-box-transparent">
                <div class="content-box-transparent">b</div>
              </div>
              <div class="grid-whole l-grid-half padded content-box-transparent">
                <div class="m-grid-half l-grid-quarter padded content-box-transparent">
                  <div class="content-box-transparent">c</div>
                </div>
                <div class="m-grid-half l-grid-quarter padded content-box-transparent">
                  <div class="content-box-transparent">d</div>
                </div>
                <div class="m-grid-half l-grid-quarter padded content-box-transparent">
                  <div class="content-box-transparent">e</div>
                </div>
                <div class="m-grid-half l-grid-quarter padded content-box-transparent">
                  <div class="content-box-transparent">f</div>
                </div>
              </div>
              <div class="grid-whole padded content-box-transparent">
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">g</div>
                </div>
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">h</div>
                </div>
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">i</div>
                </div>
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">j</div>
                </div>
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">k</div>
                </div>
                <div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
                  <div class="content-box-transparent">l</div>
                </div>
              </div>
            </div>
          </div>
          <div class="grid-half padded content-box">
            <div class="content-box-transparent">
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">m</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">n</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">o</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">p</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">q</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">r</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">s</div>
              </div>
              <div class="grid-half padded content-box-transparent">
                <div class="content-box-transparent">t</div>
              </div>
              <div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">u</div>
              </div>
              <div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">v</div>
              </div>
              <div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">w</div>
              </div>
              <div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">x</div>
              </div>
              <div class="grid-4 m-grid-6 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">y</div>
              </div>
              <div class="grid-4 m-grid-6 l-grid-2 padded content-box-transparent">
                <div class="content-box-transparent">z</div>
              </div>
            </div>
          </div>
        </div><!-- .nesting-demo -->
    
        <div class="padded-inner header-example">
          <div class="padded-inner-sides">
            <p>Also you can use the .padded-reverse (or .row if you are used to twitter bootstrap) class to help with nested grids.</p>
          </div>
        </div>
    
        <div class="nesting-demo center padded-inner">
          <div class="padded-inner grid-whole content-box">
            <div class="grid-whole">
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p><strong><em>no</em></strong> .padded-reverse</p>
                </div>
              </div>
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p><strong><em>no</em></strong> .padded-reverse</p>
                </div>
              </div>
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p><strong><em>no</em></strong> .padded-reverse</p>
                </div>
              </div>
            </div>
            <div class="grid-whole padded-reverse">
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p>.padded-reverse</p>
                </div>
              </div>
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p>.padded-reverse</p>
                </div>
              </div>
              <div class="padded grid-4">
                <div class="content-box-transparent">
                  <p>.padded-reverse</p>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div class="grid-12 padded-inner">
          <div class="grid-whole padded-inner">
            <p><strong>Bonus Offer!</strong> Extra Strength Responsive Grids comes with a free copy of <a href="http://tsvensen.github.com/equalize.js/">Equalize!</a> Equalize the heights<sup>2</sup> of your grids by adding the <code>.equalize</code> class to the parent grid container<sup>3</sup>.</p>
          </div>
          <div class="grid-whole padded">
            <div class="grid-whole padded">
              <h3>Before Equalize</h3>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">PBR squid helvetica, jean shorts next level gastropub <a href="http://hipsteripsum.me">Hipster Ipsum</a>.</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.</div>
            </div>
          </div>
          <div class="grid-whole padded equalize">
            <div class="grid-whole padded">
              <h3>After Equalize</h3>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">PBR squid helvetica, jean shorts next level gastropub <a href="http://hipsteripsum.me">Hipster Ipsum</a>.</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.</div>
            </div>
            <div class="grid-third s-grid-whole padded">
              <div class="padded-inner content-box">Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.</div>
            </div>
          </div>
        </div>
    
        <div class="grid-whole padded-inner">
          <div class="padded-inner-sides header-example">
            <p><strong>SASS-Enabled.</strong> Want to use an 18-column grid instead? Have your own ideas for modifications and features? This grid was built on top of <a href="http://sass-lang.com/">SASS</a>, so if you are a SASS enthusiast, you will find it easy to customize. All of the grid classes are created in a <code>gridGenerator()</code> mixin (see <a href="https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/grid.scss" target="_blank">grid.scss</a> and <a href="https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/_grid.generator.scss" target="_blank">_grid.generator.scss</a>).</p>
            <p>Not into SASS? That's ok. Just ignore or delete the <code>grid.scss</code> file and be on your merry way.</p>
            <p><strong>Self documenting. Expressive. Modular.</strong> Extra Strength Responsive Grids follows the approach of separating structural layout classes from content styling classes. In other words, let grid classes arrange content on the page, then for inner content, write your own classes to style everything else (color, typography, decorative styles, etc.). By keeping layout classes separate, it becomes easier to treat your content in a modular way.</p>
            <p>No more searching through css to find and adjust the structure of the page. Once you become familiar with the Extra Strength Responsive Grids approach, you'll be able to quickly look at the markup and know what it is doing. Simply add or change classes to make adjustments on the fly.</p>
          </div>
        </div>
    
        <div class="grid-12 padded-inner">
          <div class="grid-whole padded-inner citations">
            <p><small><sup>1</sup> Well, maybe not <strong><em>all</em></strong> of your layout problems! Refer to the side effects listed below.</small></p>
            <p><small><sup>2</sup> Refer to the source code at the bottom of this page for more info.</small></p>
            <p><small><sup>3</sup> If you do not wish to use equalize, simply do not embed the <code>equalize.min.js</code> script</small></p>
          </div>
        </div>
    
        <div class="grid-12 padded content-box-header content-box-cta">
          <div class="padded-inner center">
            <h2><em>Try the Extra Strength Responsive Grid method today!</em></h2>
          </div>
          <div class="l-grid-three-quarters m-grid-two-thirds s-grid-whole padded-inner-sides">
            <p><strong>From <a href="http://johnpolacek.com">John Polacek</a></strong>, maker of such other front end web remedies as <a href="http://johnpolacek.github.com/superscrollorama/">SuperScrollorama</a>, <a href="http://dfcb.github.com/BigVideo.js/">BigVideo.js</a> and <a href="http://dfcb.github.com/Responsivator/">Responsivator</a>. <a href="https://twitter.com/intent/user?screen_name=johnpolacek">Follow @johnpolacek</a> on Twitter to stay up-to-date. With contributions from <a href="http://timsvensen.com/">Tim Svensen</a> (<a href="https://twitter.com/intent/user?screen_name=johnpolacek">@tsvensen</a>) and <a href="https://github.com/apulley">Andrew Pulley</a>. This is another open source project from the <a href="http://opensource.draftfcb.net">team at Draftfcb Chicago</a>.</p>
          </div>
          <div class="l-grid-quarter m-grid-third s-grid-whole padded-inner-sides">
            <a href="https://twitter.com/johnpolacek" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          </div>
        </div>
    
        <div class="grid-12 padded">
          <div class="padded-inner-sides warning">
            <p><strong>Caution:</strong> Extra Strength Responsive Grids (ESRG) is an opinionated Grid Framework treatment. Review the side effects below prior to usage. You may wish to look into other treatment options for Rigid Grid Syndrome such as <a href="http://zengrids.com">Zen Grids</a> or <a href="http://www.profoundgrid.com">Profound Grid</a>.</p>
          </div>
    
          <div class="padded-inner-sides warning">
            <p><strong>Side Effects:</strong> The use of ESRG may result in excessive container elements. <strong class="strong-very">If you are a developer who experiences adverse reactions to non-semantic container div classes, it is recommended that you avoid ESRG</strong>. Using in combination with horizontal margins may lead to side effects such as broken layouts and element collision. May cause headaches due to 'grid inception'.</p>
          </div>
        </div>
        <div class="grid-12 padded">
          <div class="padded-inner-sides warning">
            <p><strong>About border-box and IE:</strong> The use of ESRG requires the use of <code>box-sizing:border-box;</code>, which is unsupported natively in IE7. However, the good news is there is a <code>boxsizing.htc</code> file that can enable border-box for oldIE browsers. <strong class="strong-very">Caution:</strong> The use of this .htc file may cause lag, especially when border-box is applied with a wildcard (*). If you are concerned about legacy IE browser support, it is recommended to only use <code>box-sizing:border-box;</code> on the grid containers, and not on the content within (as it is on the page you are lookin' at right now). <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">More info about border-box</a></p>
          </div>
        </div>
      </section><!-- /#main -->
    
    </div><!-- /.page-wrap -->
    
    
    <img id="resize" src="img/resize.png" alt="">
    
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
    <script src="js/vendor/equalize.min.js"></script>
    <script>
      
      // smart resize - http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
      (function($,sr){
     
        // debouncing function from John Hann
        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
        var debounce = function (func, threshold, execAsap) {
            var timeout;
       
            return function debounced () {
                var obj = this, args = arguments;
                function delayed () {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null; 
                };
       
                if (timeout)
                    clearTimeout(timeout);
                else if (execAsap)
                    func.apply(obj, args);
       
                timeout = setTimeout(delayed, threshold || 100); 
            };
        }
        // smartresize 
        jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
       
      })(jQuery,'smartresize');
    
      $(function() {
        // use equalize to equalize the heights of content elements
        $('.equalize').equalize({children:'.content-box'});
    
        // re-equalize on resize
        $(window).smartresize(function(){  
          $('.equalize').equalize({reset:true, children:'.content-box'});
        });
    
      });
    </script>
    
    
    <!-- Add your own Google Analytics UA number or remove this snippet -->
    <script>
      var codes = ['UA-34145020-1'],
          _gaq = _gaq || [];
    
      for(i in codes) {
        _gaq.push(['_setAccount', codes[i]]);
        _gaq.push(['_trackPageview']);
      }
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    
    </body>
    </html>
    Code:
    /*
    	Colors
    
    	Blues	#d9e8ff		#c4d8f6		#4e7bc5
    	Red 	#a82121
    */
    
    /* Normalize + H5BP - minified */
    article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline;zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;color:#222;}body{font-size:1em;line-height:1.4;margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:.67em 0;}h2{font-size:1.5em;margin:.83em 0;}h3{font-size:1.17em;margin:1em 0;}h4{font-size:1em;margin:1.33em 0;}h5{font-size:.83em;margin:1.67em 0;}h6{font-size:.67em;margin:2.33em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:none;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}svg:not(:root){overflow:hidden;}fieldset{border:0;margin:0;padding:0;}legend{border:0;white-space:normal;margin-left:-7px;padding:0;}button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
    input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;resize:vertical;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0;}.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;}.ir:before{content:"";display:block;width:0;height:150%;}.hidden{display:none!important;visibility:hidden;}.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0;}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0;}.invisible{visibility:hidden;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}p,pre,dl,menu,ol,ul{margin:1em 0;}figure,form{margin:0;}::-moz-selection,::selection{background:#b3d4fc;text-shadow:none;}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}abbr[title]:after{content:" (" attr(title) ")";}.ir a:after,a[href^=javascript:]:after,a[href^=#]:after{content:"";}pre,blockquote{border:1px solid #999;page-break-inside:avoid;}thead{display:table-header-group;}tr,img{page-break-inside:avoid;}img{max-width:100%!important;}@page{margin:.5cm;}p,h2,h3{orphans:3;widows:3;}h2,h3{page-break-after:avoid;}}
    
    
    body { font-family: 'PT Sans', sans-serif; background-color:#485671;}
    h1,h2,h3,h4,h5,h6 { line-height: 1.2; margin: 0; }
    h1 {
    	font-family: 'Alfa Slab One', cursive;
    	font-weight: normal;
    	letter-spacing: 1px;
    }
    h2,h3,h4,h5,h6 { font-weight: 700; }
    ul { margin: .5em 0; padding: 0 0 0 1.5em; }
    li { padding-right: 1em; }
    small { font-weight: normal; font-size: .75em; }
    sup { font-weight: normal; }
    
    a, a:visited {
    	font-style: italic;
    	color: #4e7bc5;
    	font-weight: bold;
    }
    
    .page-wrap { max-width: 960px; margin: 0 auto; background-color:#fff; }
    .header-example h1, 
    .header-example h2, 
    .header-example h3, 
    .header-example h4, 
    .header-example p {
    	margin-bottom: 0;
    }
    
    .grid-demo {
    	width: 98%;
    	height: 4.8em;
    	margin: .5em .5em 0;
    }
    .grid-demo .grid-1 { height: 4.8em; background: #d9e8ff; }
    .grid-demo .grid-1 .content-box {
    	height: 3.6em;
    	background: rgba(255,255,255,.4);
    	border-left: dashed 1px #c4d8f6;
    	border-right: dashed 1px #c4d8f6;
    }
    
    .header-top h1 { margin: .4em 0 0; font-size: 2.2em; }
    .header-top h2 {
    	margin: 0;
    	color: #a82121;
    	text-transform: uppercase;
    	font-style: italic;
    	font-weight: normal;
    	font-size: 1.1em;
    }
    
    #primary-header{height:92px;display:block;background-color:#173f7a; position:relative;}
    
    
    .header-top p { margin: -.25em 0; opacity: .8; }
    
    /*  added */
    #nav
    {
        padding:0;margin:0;
    }
    #nav li
    {
        display:inline;
    }
    #nav li a
    {  
       font-family:Helvetica,Arial,sans-serif;text-shadow:0 0 4px #111;
       font-size:15px;
       letter-spacing:.0125em;
       text-decoration: none;
       float:left;
       padding:10px 10px 10px 10px;
       background-color: #325c8c;/*333333;*/
       color:#fff;
       border-bottom:1px;
       border-bottom-color:#000000;
       border-bottom-style:solid;
       text-transform:uppercase;
       border:#ccc 1px solid;
    }
    #nav li a:hover
    {
       background-color:#9B1C26;
       border-bottom:2px;
       border-bottom-color:#000000;
       border-bottom-style:solid;
       /*margin:-1px;*/
       border:#ccc 1px solid;
    }
    
    
    .hero-img-contain { position: relative; height: 4em; }
    .hero-img {
    	position: absolute;
    	top: -3em; left: 14%;
    	width: 88%;
    	min-width: 10em;
    }
    .content-download { margin-bottom: 2em; }
    .content-download p { margin: .25em; }
    .content-box {background: #d9e8ff;border-radius: .25em; }
    .content-box-header {background: #4e7bc5;color: #fff; }
    .content-box-secondary {background: #4e7bc5;color:#fff; }
    .content-box-inner { background: #c4d8f6; margin-bottom: .5em; }
    .content-box-transparent {
    	background: rgba(78,123,197,.2);	
    }
    .content-box p { margin: 0 0 1em; }
    
    .padding-demo { border: dashed 1px #c4d8f6; color: #4e7bc5; }
    .padding-demo-last { border-left: none; }
    .padding-demo p {
    	margin: 0 0 .5em;
    	opacity: .8;
    	border-left: dashed 1px #4e7bc5;
    }
    .padding-demo .content-box p {  border: dashed 1px #4e7bc5; }
    
    .btn-big {
    	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	box-shadow:inset 0px 1px 0px 0px #ffffff;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d9e8ff), color-stop(1, #c4d8f6) );
    	background:-moz-linear-gradient( center top, #d9e8ff 5%, #c4d8f6 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9e8ff', endColorstr='#c4d8f6');
    	background-color:#d9e8ff;
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	border-radius:6px;
    	border:1px solid #c4d8f6;
    	display:inline-block;
    	color:#4e7cc5;
    	font-size:2em;
    	font-style: normal;
    	font-family: 'Alfa Slab One', cursive;
    	padding:6px 24px;
    	text-decoration:none;
    	text-shadow:0 1px 0 #ffffff;
    }.btn-big:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c4d8f6), color-stop(1, #d9e8ff) );
    	background:-moz-linear-gradient( center top, #c4d8f6 5%, #d9e8ff 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4d8f6', endColorstr='#d9e8ff');
    	background-color:#c4d8f6;
    }.btn-big:active {
    	position:relative;
    	top:1px;
    }
    .content-box-cta {background: #a82121;color: #fff; }
    .content-box-cta a, .content-box-cta a:visited {color: #fff;font-weight: bold; }
    .content-box-cta p { margin: 0 0 1em; }
    
    .warning { font-style: italic; }
    
    .citations { border-top: dashed 1px #4e7bc5; }
    .citations p { margin: 0 0 .5em; line-height: 1;}
    
    .center { text-align: center; }
    .strong-very { color: #a82121; }
    
    #resize { position:fixed; bottom:0;right:0;}
    
    
    form .input {
      margin: 0 0 20px 0;
      position: relative;
      width: 74%;
      clear: both; }
      
    	 input[type=text], input[type=textarea]{
          padding:4px;
    	  font-size:15px; 
          border:2px solid #ccc;
          background: white;
          margin-bottom: 10px;
          border-radius: 4px;
          -webkit-transition: 0.5s ease-in-out all;
          -moz-transition: 0.5s ease-in-out all;
          -ms-transition: 0.5s ease-in-out all;
          -o-transition: 0.5s ease-in-out all;
          transition: 0.5s ease-in-out all;
    	  margin: 0 0 20px 0;
      position: relative;
      width: 74%;
      clear: both; 
    	}
    	
    	
          
        input[type=text]:focus, input[type=textarea]:focus{
            
        }
    	
    	
    input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer;
    		background-color:#ffb32b;
    		font-size:16px;font-weight:bold;
    		padding:5px; border-radius: .25em; } /* 3 */
    }
    
    @media (max-width: 800px) {
    	.header-top h1, .header-top h2, .header-top p { padding-left: 16px;}
    }
    
    @media (max-width: 480px) {
    	.header-top h1 { font-size: 1.6em;}
    	.header-top h2 { font-size: .8em;}
    	.btn-big { font-size: 1.2em; }
    }
    what could I be missing?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hm, you've got a very broken looking layout there when I run this in my browser. Anyhow, regarding the menu, instead of display: inline, set the list items to float: left. Then remove their right padding. There will be a few other things to do, but that's a good start.

    If posting further code, try to set up an example we can easily cut and paste, with the CSS in the document itself, as explained here: http://www.sitepoint.com/forums/show...Posting-Basics

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i Ralph,

    not my layout by design or edits. It is a free responsive design.

    I did already try the float:left and did not see the right padding. I'll for that and see what happens.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,778
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You have set the nav li element to display:inline and floated the anchors. That's fine however you have given the li element a 1em right padding and its is the collection of all these paddings that is making the last item drop down a little.

    When you float an element on the same line as an inline element the inline element is displaced to make room for the float assuming that there is enough room on that single line. In essence the right padding on every one of those list items is being displaced and all are collecting in the right corner. The last floated anchor is moved down because the rules for displacing inline content refer to the single line and when there is not enough room on that line the float moves down first.

    As Ralph said removing the padding will fix the issue but you also need to contain the floats as the next item will snag on the floats also.

    Code:
    ul#nav:after{
    	content:".";
    	clear:both;
    	display:block;
    	height:0;	
    	visibility:hidden;
    }
    #nav li {padding-right:0}
    Generally I would float both the list and the anchor (as Ralph suggests) to avoid theses sort of problems and because older browsers like IE6 create a staircase effect as empty elements always have at least the line-height in IE6 and take up room when they shouldnt.

  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I didn't see that. I inserted my nav menu separate from that responsive template and I didn't notice they had the "1em" there.
    Thanks
    But a second problem
    I tried adding width:100% to #primary-header and then to .header-top each of which has an image in the background. Yet those do not resize when sreen is minimized.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,778
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by lukkas View Post
    But a second problem
    I tried adding width:100% to #primary-header and then to .header-top each of which has an image in the background. Yet those do not resize when sreen is minimized.
    Sorry for the late reply but can you post your updated code as I need to see exactly what you have done before I start testing

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is after the header-top section

    Code:
    
    #primary-header{background:url('../img/home-header.png') no-repeat center center;height:92px;display:block;background-color:#173f7a; position:relative;}
    
    #primary-header{width: auto !important;
    		max-width: 100% !important;}
    
    .header-top {background:url('../img/main_bnr.jpg') no-repeat bottom left;height:392px;}
    From what I see from other responsive examples, the image cannot be minimized with the screen if it is inside the CSS.

    The outer div minimizes yet the image within does not.

    I then took it out and it still would not minimize even when plugging in the width:100%;

    It is not a live page.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,778
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    There is no html for primary header in your first post so I can't really guess at its construction but if the primary header is an empty element that just holds a background image then you could use 'background-size:cover' to ensure the image covers the available space. You would then need to set the height by using percentage padding as shown in this article which will maintain the aspect ratio of the background image.

  9. #9
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The updated html sectio is after page-wrap :

    Code:
    <div class="page-wrap">
    
     <div id="primary-header"></div>
      <header class="grid-whole padded header-top">
         
      </header>
    using background:cover it simply did not display the image at all.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,778
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by lukkas View Post

    using background:cover it simply did not display the image at all.
    Did you read the most important part about using percentage vertical padding to maintain the aspect ratio of the image. I mentioned it in my post and is the technique you need to do this (support is ie9+ only though).

  11. #11
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I put that in it did get rid of the scroll bar (n acct of image not resizing) but where the img should be is white space.

    I used background:url(... as well as background-image:url(...
    and not much difference in displaying the image. Did your test yield the same, a blank image?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,778
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by lukkas View Post
    Yes, I put that in it did get rid of the scroll bar (n acct of image not resizing) but where the img should be is white space.

    I used background:url(... as well as background-image:url(...
    and not much difference in displaying the image. Did your test yield the same, a blank image?
    No it worked fine for me and as I said above you will need to post a working copy of your current code that exhibits the problem you are seeing as I can't make a guess what you may have missed out or added. It's probably something simple but until I see the full demo I could be guessing in the wrong direction.

    Refer to the demo and make yourself a standalone version so that you know its working and then once working implement it into your page and that should help you spot any problems..

  13. #13
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the simple mistake ; semi-colon at the end of the image url in CSS


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •