Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Web page Header and footer

Posted on 2006-03-21
Medium Priority
Last Modified: 2008-02-01
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
Question by:asamuel
  • 2

Expert Comment

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

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

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

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.


Author Comment

ID: 16247272
This is good thank you, how to do that with CSS

Accepted Solution

Willibob earned 750 total points
ID: 16249344
The following is something similar using CSS inline styles.

<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();
<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>
  <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>

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.


Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question