Creating a fixed header. Help!!

[cause]

I have been trying to create a site similar to:

www.puscifer.com


the header is constant through out the whole site allowing it to play music and an animations without interruption, basically, only the body of the site has navigational facilities.

How do I accomplish this and which software do you suggest?

 

[CaldwellYSR]

So lets say all the code on his header is wrapped in a <div id="header"></div> tag. (I didn't look at the source so it may be different. In the CSS file you would put

#header {
position: fixed;    /*Takes the #header out of the document flow and holds it in one spot in relation to the window*/
top: y;             /*Where y = distance from top of window*/
left: x;            /*Where x = distance from left of window*/
}

I just want to say you should use this sparingly. In the site in question the body content is really smushed because of the header. If that's fine with you then go for it but just know that if you do something like that it may become a problem if someone has a smaller window

 

[cause]

I see what you mean, and I think you are right. I really like the idea of having an mp3 player with some nice animations at the top though.
I think in his site in particular he has crammed a lot of information underneath, so what I would do would be keep things big and simple down there so it doesn't seemed rammed up with information.


I haven't yet tried modifying the code as you suggested, since I'm using iweb and need to open the site remotely with komodo. It all takes time.


Does the fixed mode mean that every time I load a new page the top will be static then? Because I thought perhaps the fixed option would keep the header independent from the body but it would have to reload every time I navigate to a difference page on the site. This would interfere with the whole purpose of the "globally fixed" header.

So lets say all the code on his header is wrapped in a <div id="header"></div> tag. (I didn't look at the source so it may be different. In the CSS file you would put

#header {
position: fixed;    /*Takes the #header out of the document flow and holds it in one spot in relation to the window*/
top: y;             /*Where y = distance from top of window*/
left: x;            /*Where x = distance from left of window*/
}

I just want to say you should use this sparingly. In the site in question the body content is really smushed because of the header. If that's fine with you then go for it but just know that if you do something like that it may become a problem if someone has a smaller window

 

[CaldwellYSR]

I misunderstood the question, if you only want the content to reload and nothing else then you'll have to use an iframe.

 

[cause]

Thank you very much.

i have been doing some research on iframes and it is exactly what I need to learn.

Thanks again!