SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header with hidden content when scrolled

    I have working testing code with CSS to hide content under header. How to show green marked SUM-menu under header and not hide with jQuery and its plugins?

    Notice area - green: Submenu items under should be under header

    PHP Code:

    <!DOCTYPE HTML>

    <
    html>

    <
    head>
      <
    title></title>
    <
    style type="text/css">
    /*<![CDATA[*/
    divheadernavigation {
        
    displayblock;
    }
    header {
        
    left0;
        
    top0;
        
    positionfixed;
        
    z-index1000;
    }
    header {
        
    backgroundurl("../images/bg/background_header1.png"repeat-x scroll left 10px #A80000;
        
    box-shadow0 2px 10px rgba(0000.6);
        
    opacity0.95;
        
    height120px;
        
    width100%;
        
    border-bottom1px solid #800000;
        
    z-index1000;
    }
    #mysubmenu {
        
    padding-top110px;
    }
    #mysubmenu {
        
    positionrelative;
    }
    .
    wrapper {
        
    positionrelative;
        
    width990px;
        
    margin0 auto;
    }
    .
    contentpromotion {
        
    backgroundnone repeat scroll 0 0 #800080;
        
    heightauto;
    }
    #submenuitems {
        
    displayblock;
        
    positionrelative;
        
    border2px solid #008000;
    }
    /*]]>*/
    </style>
    </
    head>

    <
    body>
    <
    header style="">
    </
    header>

    <
    div style="" id="mysubmenu">
      <
    div class="submenuitems_content1">
         <
    div class="wrapper">
          <
    nav id="submenuitems">
          <
    br /><br /><br />
          </
    nav>
        </
    div>
      </
    div>

      <
    div class="wrapper contentpromotion">
      <
    h3 class="">My content promotion</h3>
      </
    div>
    </
    div>

    <
    div class="submenuitems_content1">
      <
    div class="wrapper">
        <
    nav id="submenuitems">
          <
    ul><li>Submenu items under should be under header</li></ul>
        </
    nav>
      </
    div>
    </
    div>

    <
    p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumTypi non habent claritatem insitamest usus legentis in iis qui facit eorum claritatemInvestigationes demonstraverunt lectores legere me lius quod ii legunt saepiusClaritas est etiam processus dynamicusqui sequitur mutationem consuetudium lectorumMirum est notare quam littera gothicaquam nunc putamus parum claramanteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decimaEodem modo typiqui nunc nobis videntur parum clarifiant sollemnes in futurum.</p>
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumTypi non habent claritatem insitamest usus legentis in iis qui facit eorum claritatemInvestigationes demonstraverunt lectores legere me lius quod ii legunt saepiusClaritas est etiam processus dynamicusqui sequitur mutationem consuetudium lectorumMirum est notare quam littera gothicaquam nunc putamus parum claramanteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decimaEodem modo typiqui nunc nobis videntur parum clarifiant sollemnes in futurum.</p>
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumTypi non habent claritatem insitamest usus legentis in iis qui facit eorum claritatemInvestigationes demonstraverunt lectores legere me lius quod ii legunt saepiusClaritas est etiam processus dynamicusqui sequitur mutationem consuetudium lectorumMirum est notare quam littera gothicaquam nunc putamus parum claramanteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decimaEodem modo typiqui nunc nobis videntur parum clarifiant sollemnes in futurum.</p>
    </
    body>

    </
    html

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You have multiple identical identifiers which are a major problem. Fix that first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •