• Global community
    • Language:
      • Deutsch
      • English
      • EspaƱol
      • FranƧais
      • PortuguĆŖs
  • ę—„ęœ¬čŖžć‚³ćƒŸćƒ„ćƒ‹ćƒ†ć‚£
    Dedicated community for Japanese speakers
  • ķ•œźµ­ ģ»¤ė®¤ė‹ˆķ‹°
    Dedicated community for Korean speakers
Exit
0

Fixed Header/Footer With Scrolling Inbetween

Participant ,
Mar 10, 2012 Mar 10, 2012

Copy link to clipboard

Copied

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

Sandy

Views

21.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 19, 2012 Mar 19, 2012

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

...

Votes

Translate

Translate
LEGEND ,
Mar 10, 2012 Mar 10, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 14, 2012 Mar 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

@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/

Nancy O'Sheaā€” Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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/

Nancy O'Sheaā€” Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 15, 2012 Mar 15, 2012

Copy link to clipboard

Copied

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/

Nancy O'Sheaā€” Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 18, 2012 Mar 18, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 19, 2012 Mar 19, 2012

Copy link to clipboard

Copied

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/

Nancy O'Sheaā€” Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 19, 2012 Mar 19, 2012

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 12, 2012 Dec 12, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 12, 2012 Dec 12, 2012

Copy link to clipboard

Copied

LATEST

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.

Nancy O'Sheaā€” Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines