We help IT Professionals succeed at work.

Web page Header and footer

asamuel
asamuel asked
on
Medium Priority
1,517 Views
Last Modified: 2008-02-01
Hi,
I am using dreamweaver to create web site, I don't want to use frame to devide my page, is there any other way
to have certain area fixed in the page and another areas display different information, I know how I do that using frames, I am looking for another solution
Comment
Watch Question

Commented:
Not sure if this is exactly what you are after but you can use tables for layout purposes as follows:

<html>
<head>
<title>Layout Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100px"><div align="center">This would be the Header Section</div></td>
  </tr>
  <tr>
    <td height="100%"><div align="center">This would be where your content would
        go. </div></td>
  </tr>
  <tr>
    <td height="100px"><div align="center">This would be the Footer Section</div></td>
  </tr>
</table>
</body>
</html>

The above code creates a 100% x 100% table consisting of 3 rows and 1 column. I have fixed the top and bottom row height to 100 pixels but they too can be set to a % value and will therefore scale as the browser window is resized.

To utilise this method, the content for your header section would go in between the first <td> and </td> tags. The content for the page body would go in between the second <td> and </td> tags and finally the content for your footer section would go in between the last <td> and </td> tags.

Using tables with width & height set to % means that the content areas will resize dependant on the available screen area. Setting both values to 100% means that the table will expand to fit the entire available screen and will resize if the browser window is resized.

Be aware that the use of layout tables is regarded as obsolete so you may wish to use Cascading Style Sheets instead. I still use layout tables when designing in-house websites because I find it a far quicker method.

Hope this helps, if not then post a comment and I'll try and help further.

Bill

Author

Commented:
This is good thank you, how to do that with CSS
Commented:
The following is something similar using CSS inline styles.

<html>
<head>
<title>Layout with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body leftmargin="0" topmargin="0">
<div align="center" id="Layer1" style="position:absolute; overflow:auto;top:0; left:0; width:100%; height:20%; z-index:1; background-color: #CC3300; layer-background-color: #CC3300; border: 1px none #000000;">Header<BR>
    Goes<BR>Here<BR></div>
  <div align="center" id="Layer2" style="position:relative; overflow:auto;top:20%;left:0;width:100%; height:60%; z-index:1; background-color: #CC6600; layer-background-color: #CC6600; border: 1px none #000000;">Content<BR>goes<BR>here<BR></div>
<div align="center" id="Layer3" style="position:relative; overflow:auto;top:20%;width:100%; height:20%; z-index:3; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000;">Footer<BR>Goes<BR>Here<BR></div></div>
</body>
</html>

If you resize your browser to a short height you will notice that scrollbars appear. This is caused by the overflow property being set to auto.

I've spilit the page 20-60-20 but you can obviously change this to suit your needs.

Bill

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.