i need help with php header and footer

[misheck]

I have designed a header and footer for my site and they seem to be ok when they are running individually ( I have a header.php and footer.php) but when I try to run then using a content page with the includes for both files and a few colums in the content page the footer just aligns itself under the shortest column or sometimes on top of all the columns. I think thats because I have set the CSS to place the footer at 100% of the page so it places at the bottom of the page before you scroll down the page which will be good when I have a few lines of comment on a page.

 

I dont know how I should do my div tags because I have put my opening div tag for the whole website on top of the header.php and closed it at the very end of the footer.php. Does anyone have any ideas of how to get setup the header and footer php?

[Daniel0]

I'm not quite sure what you mean? If they "work" individually, can't you just include the header at the top, and the footer at the bottom?

 

<?php include 'header.php' ?>
some content
<?php include 'footer.php' ?>

[purpleshadez]

Where ever you use include you are basically saying that all the code in the included file goes where the include statement is. I'd suggest writing a single page with both the header and footer code in them then once you have the layout as you want it split it up once you are happy with the layout.

[misheck]

I think my problem is more of a css problem than php but because I am using php for the header and footer I have posted it here. I have posted the code but I have not included the content php but thats where I am getting problems once I put in div tags for the 4 columns I will have on my site.

 

here is the css file

/*Start of header */
a:link { color: #696; text-decoration: none; background-color: transparent; } 
a:visited { color: #699; text-decoration: none; background-color: transparent; } 
a:hover { color: #c93; text-decoration: underline; background-color: transparent;background-color: #99FF66; } 
a:active { color: #900; text-decoration: underline; background-color: transparent; }

p.left {float: left;}
p.right{float: right; color:#696 ;}
a.logo:link {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
a.logo:visited {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
a.logo:hover {font-size: x-large; color: green;font-weight: bold; text-decoration: none;background-color: ;}
a.logo:active {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
select.header {color: #696;}
input.header {color: #696;}
hr.header {color: #696;background-color: #f00;height: 1px; border-bottom: 0px; border-top: 0px;}

/*End of header */


/*Here is the body tag formatting 
Beginning of body*/
body {width: 60%; margin-left: auto; margin-right: auto;height: 100%; }


/*Beginning of main division */
#main_topleft {width: 40%;
background-color: #99FF66 ; 
float: left;}
/*End of main division */



/*Beginning of middle division */

#middle {width: 15%;float: left; background-color: #66FFCC;}
/*End of middle division */



/*Beginning of main top right division */
#main_topright{width: 30%; float: left; background-color: #FFCC00;}
/*End of main top right division */



/*Beginning of advert division */
#advert {width: 15%;float: right; background-color: #FFFF00;}

/*End of main advert division */



/*Beginning of footer */


#footer {position: absolute;bottom: 0;width: inherit; padding-top: 3px; }
hr.footer { color: #696;background-color: #f00;height: 1px;}
p.footer {text-align: center; }
span.footer {color: red;}

 

here is the footer and header

Go to:

<select class="header"><option value="Zimbabwe" >Zimbabwe</option><option value="Ghana">Ghana</option>
<option value="Nigeria">Nigeria</option>
<option value="Kenya">Kenya</option>
<option value="Zambia">Zambia</option>
<option value="Gambia">Gambia</option>
</select>
<input type="submit" value="Go" class="header"/></p><br />
<p> </p>
<hr  class="header"/>
<a href="" class="logo">Shout-Africa</a>

<hr class="header"/>
<p class="left">
<a href="">News</a> |
<a href="">Politics</a> |
<a href="">Sports</a> |
<a href="">Entertainment</a> |
<a href="">Gallery<a> |
<a href="">TV</a> |
<a href="">Music</a>
</p>
</div>
[b]footer[/b]
<a href="">Worldwide</a> |
<a href="">Africa</a> |
<a href="">UK</a> |
<a href="">Zimbabwe</a> |
<a href="">Ghana</a> |
<a href="">Nigeria</a> |
<a href="">Kenya</a> |
<a href="">Zambia</a> |
<a href="">Gambia</a> 

<br />
<a href="">Submit Story</a> |
<a href="">Contact Us</a> |
<a href="">Careers</a> |
<a href="">Advertising</a> |
<a href="">Competitions</a>
<br />
<span class="footer">
©Copyrights Reserved. Site Influenced and designed by Smartymatic and Misheck
</span> 
</p>
</div>
</div>

</body>
</html>

 

This works ok on its own but the moment I put div tags inside my container for the colums I need it places the footer under the shortest column.

[misheck]

I skipped copying some parts of the header here it is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="misheck" />
<link rel="stylesheet" href="style/style.css" type="text/css" />

<title>Welcome to Shout-Africa</title>
</head>
<body>
<div id="header">

<p class="left"><a href="">Sign in</a> | <a href="">Register</a></p> 
<p class="right">
Go to:

 

the content page thats not working is

<?php include("header.php");?>
<div id="main_topleft">Main Division top left</div>
<div id="middle">This a middle div to contain featured items</div>
<div id="main_topright">This top right for videos etc</div>
<div id="advert">This is an advert column</div>
<?php include("footer.php");?>

[purpleshadez]

Only had a quick look but I think you are correct with it being a CSS problem.

 

You're using floats which might be whats messing your layout up as I can't see a tag to clear them before your footer.

 

Okay div tags, I count 1  opened in the header and 4 in the content.

But you only have 3 closing tags all in the footer.

 

So you're missing two closing tags.

 

I'd personally make sure that any divs you open in your header are closed in the footer and all content divs are closed on the same page you opened them. Easier to keep track.

[misheck]

Thanks for the help but I think attempting to repair this to work is the wrong approach for me and because everything seems a bit messed up. What I will do for now is to design the whole page as one first and then cut-out the header.php and footer.php when everything is working ok.

 

But one last thing is it better to use id for css than class?

[purpleshadez]

both have their benefits.

http://css-tricks.com/the-difference-between-id-and-class/

http://www.tizag.com/cssT/cssid.php

 

Some useful info in those links about ids and classes and google as always has the answers

 

As a general rule I use IDs for main sections (nav, head, footer, content) and forms need them if you use labels then classes for most of the rest.

 

This is a bit out of scope for this forum tho mate so we might get shot 

[misheck]

I have tried to start over again but I am still getting an error. I am still on a one page before I move over to cutting and pasting everything to create the header.php and footer.php. This is working ok in IE8 but its not working in firefox, here is the link to the test site here

 

here is the new code for index page. I have not yet fully utilised all the id tags because I need to keep everything simple for assistance.

<html>
<link rel="stylesheet" href="styles/style2.css" type="text/css" />
<body>
<div id="container">
   <div id="header">
   <p id="header_left">
								<a id="header_links" href="">Sign in</a> |
								<a id="header_links" href="">Register</a>
						</p>
			<p id="header_right">
					Go to:
						<select id="header_select">
							<option value="Africa">Africa</option>
							<option value="Worldwide">Worldwide</option>
							<option value="UK">UK</option>
							<option value="Zimbabwe">Zimbabwe</option>
							<option value="Nigeria">Nigeria</option>
							<option value="Kenya">Kenya</option>
							<option value="Zambia">Zambia</option>
							<option value="Gambia">Gambia</option>
							<option value="Ghana">Ghana</option>

						</select>
				<input type="submit" value="Go"/>
			</p>
					<br />
			<p>  </p>
<hr id="hr_type1"/>
	<a href="" id="logo"><big>Shout Africa</big></a>
<hr id="hr_type1"/>
					<p id="header_left">
							<a href="" id="header_links">News</a> |
							<a href="" id="header_links">Politics</a> |
							<a href="" id="header_links">Sports</a> |
							<a href="" id="header_links">Entertainment</a> |
							<a href="" id="header_links">Gallery</a> |
							<a href="" id="header_links">TV</a> |
							<a href="" id="header_links">Music</a> |
							<a href="" id="header_links">Videos</a>
					</p>
</div>
   
   
   <div id="body">
   
   </div>
   <div id="footer">
   <hr id="hr_type1"/>
					<a href="" id="footer_links">Worldwide</a> |
					<a href="" id="footer_links">Africa</a> |
					<a href="" id="footer_links">UK</a> |
					<a href="" id="footer_links">Zimbabwe</a> |
					<a href="" id="footer_links">Ghana</a> |
					<a href="" id="footer_links">Nigeria</a> |
					<a href="" id="footer_links">Kenya</a> |
					<a href="" id="footer_links">Zambia</a> |
					<a href="" id="footer_links">Gambia</a>
                <br />
                		<a href="" id="footer_links">Submit Story </a> |
                		<a href="" id="footer_links">Contact us </a> |
                		<a href="" id="footer_links">Careers </a> |
                		<a href="" id="footer_links">Advertising </a> |
                		<a href="" id="footer_links">Competitions </a> 
    		   <br />
<span id="copyrights">©2009 Copyrights reserved. Designed and Influenced by Smartymatic and Misheck</span>
   </div>
</div>
</body>
</html>

 

Here is the CSS file

 

html,
body {
   margin:0;
   padding:0;
   min-height: 100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
#hr_type1 {
color: #696; 
background-color: #f00; 
height: 1px; 
border-bottom: 0px;
}

[purpleshadez]

I'm at work at the moment but will be happy to take a look when I finish.(busy day today)

[Gayner]

I'm at work at the moment but will be happy to take a look when I finish.(busy day today)

 

Where do u work at? MicrosofT?

[purpleshadez]

I'm at work at the moment but will be happy to take a look when I finish.(busy day today)

 

Where do u work at? MicrosofT?

No, Fujitsu.

[Gayner]

I'm at work at the moment but will be happy to take a look when I finish.(busy day today)

 

Where do u work at? MicrosofT?

No, Fujitsu.

 

Sweat shop telemarketer?

[purpleshadez]

I'm at work at the moment but will be happy to take a look when I finish.(busy day today)

 

Where do u work at? MicrosofT?

No, Fujitsu.

 

Sweat shop telemarketer?

PMSL no, I design and maintain trend analysis and reporting tools for a service desk.

[misheck]

I am working on it from scratch and I have realised I was using too may ID tags which where easily avoidable and where messing up the website but I have now got something working.

 

Thanks for the help