Skip to main content
S
snelsoninthemtns
Known Participant
March 11, 2012
Answered

Fixed Header/Footer With Scrolling Inbetween

  • March 11, 2012
  • 1 reply
  • 22387 views

I use Dreamweaver CS4 and wonder if there is a way to have a fixed header and footer with scrolling inbetween

Sandy

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Nancy O.

    I'm just not sure how it fits together so would appreciate more help

    from you when time allows.

    I have decreased the header height to 149

    I have sliced the background image down to a height of 172 (width of 50)

    which includes the nav bar. The name of the background image is now

    bkgrndImageHdr.gif. It now resides in the body.css because I just don't

    know where it should be.

    The current file that I'm working with is http://www.index_test3.html

    with index5.css.

    Thanks so much - you're great,

    Sandy


    CSS:

    Remove background from body and apply to #header.

    #header {

        text-align: center;

        width: 100%;

        background-image: url(images/bkgrndImageHdr.gif);

        position:fixed;

        top:0;

        left:0;

    }

    HTML:

    Move your #header div above the #container div

    <div id="header>

    header content & menu goes here

    </div>

    <div id="container">

    <div id="mainContent" align="center">

      <p><img src="images/spacer.gif" width="100" height="5" alt="spacer" /></p>

        <h1>WELCOME</h1>

         The rest of your page content here...

    </div>

    </div>

    <div id="StickyFooter">

    sticky footer content here

    </div>

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

    1 reply

    hans-g.
    hans-g.
    Legend
    March 11, 2012

    Hello Sandy,

    your reflections are probably in the direction of the "sticky" technology. Nancy O. has made available some very appropriate demos here:

    http://alt-web.com/DEMOS/CSS2-Sticky-Header.shtml and http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml.

    Good luck!

    Hans-Günter

    S
    snelsoninthemtnsAuthor
    Known Participant
    March 15, 2012

    Hello Hans,

    Thank you for the demos. I've tried the Sticky-Header and it loads but

    I'm not sure how to apply it in my situation. I've got a couple of

    things going. I've added a repeating background which lines up

    perfectly in Firefox but is a couple of pixels off using Explorer.

    Grrrrr . . . Bottom line is I want the logo(header) and

    copyright(footer) to remain fixed no matter what vertical size the page

    is. My test page is http://www.justletmelearn.org/index_test2.html and

    I have the sticky-header code commented out at the moment.

    Thanks for any help you can give me to get going in the right direction,

    Sandy

    hans-g.
    hans-g.
    Legend
    March 15, 2012

    Hello Sandy,

    first try sticky footer. I used the inputs from the link above and in my online reader it works like a charm, as well as footer or header. In your source code I miss an advice like this before </body>

    </div>
    <div id="Sticky">
    <h2>Here is a Sticky Footer</h2>
    <p>&copy; 2012 Alt-Web Design & Publishing <a href="../index.shtml">alt-web.com</a> </p>
    </div><!--end sticky -->

    </body>

    To see what happens, you could use Nancy's text, after that you can replace it with your text.

    Hans-Günter

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices