Frameless HTML Page With Static Header and Footer

by Jay 6. August 2008 09:44
This is quite intresting, to have static page header and footer without the frames, and stay as it is even when the page has scroll, cool isnt it ?

Thanks to CSS and XHTML, we can achieve it by some simple coding.

The first thing we need to understand is the html page must be valid XHTML 1.0 page, so the following piece of code must be present in every html page where you need static header and footer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now for the css , the first step is the define the style for html and body tag.

html, body
{
margin: 0;
padding: 0;
height: 100%;
font-size: 90%;
font-family: Arial, Verdana,Sans-Serif;
}


Second step is to define the style for page header.

#PageHeader
{
width: 100%;
background: #fff;
z-index: 100;
height:20px;
font-size:120%;
padding:10px;
border-bottom: 1px solid #999;
margin-bottom:10px;
}

html > body
#PageHeader
{
position: fixed;
z-index: 10;
}


Now we need to work out for the main body content by defining styles as below.

html > body #BodyContent
{
padding: 105px 10px;
}
#PageContent
{
margin-left: 50px;
}

Finally its time for page footer, quite similar to page header.

#PageFooter
{
width: 100%;
}

html > body #PageFooter
{
padding-top: 10px;
padding-bottom: 5px;
height: 20px;
position: fixed;
bottom: 0;
z-index: 10;
background: #fff;
text-align: left;
border-top: 1px solid #000;
font-size:120%;
padding:10px;
}

So its all done now, we are ready to build the page with static header and footer.

To find out how the page looks like , check this demo. View the source of the page and modify it as per your requirement.

Cheers !

Currently rated 4.8 by 13 people

  • Currently 4.846154/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

HTML and CSS

Comments

Add comment


 

biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

RecentComments

Comment RSS