# Static header and footer content



## Masta Squidge (Jul 29, 2007)

Hello, i have been screwing around with my web page final for school and I was previously using iframes to achieve the effect of having a menu/header that does not need to be on every single page in the site.

This works fine if every single page is the exact same length (vertically) but getting the iframe to expand to fit the content is... a challenge. I have gotten it to work on firefox and IE, but never both at once, and never properly on either.

So I give up with the iframes, and I would like to learn the proper way of doing this. Using an iframe and a "target="content" in each link of course works to load the content, but it also does not display the new URL to the viewer, IE: no matter what page you view it always displays "...index.html".

I know there is a way to do so that doesnt use iframes, and doesnt use a bunch of server side scripting, but I do not know what it is.

So, what i need is to have my menu/banner function so that when I click a link on the menu the content BELOW changes, as well as the URL but WITHOUT having to have the header code on every single page, or causing a visible re-load of the header. Basically like every proper website does on the net.

I have this bit of code from a guy i know:


```
<title>Fixed header</title>
<style type="text/css">
 body{
  margin:0;
  padding:<length> 0 0 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:<length>;
 }
 @media screen{
  body>div#header{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header </div>
<div id="content"> content </div>
```
But he prides himself on being as useless as possible while still being able to say he helped... that is to say, i have no idea how to actually USE said code.

i dont know how to force the content to change using a link, because i am horribly unfamiliar with CSS. Nor do I have any idea how this is supposed to work to create the effect I want. Mostly because he refuses to set up an example page for me, and the various professional sites have much more complicated code for me to pick through.

A tutorial on this, or a functional example would be wonderful. Looking all over the net finds me a bunch of responses to this question that all include the use of some server side software or some junk, iframes, frames, or just people who have no idea.

http://www.freewebs.com/mastasquidge/Webfinal/Index.html

Above link is the website as is when using a fixed height for the content, iframe, and table cell the frame is inside of. Works great until the content starts getting longer than the iframe, and I would rather not use iframes at all.
If the above code works, I would like to learn how to use it. And no, I am not hosting it there permanently. It is just on there so I can share it with you guys easily. Nor is the layout 100% finished, or the code properly cleaned up and validated. What i am concerned with here is the menu/header.


----------



## Masta Squidge (Jul 29, 2007)

Bump!

Normally I have no issue just getting my internet boat, throwing a rig out and trolling up my answers on google, but still no luck.


----------



## Masta Squidge (Jul 29, 2007)

Bump!


----------



## Masta Squidge (Jul 29, 2007)

Bump... ive since figured out how that div stuff works, but it turns out that wasnt what i needed. 

Im still wondering if there is a way to create my header and footer as an external file that doesnt involve a bunch of server side scripting and whatnot, and without using frames or anything crappy like that. like, is there a way to load external content into a div or something similar?


----------



## colinsp (Sep 5, 2007)

AFAIK the only way to do what you want is with a server side language like php unless you want to go for a 'Flash' header, which if you do you would just include this in your div BUT it does mean that you would have to regenerate your flash file every time the menu structure changed. I think that php would be the best way to do this.


----------



## pcpro17 (Oct 9, 2006)

Like Colinsp said, if you want to use PHP, it would be something like this:

```
<?php include 'myheader.php'; ?>

Whatever your page content is goes here...

<?php include 'myfooter.php'; ?>
```


----------



## namenotfound (Apr 30, 2005)

If you want the page title to change with each page, you can do that with a variable between ...

Such as:


```
<?php echo $pagetitle; ?>
```
Putting that in header.php then having this on the page:


```
<?php
$pagetitle = 'Page title here';
include 'header.php';
?>

body content here

<?php include 'footer.php'; ?>
```


----------



## pcpro17 (Oct 9, 2006)

Great suggestions name! I'm going to implement that on my site; I really like it. Currently I'm switching on $_SERVER['REQUEST_URI'], which is a little cumbersome to maintain as the site grows.


----------



## Masta Squidge (Jul 29, 2007)

colinsp said:


> AFAIK the only way to do what you want is with a server side language like php unless you want to go for a 'Flash' header, which if you do you would just include this in your div BUT it does mean that you would have to regenerate your flash file every time the menu structure changed. I think that php would be the best way to do this.


PHP isnt really something I can use... the school server is a bit strict.

And its not the title that i strictly want to change... I just want to not have to reload the menu and footer for every page. Part of the reason is for an "active" link. Which works fine if the menu isnt reloaded, like when using iframes. But the second you reload it, the active no longer works even if said link is the page that is displayed.

I wonder if there is a script method for that?


----------



## pcpro17 (Oct 9, 2006)

You may be able to use JavaScript to write the pages client-side. You might also want to look into SHTML. I believe it will also allow you to do things like including a common header and footer. However, it's been a number of years since I've used it.


----------



## namenotfound (Apr 30, 2005)

If the school server is strict, it might not accept shtml, it all depends on if they have ssi enabled or not.


----------

