How to control the header and footer position

Get Started
1

Dear All,
I have sample page below. My problem now how can I control the location of the <div id=“header”> and <div id=“footer”>. The problem each time my list of elements differ the footer location will be different. So I want to fix it to a location but not influence by the amount of field I have in different forms. Any idea how to achieve that.

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="my1.css" media="all">  
</head> 
<body> 

<div id="main" >
<div id=logo>
<table width=1000>
<tr>
<td width=300>
<img src="images/logo.jpg">
</td>
<td width=350 align=center>
	<label class=description for=element_1></label>  
</td>
<td width=350 align=right>
</td>	
</tr>
</table>
</div>

<div id="header"> 
<ul>
<li><a href="">Home</a></li>
<li><a href="">Solutions</a></li>
<li><a href="">Customer</a></li>
</ul>
</div> 

<div >
	<h2 class="form_desicription">Add Item(Draft)<?=$status?></h2>
</div>

<table> 
<tr>
<td valign="top">
	<table>
		
		<tr>
			<td>				
			  <label class=description for=element_1>Name<font color="red">*</font></label> 
			</td>
			<td>
			  <input class="text"  id="driverName" name="itemName" value=""> 
			  <script>document.getElementById('itemName').focus()</script>			  
			</td>
		</tr>
		
		<tr>
			<td>				
			  <label class="description">Date of Birth<font color="red">*</font></label>
			</td>
			<td>
			  <input class="text" id="itemDateOfBirth" name="itemDateOfBirth" value=""> 
			  <script>document.getElementById('itemDateOfBirth').focus()</script><label class="description">(DD/MM/YYYY)</label>		
			</td>
		</tr>	
			
		
				
		<tr>
			<td>				
			  <label class=description for=element_1>Tel No(Home)<span 
			  class=required id=required_1></span></label> 
			</td>
			<td>
			  <input class="element text medium" id="itemTelHome" name="itemTelHome" value=""> 
			  <script>document.getElementById('itemTelHome').focus()</script>			  
			</td>
		</tr>
		
		<tr>
			<td>				
			  <label class=description for=element_1>Tel No(Mobile)<span 
			  class=required id=required_1></span></label> 
			</td>
			<td>
			  <input class="element text medium" id="itemTelMobile" name="itemTelMobile" value=""> 
			  <script>document.getElementById('itemTelMobile').focus()</script>			  
			</td>
		</tr>
				
		
	</table>
</td>

	
</tr>


         
</table>

<div id="footer"> 
<ul>
<li><a href="">Main Page</a></li>
<li><a href="">Print Page</a></li>
<li><a href="">Log Out</a></li>
</ul>
</div> 

</div>

</body> 
</html>
2

Hi Tomy,
You’re welcome.This has advantage of your code logic design/flow.
Maybe use the full the power of php, and focus on developing the main.php (dymanic content).

Memo: And CSS is good but suggest don’t use too much as browsers varieties; said by our teacher.
My cents only. :slight_smile:

3

Hi,

Maybe you can turn your page from html to php page format (can’t do much with html only, apart from jquery etc),

then divide page into several parts, eg header.php, menu.php,main.php & footer.php.

At last, use include_once(“footer.php”) or start your template design.

Seem main.php is usually dynamic and keepng footer.php static. :slight_smile:

Hope a little help.

For your reference only.

4

I think this means you want the footer to be in the same location regardless of how many elements are in the form above it, but you haven’t said where this “location” is to be.

Where exactly do you want the footer to appear with what I assume will be various amounts of elements in the form above it?

5

Hi,

It is up to your choice between html and php modules.
For pure html+css, it may involve some js, which is extreme good for interactive pages.
But js seems not much seo friendly , and the security is another concern too.
For big project,like vb forum script here, php is one of your tools than pure html.

For your reference as my opinion only. :slight_smile:

6

I’m not sure any longer, but isn’t this the same exact question you asked in the CSS forum? How to have the footer remain at the bottom of the page? I’m sure that you get better answers when you restrict your question to just one forum

7

Dear All,
I am kind of lost and confuse so what is the best solution pure html or break into php modules. Thank you.

8

You are right that it can’t be done with html only, but you confuse me with your PHP suggestion. This can easily be done in CSS and has nothing to do with turning pages into a php for what ever you mean with that :slight_smile:

I suggest to visit the CSS Forum and I’m sure you’le find the answer there.

9

Dear Ked38,
Yes you are getting me there. So by dividing into the foother.php will it remain at the bottom of the page rather than appear just after the submit button is it? Thank you guys.

10

I must say, I’m not really clear on what you are asking here. The footer will remain in the same position even if you add LIs. It will just get taller.