Static header

[Ant]

Is it possible to create a static header and have the content below scroll underneath the header?

 

If so, is it possible to do without frames.

 

In learning to design websites I thought all that was needed was a container with a position of (X) (possibly :static, not sure ) to accomplish this effect.

 

My company's web designer is telling me it cant be done without frames and frames are outdated and not to be used.

 

Thus he's telling me I cant have that option on our company's website.

 

Thanks

A.

[danhodge]

Is there no Javascript that could be used?

 

Im guessing you can just create the header using CSS and html, then use a Javascript for the rest of the content to give it this effect...

[Andrea]

Look into PHP includes - you create your header in one file and insert a link to it into each page: http://www.killerphp.com/articles/php-includes/

 

And yes - Frames are obsolete and should not be used.

[Ant]

Andrea, my question concerns having a static header without the use of frames.

 

I was wondering if it can be done without frames and if so is it a good practice in terms of good design etc..

 

I do not need to know how it's done, just if it can be done and if it's an exceptable practice.

 

I just don't want to sound misinformed/stupid when I tell the web designer it can be done without frames etc.

[Susie]

I haven't looked at any of these in great detail, but yeah, it's possible:

 

http://www.google.com/search?q=keep+header+stationary+while+rest+of+page+scrolls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

[Andrea]

Seems I misunderstood you question - but Susie's links should address the issue.

[newseed]

Without using Frames or Iframes you could use css overflow.

[Wickham]

With modern browsers you can use position: fixed; top: 0; in the header style and the header won't scroll. You need a background for the header to hide lower content scrolling behind it.

 

IE6 doesn't process position: fixed, so the header will scroll, but if you want a solution for IE6 then there is a complicated wrapper method shown here:-

http://www.wickham43.net/headerfooterfixexample.php

which uses position: absolute for older browsers with body height: 100% and overflow: hidden for the html style so that the position: absolute header doesn't scroll up and a separate stylesheet in a conditional comment just for IE6 which emulates position: fixed in IE6.