LinkBack URL
About LinkBacks
set the position
Webmaster SEO Tools, Resources, Web Hosting, Discussion Forums
Check out our supporters:
Junior Member
How to make....
Hi all
Can anybody tell me how to make a fixed footer / header with the help of CSS.
Thanks
Junior Member
Member
In my experience, footer + header layouts are best achieved using a float based layout, optionally combined with relative positioning.
Have a look at the CSS Float Based Layouts or Equal Height Columns using Floats.
Junior Member
Use the position attribute.
Well... is this a good way to code html? Feel like a little strange...
Junior Member
fixed header / footer
here is the code for your question
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and footer</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 footer-<length> 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:header-<length>;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:footer-<length>;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#footer{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="header"> header </div>
<div id="footer"> footer </div>
<div id="content"> content </div>
Junior Member
PM me if you want the firefox adjusted code too.
Senior Member
I always create headers/footers using scripting languages like PHP or ASP.net. That way you can re-use the same piece of code for all pages and if you need to change the header or footer you only need to make the change once instead of for every page.
Junior Member
I agree. Better use header.php and footer.php. You'll then have to edit only these 2 files.Originally Posted by surreypcsupport
Hope this helps
Senior Member
Just read the help menu in dreamwaver and there you have it.
A lot of iPad apps reviews and new iPad app that you can use for your iPad or iPhone.
Junior Member
Creating a web layout with a fixed header and footer is quite easy in your modern browsers like Firefox, IE7/IE8, Opera, Safari, Chrome, etc. It's simply done by using the CSS property declaration position: fixed. Unfortunately,browser IE6 does not support the fixed value, and treats it as if it were position: static which is far from the results that position: fixed achieves.
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
Bookmarks