Fixed Header/Footer With Scrolling Inbetween

[snelsoninthemtns]

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

Sandy

[hans-g.]

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

[snelsoninthemtns]

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.]

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

[Nancy OShea]

@Sandy,

I don't recommend using Sticky headers & footers on your site. Normal page behavior works on everyone's device.  The plain truth is that fixed positioning isn't 100% reliable and is not well supported by iPhones, iPads, Droids and older IE browsers.  A site like yours must cater to the largest possible target audience.  Less is more here. 

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

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

[ALsp]

Hi Nancy,

Actually, position fixed is supported in the current version of iOS and

on Android. The question then becomes whether to hack for old versions

of IE.

This page, for example, has workarounds to make the header and footer

static in old IE. At the time the product was created, there was, in

fact, no support for fixed positioning in iOS so mobile devices are

filtered out.

http://www.projectseven.com/products/templates/pagepacks/luna/luna-01.htm

If we revised the product today, we would likely continue to filter

mobile devices but we would do it for usability reasons as the fixed

elements take up too much vertical real estate o small devices.

--

Al Sparber - PVII

http://www.projectseven.com

The Finest Dreamweaver Menus | Galleries | Widgets

[Nancy OShea]

Actually, position fixed is supported in the current version of iOS and on Android.

...we would likely continue to filter mobile devices but we would do it for usability reasons as the fixed

elements take up too much vertical real estate o small devices.

@Al,

Good points.

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

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

[snelsoninthemtns]

Nancy,

I really appreciate your input on this (since you wrote the "sticky"

code). Thanks also, Al for your input. I got the footer to work

beautifully, thank you Nancy and was, at this moment downsizing my logo

first before tackling the fixed header which I suspect will involve

restructuring as I don't see where I can include an image (the logo) in

your code. http://www.justletmelearn.org/index_test2.html Your

thoughts . . .

Sandy

[snelsoninthemtns]

Nancy,

Could you look at the page one more time. http://www.justletmelearn.org/index_test2.html  I have reduced the size of the header and would like to try to make the logo fixed.  Because it's an image instead of background color with text, is there anything that could be done to do this?  I love the fixed footer!!

Also, the way the logo/header is set up now, it lines up perfectly between the header image and the background image in Firefox.  It's about 2 pixels off in Explorer.  Is there a workaround for explorer on this?

Thanks for looking,

Sandy

[Nancy OShea]

You would need to restructure you layout in a few ways to make this workable.

First, use a liquid header and footer (100% width) sort of like this:

http://alt-web.com/TEMPLATES/I-page.shtml

Then move your #content division down with margin-top: 200px to add the necessary clearance.

Slice your background-image which is currently applied to the body and apply just the top part to your header division background.  You might want to include your navigation bar in the "sticky" too.  I don't have time right now to re-work this for you.  See how you do on your own and post back with your results.

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

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

[snelsoninthemtns]

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

[Nancy OShea · Accepted solution]

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/

[snelsoninthemtns]

Yes, yes, yes!!  It's working.  It works in Firefox as well as Explorer and lines up perfectly.  Thank you so much Nancy for taking the time to help me. 

http://www.justletmelearn.org/index_test3.html

Now I can concentrate on content!

[caitlin_v_]

Nancy,

I am trying to create a header which includes an image that spans the entire width of the window. I've got it set up like this:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>home</title>

<style type="text/css">

body {

    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

    background-color: #FFFFFF;

    margin: 0;

    padding: 0;

    color: #000;

    position: fixed;

}

header {

    background-color: #333;

    color: #FFF;

    position: fixed;

}

header img {

    max-width: 100%;

    position: fixed;

}

</style>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

</head>

<body>

<header>

<img src="maybe_white_logo.png" width="100%">

</header>

</body>

</html>

However, when I preview the header in Firefox, the image scales smaller and larger as I resize the window. I'd like it to appear as your header in the link above (the "I-page") appears, unchanging in size as I change the size of the window.  Really, the image is just a logo with a horizontal line that spans the width of the window. 

Any advice on how I might make the image fixed?

Thanks,

Caitlin

[Nancy OShea]

Hi Caitlin,

My I-page  header is done like so:

/**Liquid Header**/

#headerWrapper {

margin-top: 50px; /**adjust as needed**/

padding:0 10px 0 10px;

background: #000 url(your_logo.jpg) no-repeat left top;

min-height: 100px; /**adjust to height of your_logo**/

border-bottom: 1em solid #2175BC;

}

Nancy O.