...

View Full Version : i need help with php header and footer



misheck
10-22-2009, 11:56 AM
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?

abduraooft
10-22-2009, 12:17 PM
Does anyone have any ideas of how to get setup the header and footer php? Please post the code in your header and footer and a link to your page.

mexabet
10-22-2009, 12:19 PM
This will give you a clue:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />

</head>

<body>
<div class="outerwrapper">
<?php
// Display the page header
include('header.php');
?>
Your content goes here.
<?php
// Display the page footer
include('footer.php');
?>
</div>
</body>
</html>


I hope it helps.

misheck
10-22-2009, 12:48 PM
I am running all the test on my laptop but in the meanwhile I will look for a free webhost so I can show you the result of I am what I am getting.

But in the meanwhile, will I need to enter the <html><body></body></html> tags again in my content page when I have already but that code in my header and footer?

One other thing is that the body of website is set 60% in CSS and the container that contains everything is set to 100% in CSS because I didnt want my website to be stretched or shrinked on various screen sizes.

Rowsdower!
10-22-2009, 01:10 PM
I am running all the test on my laptop but in the meanwhile I will look for a free webhost so I can show you the result of I am what I am getting.

But in the meanwhile, will I need to enter the <html><body></body></html> tags again in my content page when I have already but that code in my header and footer?

One other thing is that the body of website is set 60% in CSS and the container that contains everything is set to 100% in CSS because I didnt want my website to be stretched or shrinked on various screen sizes.

No, you will only need to use the doctype, head, and opening body tags in the header. Likewise you will only need to use the closing body and html tags in the footer. When PHP includes build a page it's just like stacking blocks as a child. One on top of the other builds the page and becomes one document.

I'm not sure what you are asking about with regard to your body and container widths though. If you are asking about whether that is a problem when using PHP includes then the answer is no. The CSS will be applied to the entire document as though it were a single static HTML file. Or were you asking something else?


ALSO, see freehostia.com for decent and completely free web hosting. It supports PHP and MySQL.

misheck
10-22-2009, 01:23 PM
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:


<!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:
<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>&nbsp;</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>
footer
<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">
&copy;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.

abduraooft
10-22-2009, 01:27 PM
Hi misheck, if you are trying to get some help, you'd need to post your entire code or a link to your page would be much better, which may save a lot of time from either end.

misheck
10-22-2009, 01:44 PM
here is the a smaller content page that I am using for testing


<?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");?>

abduraooft
10-22-2009, 01:53 PM
here is the a smaller content page that I am using for testing Whatever you are doing in the serverside code, the final parsed html output(taken from browser's view source option) should be a complete valid document (http://validator.w3.org/#validate_by_input).

misheck
10-22-2009, 02:02 PM
I had skipped copying the top part of the header but I have done that now. This is what I had skipped

<!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:

misheck
10-22-2009, 06:11 PM
I think attempting to repair this to work is the wrong approach and 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?

Rowsdower!
10-22-2009, 08:18 PM
One is not necessarily "better" than the other, they are just different. It's like comparing a hammer and a screwdriver. I tend to use an ID in a few key main page component places (wrapper, header, navigation, content, and footer). I also occassionally use them in a few other key places that I know will be unique to a page.

One thing to note though is that ID's should only appear once on any given page. If you are styling something that appears multiple times in a page then a class is the appropriate choice (or at least a unique ID).

misheck
10-23-2009, 12:36 AM
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 (http://misheck.net84.net/shout-africa/index2.php)

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>&nbsp;&nbsp;</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">&copy;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;
}

misheck
10-23-2009, 04:16 PM
I was using too many ID tags so I have started everything again and removed the unneccessary tags. I am still new to CSS and I skipped that whole chapter coz I was interested in php but I have had to back track.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum