SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling to just below the header

    I apologize if this is not the right forum (couldn't decide if this is a js problem, or just css), and if it seems kind of basic. I have a site that seems quite simple but there is a page with a very long list on it. I wanted to be able to scroll the list up underneath the header information, which I've done using position:fixed for the header. Then I thought it would be better for the user to be able to jump through the list to different categories. I can't figure out how to get the scrolling to simply stop at the bottom of the header information. I've tried to implement scrollTo(), scrollTop(), but my js skills are limited at best. Any help would be most welcome. (Of course I'd also like to have this scroll nice and smoothly when going from one part of the list to another).

    Right now it is coded with hash-tag links. And there is one instance where I manually placed the <a>tag where I wanted the scroll to stop. This is a bad work-around for if/when this list changes, obviously, I just wanted to see if I could make it work somehow or other.

    I've posted a working version of the page here:
    jmbroekman.com/arieser/publications.html

    Thanks very much.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

    If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

    There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

    Code javascript:
    //include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
     
    $(document).ready(function(){
     
        $('#pub').localScroll({
            offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
        });    
     
    });

    Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you, it's an elegant solution!

    I cannot say thank you enough. I have been wrestling with this for two days, and your solution is perfect. I thought there was a simple way to do this with jquery. I really appreciate the help, the speed with which you responded, and the thorough response.

    Jessyca (registered as peregrinepress)

    Quote Originally Posted by AussieJohn View Post
    I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

    If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

    There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

    Code javascript:
    //include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
     
    $(document).ready(function(){
     
        $('#pub').localScroll({
            offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
        });    
     
    });

    Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.

  4. #4
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    an additional related scrolling question

    Hi AussieJohn,

    I have another small conundrum. I am using a fixed side div to keep the photo in place while the main content scrolls under the header. If the browser window is smaller, the content will scroll up and pull the footer up under the photo as well. Is there a way to keep the footer fixed below the content including the fixed side while the rest scrolls? So, it will need to scroll for a while, but then, I'd like it to stop when it reaches a point below the fixed side content. Does that make sense, is it even manageable? I tried moving the footer below the wrapper, but that still didn't solve the problem. I realize that if the window is small enough to require the content moving up to finish before the end of the photo, the footer might not in fact be visible if it stops below the footer.

    The link is still: http://jmbroekman.com/arieser/publications.html

    Quote Originally Posted by AussieJohn View Post
    I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

    If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

    There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

    Code javascript:
    //include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
     
    $(document).ready(function(){
     
        $('#pub').localScroll({
            offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
        });    
     
    });

    Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    One solution would be to allow the footer to scroll over the top of the photo, which is relatively trivial:

    Code css:
    /* These are just overrides/additions for your current styles */
    footer { 
        margin:10px auto 0;
        position: relative;
        z-index: 1000;
        background: #fff;
        padding-bottom: 20px;
    }
     
    #wrapper {
        margin:10px auto 0;
    }

    This will push the footer to the very bottom of the page, and because of its higher z-index than other elements, it will sit over the top of them.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I'm new here and don't know if it's considered best for me to ask my question in this old thread, or if I should start a new one. I'll try this first...

    Anyway, my site has a fixed header. When scrolling down/up on a page using the page buttons on the keyboard, it moves too far - instead of scrolling the length of the content (or less), it's including the height of the header (and possibly the small bit of padding below it). This is undesirable as someone hitting the page down while viewing the content will end up missing stuff and would have to manually go back up a bit with the arrow buttons or their mouse to view what they missed.

    Could the jQuery scrolling discussed here be adapted to correct my issue? One concern I have is I don't want to have any additional scroll bars to show up beyond what's there from the browser to begin with. I don't care for the way that looks.

    I've pasted my code below for a dummy page I've setup (locally) to demonstrate the problem. I'm not ready to have my actual site pages posted just yet, as it relates to a business I'm putting together that I'm not ready to launch just yet. (In case anyone notices, I have <CENTER> tags in this code - I've corrected this to a CSS solution in my actual page, with no effect on this issue).

    If you need screenshots to show the overscrolling (for lack of a better term) as I'm seeing it here, please advise and I'll add them.

    Thanks in advance for your assistance...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XXX</title>
    <meta name="description" content="XXX">
    <meta name="keywords" content="XXX">
    <meta name="geo.region" content="XXX">
    <meta name="geo.placename" content="XXX">
    <meta name="geo.position" content="XXX">
    <meta name="ICBM" content="XXX">
    <style type="text/css">
    <!--
    html, body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic";
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero 
    
    padding and margin on lists. For consistency, you can either specify the 
    
    amounts you want here, or on the list items (LI, DT, DD) they contain. Remember 
    
    that what you do here will cascade to the .nav list unless you write a more 
    
    specific selector. */
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where 
    
    margins can escape from their containing div. The remaining bottom margin will 
    
    hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements 
    
    within the divs, instead of the divs themselves, gets rid of any box model 
    
    math. A nested div with side padding can also be used as an alternate method. 
    
    */
    	text-shadow: #A2C8CA 0 0 1px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some 
    
    browsers around an image when it is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the 
    
    group of selectors that create the hover effect. ~~ */
    a:link {
    	color: #AED6D9;
    	text-decoration: none; /* unless you style your links to look extremely 
    
    unique, it's best to provide underlines for quick visual identification */
    }
    a:visited {
    	color: #AED6D9;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard 
    
    navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    overflow: auto;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, 
    
    centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your 
    
    layout. It contains an image placeholder that should be replaced with your own 
    
    linked logo ~~ */
    .header {
    	height: 200px;
    	width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	position: fixed;
    	z-index: 1000;
    }
    .header img {float: left;}
    	.header ul {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 127px;
    			margin: 0px;
    			float: left;
    		}
    			
    			
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements 
    
    within this div have padding on their sides. This saves you from any "box model 
    
    math". Keep in mind, if you add any side padding or border to the div itself, 
    
    it will be added to the width you define to create the *total* width. You may 
    
    also choose to remove the padding on the element in the div and place a second 
    
    div within it with no width and the padding necessary for your design.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    
    .bigger { font-size:85%; }
    
    
    /* ~~ The footer ~~ */
    .footer {
    	height: 15px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 10px 0;
    	position: fixed;
    	bottom: 0;
    	left: 50%;
    	background: #603B3D;
    }
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The 
    
    floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The 
    
    floated element must precede the element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final 
    
    element following the last floated div (within the #container) if the #footer 
    
    is removed or taken out of the #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style>
    <link href="century_gothic_font/stylesheet.css" rel="stylesheet" 
    
    type="text/css">
    <link href="century_gothic_bold_font/stylesheet.css" rel="stylesheet" 
    
    type="text/css">
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    
    
    <script>
    $(function(){
    	$('.fadein img:gt(0)').hide();
    	setInterval(function(){$('.fadein :first-child').fadeOut().next
    
    ('img').fadeIn().end().appendTo('.fadein');}, 7250);
    });
    </script>
    </head>
    
    <body>
    
    <div class="container">
      <div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    </ul></div>
      <div class="content">
        <p>&nbsp;</p><div style="float: left; width: 80px;"><img src="Brown 
    
    fill.png" alt="left side fill"></div><div style= "display:block;max-height: 
    
    429px; overflow:hidden;" id="slideshow">
    <div class="fadein">
    	<img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX"></div></div>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    
    the problem I'm having on my page with scrolling up too much when using the 
    
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    
    performed in this manner by the height of the header and any padding directly 
    
    below it so when one hits page down, no text/content is missed out on without 
    
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    
    etc.</p>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    
    the problem I'm having on my page with scrolling up too much when using the 
    
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    
    performed in this manner by the height of the header and any padding directly 
    
    below it so when one hits page down, no text/content is missed out on without 
    
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    
    etc.</p>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.
        </p>
        <br>
        <p></p>
        <h1>&nbsp;</h1>
        <strong>
        <!-- end .content -->
      </strong></div>
      <div class="footer">
        <CENTER><p><span class=bigger><a target="_blank" href="XXX">XXX <img 
    
    src="XXX" width="15" height="15" alt="XXX"></a>, <a target="_blank" 
    
    href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a 
    
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14" 
    
    alt="XXX"></a></span></p></CENTER>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MMM717 View Post
    Anyway, my site has a fixed header. When scrolling down/up on a page using the page buttons on the keyboard, it moves too far - instead of scrolling the length of the content (or less), it's including the height of the header (and possibly the small bit of padding below it). This is undesirable as someone hitting the page down while viewing the content will end up missing stuff and would have to manually go back up a bit with the arrow buttons or their mouse to view what they missed.
    I'm not sure there is anything you can do about the height scrolled when a PageUp / PageDown button is pressed. The only possibility to get that to work nicely is to hijack the keypresses on those keys and then scroll the page with JavaScript. (This isn't actually something I've ever worried about when building sites.)

    Quote Originally Posted by MMM717 View Post
    Could the jQuery scrolling discussed here be adapted to correct my issue? One concern I have is I don't want to have any additional scroll bars to show up beyond what's there from the browser to begin with. I don't care for the way that looks.
    You could use the techniques described above for your site - but the issue with PageDown / PageUp keys will remain.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input.

    I've come across something that reads to me should "fix" this problem, but I don't think I'm implementing it correctly.

    http://stackoverflow.com/a/6395433/1858759

    In my attempts to utilize this the other day, I did the following:

    http://www.codingforums.com/showthread.php?p=1338172

    I didn't attempt it any further as I can't quite wrap my head around it beyond what I've already noted there. However, I believe once it's inserted and used correctly, it could correct or at least help my problem.

    Any thoughts on what I should be doing to place this in my page's code, what I've done wrong trying to use it, etc.? I am by no means a web developer or are trying to be one beyond setting up this site, so my apologies if my questions seem basic/obvious. I'm doing this for an unrelated business I'm putting together that I'm building my own site for...

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

  10. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MMM717 View Post
    Thanks for the input.

    I've come across something that reads to me should "fix" this problem, but I don't think I'm implementing it correctly.
    If you just put that code on your page it won't have worked as it does not automatically know which item is your header and which your content.

    I had a play around with this and my solution is below:

    Please take note of the highlighted bits of code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <!-- http://www.sitepoint.com/forums/showthread.php?906419-Scrolling-to-just-below-the-header -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>XXX</title>
    
    
        <style type="text/css">
    
    
            html, body {
                font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
                background-color: #C9D6A0;
                margin: 0;
                padding: 0;
                color: #000;
                font-family: "Century Gothic";
            }
    
    
            ul, ol, dl {
                padding: 0;
                margin: 0;
            }
    
    
            h1, h2, h3, h4, h5, h6, p {
                margin-top: 0;
                padding-right: 15px;
                padding-left: 15px;
                text-shadow: #a2c8ca 0 0 1px;
                font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
                color: #aed6d9;
                font-weight: 500;
                font-size: .92em;
                line-height: 150%;
            }
    
    
            a img {
                border: none;
            }
    
    
            a:link {
                color: #AED6D9;
                text-decoration: none;
            }
    
    
            a:visited {
                color: #AED6D9;
                text-decoration: underline;
            }
    
    
            a:hover, a:active, a:focus {
                text-decoration: none;
            }
    
    
            .container {
                width: 960px;
                background-color: #603B3D;
                margin: 0 auto;
            }
    
    
            .header {
                height: 200px;
                width: 960px;
                background-color: #603B3D;
                text-align: left;
                position: fixed;
                z-index: 1000;
                opacity:0.8;
    
    
                left:50%;
                margin-left:-480px;
                top:0;
            }
    
    
            .header img { float: left; }
    
    
            .header ul {
                margin: 5px 0 0 400px;
                text-align: center;
                list-style: none;
            }
    
    
            .header ul li {
                width: 127px;
                margin: 0px;
                float: left;
            }
    
    
            .content {
                margin: 186px 0 0;
                padding: 10px 0;
                font-family: "Century Gothic";
                font-size: 12pt;
            }
    
    
            .bigger { font-size: 85%; }
    
    
            .footer {
                height: 15px;
                width: 960px;
                margin: 0 0 0 -480px;
                padding: 10px 0;
                position: fixed;
                bottom: 0;
                left: 50%;
                background: #603B3D;
            }
    
    
            .fltrt {
                float: right;
                margin-left: 8px;
            }
    
    
            .fltlft {
                float: left;
                margin-right: 8px;
            }
    
    
            .clearfloat {
                clear: both;
                height: 0;
                font-size: 1px;
                line-height: 0px;
            }
    
    
            body, td, th {
                color: #AED6D9;
            }
    
    
            /****************************************/
            /** Set these additional CSS properties */
            body, html {
                height:100%;
                width:100%;
            }
    
    
            #content {
                margin:0;
                padding:0;
                width:100%;
                height:100%;
                overflow: auto;
            }
            .container {
                padding-top:200px;
            }
    
    
        </style>
    
    
    </head>
    
    
    <body>
    <div class="header" id="header"> <!-- Make sure you add the ID "header" here --> 
        <img src="http://placehold.it/300x300" width="443" height="186" alt="XXX">
        <ul>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
            <li><a href="#"><img src="http://placehold.it/300x300" width="127" height="90" alt="XXX"></a></li>
        </ul>
    </div>
    
    
    <div class="content" id="content"> <!-- Make sure you add the ID "content" here -->
        <div class="container">
            <h1>01</h1>
            <h1>02</h1>
            <h1>03</h1>
            <h1>04</h1>
            <h1>05</h1>
            <h1>06</h1>
            <h1>07</h1>
            <h1>08</h1>
            <h1>09</h1>
            <h1>10</h1>
            <h1>11</h1>
            <h1>12</h1>
            <h1>13</h1>
            <h1>14</h1>
            <h1>15</h1>
            <h1>16</h1>
            <h1>17</h1>
            <h1>18</h1>
            <h1>19</h1>
            <h1>20</h1>
            <h1>21</h1>
            <h1>22</h1>
            <h1>23</h1>
            <h1>24</h1>
            <h1>25</h1>
            <h1>26</h1>
            <h1>27</h1>
            <h1>28</h1>
            <h1>29</h1>
            <h1>30</h1>
            <h1>31</h1>
            <h1>32</h1>
            <h1>33</h1>
            <h1>34</h1>
            <h1>35</h1>
            <h1>36</h1>
            <h1>37</h1>
            <h1>38</h1>
            <h1>39</h1>
            <h1>40</h1>
            <h1>41</h1>
            <h1>42</h1>
            <h1>43</h1>
            <h1>44</h1>
            <h1>45</h1>
            <h1>46</h1>
            <h1>47</h1>
            <h1>48</h1>
            <h1>49</h1>
            <h1>50</h1>
    
    
        </div>
    </div>
    <div class="footer">
        <p>
            <span class=bigger>
                <a target="_blank" href="#">XXX <img src="http://placehold.it/300x300" width="15" height="15" alt="XXX"></a>,
                <a target="_blank" href="#">XXX <img src="http://placehold.it/300x300" width="15" height="15" alt="XXX"></a>,
                <a target="_blank" href="#">XXX <img src="http://placehold.it/300x300" width="15" height="14" alt="XXX"></a>
            </span>
        </p>
    </div>
    
    
    <script>
    (function(){
        var content, header
        function adjustScroll(event) {
            var e, key, remainingSpace;
    
    
            content = content || document.getElementById('content');
            header  = header  || document.getElementById('header');
    
    
            e = event || window.event;
            key = e.which || e.keyCode;
    
    
            if ( key === 33 ) { // Page up
                remainingSpace = content.scrollHeight - content.scrollTop;
                setTimeout(function () {
                    content.scrollTop = (remainingSpace >= content.scrollHeight - header.offsetHeight) ? 0 : (content.scrollTop + header.offsetHeight);
                }, 10);
            }
            if ( key === 34 ) { // Page down
                remainingSpace = content.scrollHeight - content.scrollTop - content.offsetHeight;
                setTimeout(function () {
                    content.scrollTop = (remainingSpace <= header.offsetHeight) ? content.scrollHeight : (content.scrollTop - header.offsetHeight);
                }, 10);
            }
        }
    
    
        document.onkeydown = adjustScroll;
    }());
    </script>
    </body>
    </html>
    Things to take note of:
    • The extra CSS
    • The IDs placed on the .header and .content <div>s
    • The JavaScript code at the bottom of the page (the optimal placement would be just before the closing body tag). (I also modified the example from Stack Overflow so it's a little easier to read.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll try to get it to work and let you know how I do...

  12. #12
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    I had a play around with this and my solution is below:

    Please take note of the highlighted bits of code.

    Code:
         #content
             padding:0;
    
         .container 
             padding-top:200px;

    Hello John,

    I'm having trouble with those two bits of additional CSS code. When I add that padding code to #content, it makes me lose the beginning of my content under the header (meaning it gets hidden under there). When using the padding-top noted above, it pushes down my entire header from the top of the page, (which it shouldn't be), leaving just the background color above it. This is before inserting the script.

    Can something else be done, that would still allow the script to work correctly?

    Is it better to add the actual script to the page directly, or save it in a file that's inserted?

    Thank you...

  13. #13
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I think you'll need to make sure that your .container div is only inside of the .content div

    One other change I made to the .container div was that I removed the overflow:auto property.

    If in doubt, copy my entire example in to a HTML file and use it for a reference as to where elements are positioned and what CSS is applied to them
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #14
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    I think you'll need to make sure that your .container div is only inside of the .content div

    One other change I made to the .container div was that I removed the overflow:auto property.

    If in doubt, copy my entire example in to a HTML file and use it for a reference as to where elements are positioned and what CSS is applied to them

    OK, thanks John. I'll try it again, and let you know how it goes. If I run into more problems, I could always paste the code to show exactly how I have things setup...

    I appreciate this!

  15. #15
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello John,

    I tried swapping the container and content divs as these were indeed reversed in relation to your example. However, I still must be doing something wrong. With how I've attempted to re-code my page to implement these changes, the header is shifting to the left - when I say to the left, I mean left of the content, in the green area that fills the side of the monitor. In addition, when I test the page in IE7 after making these changes, I can't see my text at all (it was fine before). That's important to me because I want to be able to reach people that might be using older equipment/browsers. This is before adding the Java for the page scroll function as I'm first trying to get the page to still look the same after I make adjustments to the code.

    I am also seeing the footer expand out in width to the right a bit vs. the width of the content. If I save your code example as a page, I'm also seeing that happening there as well (along with a similar - though shadowed version - spillover in the header) Not sure what's causing this as they should match the content in width. This is happening in every browser I've tried it with. These were OK with my existing code.

    I've posted some "dummy" code below to show how I left things in one of my pages (similar to the first one, but not the same) before adding the Java for the scroll fix.

    I'd be lying if I said this didn't make me nervous. That has nothing to do with you! It's just my own worries. Implementing this is basically the last piece to "fixing" my site before I'll host it and make any last little adjustments, etc., that may be needed. It's frustrating that I can't figure out myself how to implement this correctly. I'm very sorry to keep coming back to ask for more, but am grateful that you obviously know what you're doing and are willing to help...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    <title>XXX</title>
    <meta name="description" content="XXX">
    <meta name="keywords" content="XXX">
    <meta name="geo.region" content="XXX">
    <meta name="geo.placename" content="XXX">
    <meta name="geo.position" content="XXX">
    <meta name="ICBM" content="XXX">
    <style type="text/css">
    <!--
    Access-Control-Allow-Origin: *
    @font-face {
    	font-family: 'Century Gothic';
    	src: url('../webfonts/CenturyGothic.eot');
    	src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url
    
    ('../Fonts/CenturyGothic.ttf') format('truetype'), url
    
    ('../Fonts/CenturyGothic.svg') format('svg');
    }
    html, body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	 height:100%;
         width:100%;
    	background-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero 
    
    padding and margin on lists. For 
    
    consistency, you can either specify the amounts you want here, or on the list 
    
    items (LI, DT, DD) they 
    
    contain. Remember that what you do here will cascade to the .nav list unless 
    
    you write a more specific 
    
    selector. */
    	margin: 0;
    	text-shadow: #A2C8CA 0 0 1.00px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    
    	
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where 
    
    margins can escape 
    
    from their containing div. The remaining bottom margin will hold it away from 
    
    any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements 
    
    within the divs, instead of the 
    
    divs themselves, gets rid of any box model math. A nested div with side padding 
    
    can also be used as an 
    
    alternate method. */
    	text-shadow: #A2C8CA 0 0 1.00px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some 
    
    browsers around an image when it 
    
    is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the 
    
    group of selectors that create the 
    
    hover effect. ~~ */
    a:link {
    	color: #AED6D9;
    	text-decoration: none; /* unless you style your links to look extremely 
    
    unique, it's best to 
    
    provide underlines for quick visual identification */
    }
    a:visited {
    	color: #AED6D9;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard 
    
    navigator the same hover experience 
    
    as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    	padding-top:200px;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, 
    
    centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your 
    
    layout. It contains an image 
    
    placeholder that should be replaced with your own linked logo ~~ */
    .header {
    	height: 200px;
    	width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	position: fixed;
    	z-index: 1000;
    }
    .header img {float: left;}
    	.header ul#noBullet {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 127px;
    			margin: 0px;
    			float: left;
    		}
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements 
    
    within this div have padding on 
    
    their sides. This saves you from any "box model math". Keep in mind, if you add 
    
    any side padding or border 
    
    to the div itself, it will be added to the width you define to create the 
    
    *total* width. You may also choose to 
    
    remove the padding on the element in the div and place a second div within it 
    
    with no width and the padding 
    
    necessary for your design.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 2px 0;
    	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    	font-size: 1em;
    }
    
    #content {
                margin:0;
                padding:0;
                width:100%;
                height:100%;
                overflow: auto;
            }
    
    .bigger { font-size:91%; }
    
    .width { width : 930px; 
    	* + padding-left: 40px;
    	* padding-left: 40px;
    }
    
    .picctr { text-align : center; }
    
    
    /* ~~ The footer ~~ */
    .footer {
    	height: 21px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 9px 0;
    	position: fixed;
    	z-index: 999;
    	bottom: 0;
    	left: 50%;
    	background: #603B3D;
    }
    
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The 
    
    floated element must precede the 
    
    element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The 
    
    floated element must precede the 
    
    element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final 
    
    element following the last floated 
    
    div (within the #container) if the #footer is removed or taken out of the 
    
    #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style>
    <script type="text/javascript" src="textshadow.js"></script>
    
    </head>
    
    <body>
    
    
      <div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    </ul></div>
      <div class="content" id="content"><div class="container">
        <p>&nbsp;</p>
        <p><div class="picctr">
          <img src="XXX.jpg" width="800" height="429" alt="xxx">
        </div></p>	
        <p>This is fake text to fill space here and replace my actual content.</p>
        <p>-----------------------------------------</p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without 
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    etc.</p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without 
    
    </p>
        <p><div class="picctr"><img src="XXX.jpg" width="800" height="430" 
    
    alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    
    </p><br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    :
        </p><br>
        <ul>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's public.  I'm 
    
    trying to hopefully get the quirks worked out that are being 
    
    encountered.</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public</li></div></div>
        <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    
    quirks worked out that are being encountered.</li></div></div></ul>
        <p><div class="picctr"><img src="XXX.jpg" width="800" height="429" 
    
    alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    
    </p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without 
    
    </p><br>
        <p>This is generic text inserted to show the problem I'm having <span 
    
    class=bigger>(please also see the smaller text near the bottom of this 
    
    page)</span>:</p><br>
        <ul>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's public <br>
           I'm trying to hopefully get the quirks worked out that are being 
    
    encountered.
          </li></div><br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div>
        </ul>
        <p><div class="picctr">
        <img src="XXX.jpg" width="800" height="429" alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  <br>
      </p>
      <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.</p>
        <p>&nbsp;</p>
        <HR color="A2C8CA">
        <p>&nbsp;</p>
        <p style="font-size:.8em;">Some additional details on the above:<br>
    </p><ul style="font-size:.8em;">
        <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div>
    <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's publicThis is text to fill a line item in 
    
    this dummy page, to replace the actual content I'll be using for my site once 
    
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is text to fill a line item in this dummy page, to replace the actual content 
    
    I'll be using for my site once it's publicThis is text to fill a line item in 
    
    this dummy page, to replace the actual content I'll be using for my site once 
    
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    
    to replace the actual content I'll be using for my site once it's 
    
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    
    is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out 
    
    on</li></div></div>
    </ul>
    <BR>
        <p style="font-size:.8em;">Final items noted to demonstrate my site 
    
    issues:</p>
        <ul style="font-size:.8em;"><div class=width><li>This is final item 
    
    one</li></div>
          <div class=width><li>Description for final line item two</li></div>
          <div class=width><li>Third item</li></div>
          <div class=width><li>...and last listed item</li></div></ul></p>
        <p style="font-size:.8em;">All other pre-payment levels have no maximum 
    
    percentage of useage per season.</p><br>
        <p style="font-size:.8em;">This is generic text inserted to show the 
    
    problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down</p>
        <br>
        <p>&nbsp;</p>
        <!-- end .container --></div>
        <!-- end .content --></div> 
      <div class="footer">
        <p><span class=bigger><img src="Brown ftr.png" width="147" height="19"><a 
    
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="15" 
    
    alt="XXX"></a>, <a target="_blank" 
    href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a 
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14" 
    alt="XXX"></a></span></p></div>
        <!-- end .footer --></div>
    </body>
    </html>

  16. #16
    SitePoint Member
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello John,

    Would you mind taking another look at this?

    I tried implementing things as you suggested, left it alone for a few days to work on other stuff, and came back to it today. I'm still running into some issues:

    • If I swap the container and content div positions in my code, my content is not displaying in IE 7.

    • If I leave the container & content divs as is, my header shifts downward from the top

    • If I instead begin the container div after closing the header div, my header shifts to the left of the screen - overlapping the "C9D6A0" colored background fill to the side - instead of staying within the width of the container. Oddly, this shift doesn't occur in IE 7, but does in newer IE versions, as well as in Chrome

    • Even with these glitches, I still don't see the page scroll working. However, I attached it as a file that I made by saving your re-written Java. Will this work better with the Java text placed directly in the code/page?



    I've pasted the code below that shows my last attempt at this, reflecting what I noted above (with the header div out of the container div). What am I doing wrong? I'm trying to make sense of what does what, but I'm running in circles.

    I'm grateful for your help...


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    <title>XXX</title>
    <meta name="description" content="XXX">
    <meta name="keywords" content="XXX">
    <meta name="geo.region" content="XXX">
    <meta name="geo.placename" content="XXX">
    <meta name="geo.position" content="XXX">
    <meta name="ICBM" content="XXX">
    <link rel="icon" href="file:///C:/Users/Martin/Documents/Unnamed%20Site%202/favicon.ico">
    <link rel="shortcut icon" href="file:///C:/Users/Martin/Documents/Unnamed%20Site%202/favicon.ico">
    <style type="text/css">
    <!--
    Access-Control-Allow-Origin: *
    @font-face {
    	font-family: 'Century Gothic';
    	src: url('../webfonts/CenturyGothic.eot');
    	src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url('../Fonts/CenturyGothic.ttf') format('truetype'), url('../Fonts/CenturyGothic.svg') format('svg');
    }
    html, body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #C9D6A0;
    	 height:100%;
    	 width:100%;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For 
    
    consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they 
    
    contain. Remember that what you do here will cascade to the .nav list unless you write a more specific 
    
    selector. */
    	margin: 0;
    	text-shadow: #A2C8CA 0 0 1.00px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    
    	
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape 
    
    from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the 
    
    divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an 
    
    alternate method. */
    	text-shadow: #A2C8CA 0 0 1.00px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it 
    
    is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the 
    
    hover effect. ~~ */
    a:link {
    	color: #AED6D9;
    	text-decoration: none; /* unless you style your links to look extremely unique, it's best to 
    
    provide underlines for quick visual identification */
    }
    a:visited {
    	color: #AED6D9;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience 
    
    as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    	padding-top:188px;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image 
    
    placeholder that should be replaced with your own linked logo ~~ */
    .header {
    	height: 200px;
    	width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	position: fixed;
    	z-index: 1000;
    }
    .header img {float: left;}
    	.header ul#noBullet {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 127px;
    			margin: 0px;
    			float: left;
    		}
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on 
    
    their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border 
    
    to the div itself, it will be added to the width you define to create the *total* width. You may also choose to 
    
    remove the padding on the element in the div and place a second div within it with no width and the padding 
    
    necessary for your design.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 2px 0;
    	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    	font-size: 1em;
    }
    
    #content {
                margin:0;
                padding:0;
                width:100%;
                height:100%;
                overflow: auto;
            }
    
    .bigger { font-size:91%; }
    
    .width { width : 930px; 
    	* + padding-left: 40px;
    	* padding-left: 40px;
    }
    
    .picctr { text-align : center; }
    
    
    /* ~~ The footer ~~ */
    .footer {
    	height: 21px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 9px 0;
    	position: fixed;
    	z-index: 999;
    	bottom: 0;
    	left: 50%;
    	background: #603B3D;
    }
    
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the 
    
    element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the 
    
    element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated 
    
    div (within the #container) if the #footer is removed or taken out of the #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style>
    <script type="text/javascript" src="textshadow.js"></script>
    
    </head>
    
    <body>
    
    
      <div class="header" id="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
                   <li><a href="XXX"><img src="XXX" width="127" 
     
    height="90" alt="XXX"></a></li>
                   <li><a href="XXX"><img src="XXX" width="127" 
     
    height="90" alt="XXX"></a></li>
    <li><a href="XXX"><img src="XXX" width="127" height="90" 
     
    alt="XXX"></a></li>
    <li><a href="XXX"><img src="XXX" width="127" height="90" 
     
    alt="XXX"></a></li>
    <li><a href="XX"><img src="XXX" width="127" height="90" 
     
    alt="XXX"></a></li>
    <li><a href="XXX"><img src="XXX" width="127" height="90" 
     
    alt="XXX"></a></li>
    <li><a href="XXX"><img src="XXX" width="127" height="90" 
     
    alt="XXX"></a></li>
                   <li><a href="XXX"><img src="XXX" width="127" 
     
    height="90" alt="XXX"></a></li>
                    </ul></div>
    <div class="container">
      <div class="content" id="content">
        <p>&nbsp;</p>
        <p><div class="picctr">
          <img src="XXX.jpg" width="800" height="429" alt="xxx">
        </div></p>	
        <p>This is fake text to fill space here and replace my actual content.</p>
        <p>-----------------------------------------</p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without 
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    etc.</p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without </p>
        <p><div class="picctr"><img src="XXX.jpg" width="800" height="430" 
    alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
     </p><br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    :
        </p><br>
        <ul>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's public.  I'm 
    trying to hopefully get the quirks worked out that are being 
    encountered.</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public</li></div></div>
        <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    quirks worked out that are being encountered.</li></div></div></ul>
        <p><div class="picctr"><img src="XXX.jpg" width="800" height="429" 
    alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the </p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out on without</p><br>
        <p>This is generic text inserted to show the problem I'm having  <span class=bigger>(please also see the smaller text near the bottom of this 
    page)</span>:</p><br>
        <ul>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's public.  I'm trying to hopefully get the 
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's public <br>
           I'm trying to hopefully get the quirks worked out that are being 
    encountered.
          </li></div><br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div>
        </ul>
        <p><div class="picctr">
        <img src="XXX.jpg" width="800" height="429" alt="xxx"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.<br>
      </p>
      <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.</p>
        <p>&nbsp;</p>
        <HR color="A2C8CA">
        <p>&nbsp;</p>
        <p style="font-size:.8em;">Some additional details on the above:<br>
    </p><ul style="font-size:.8em;">
        <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div>
    <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's publicThis is text to fill a line item in 
    this dummy page, to replace the actual content I'll be using for my site once 
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is text to fill a line item in this dummy page, to replace the actual content 
    I'll be using for my site once it's publicThis is text to fill a line item in 
    this dummy page, to replace the actual content I'll be using for my site once 
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page, 
    to replace the actual content I'll be using for my site once it's 
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This 
    is generic text inserted to show the problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down, no 
    text/content is missed out on without having to adjust their position on the 
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    the problem I'm having on my page with scrolling up too much when using the 
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    performed in this manner by the height of the header and any padding directly 
    below it so when one hits page down, no text/content is missed out 
    on</li></div></div>
    </ul>
    <BR>
        <p style="font-size:.8em;">Final items noted to demonstrate my site 
    issues:</p>
        <ul style="font-size:.8em;"><div class=width><li>This is final item 
    one</li></div>
          <div class=width><li>Description for final line item two</li></div>
          <div class=width><li>Third item</li></div>
          <div class=width><li>...and last listed item</li></div></ul></p>
        <p style="font-size:.8em;">This is text to flesh out this section.</p><br>
        <p style="font-size:.8em;">This is generic text inserted to show the 
    problem I'm having on my page 
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    need to limit/reduce the scroll when performed in this manner by the height of 
    the header and any padding directly below it so when one hits page down</p>
        <br>
        <p>&nbsp;</p>
        <!-- end .content --></div> 
        <!-- end .container --></div>
      <div class="footer">
        <p><span class=bigger><img src="Brown ftr.png" width="147" height="19"><a 
     
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="15" 
    alt="XXX"></a>, <a target="_blank" 
    href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a 
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14" 
    alt="XXX"></a></span></p></div>
        <!-- end .footer --></div>
        <script type="text/javascript" src="pagescroll.js"></script>
    </body>
    </html>


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
  •