After exploring PHP for the past few days, I've been trying to use it on the new CSS based website that I'm creating.

I'm trying to use "include" function in order to get my "header", "topMenu", "leftMenu", "rightMenu" and "bottomMenu", since in ALL the pages, these would be common. The only difference in different pages would be the "contentArea". Every single page is linked with an CSS stylesheet.

I'm trying to achive it using the tutorial on this website:

http://www.tizag.com/phpT/include.php

As said in the website's tutorial, I've created "menu.inc" file with contents linked with the stylesheet:

Menu.inc codes are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alcohol - Main Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="header">
<p>Header. Header. Header. Header. Header. Header. Header. Header. Header. Header. Header. Header. Header. Header. Header.</p>
</div>

<div id="topMenu">
<p>Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. Top Menu. </p>
</div>

<div id="leftContent">
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
<p>Left Menu.</p>
</div>

<div id="rightContent">
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
<p>Right Menu.</p>
</div>

<div id="centerContent">
<p class="first-letter">Following are the websites that I stumbled upon and enlightened myself with various different CSS based things at different stages of the site development. These are the list of ONLY the website which I used for designing this website and not the contents within the website itself.</p>

<p>Following are the websites that I stumbled upon and enlightened myself with various different CSS based things at different stages of the site development. These are the list of ONLY the website which I used for designing this website and not the contents within the website itself.</p>

<p>Following are the websites that I stumbled upon and enlightened myself with various different CSS based things at different stages of the site development. These are the list of ONLY the website which I used for designing this website and not the contents within the website itself.</p>

<p>Following are the websites that I stumbled upon and enlightened myself with various different CSS based things at different stages of the site development. These are the list of ONLY the website which I used for designing this website and not the contents within the website itself.</p>

<p>Additionally, I'll be working on the accessibility issue of this website making it possible for viewers to see the website choosing different font size, text colour and background colour.</p>
 
</div>

<div id="footer">
Last Updated:
<script type="text/javascript">

<!-- Begin
var days = new Array(8);
days[1] = "Sunday";
days[2] = "Monday";
days[3] = "Tuesday";
days[4] = "Wednesday";
days[5] = "Thursday";
days[6] = "Friday";
days[7] = "Saturday";

var months = new Array(13);
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";

var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear = dateObj.getYear()
if (fyear < 2000) 
fyear = fyear + 1900
document.write(wday + ", " + lmonth + " " + date + ", " + fyear)
// End -->
</script>
</div>



</body>
</html>

About.php is the page that I've linked "menu.inc". It's code include:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alcohol - Main Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<?php include("menu.inc");?>

</body>
</html>

Now, if I try to visit about.php on my browser, with the hope of seeing the page (as attached, which is "about.html"), I get the error message saying:

Invalid Menu Handle

I've kept my Apache open as well. Am I doing something silly ???

.................................................................................................

Just in case, someone wish to see the stylesheet itself:

/* CSS Document */

body 
{
	background-color:black;
	background-attachment:fixed;
}

/* ........................................ HEADER ........................................ */

#header
{
	width:100%;
	border:1px solid red;
	text-align:center;
	background-color:blue;
}


/* ......................................... TOP MENU .................................... */

#topMenu
{
	width:100%;
	float:right;
	background-color:red;
	border:1px solid red;
}


/* ................................... CONTENT ................................................ */

#leftContent
{
	float:left;
	width:10%;
	border:1px solid red;
	background-color:green;
}

#centerContent
{
	background-color:black;
	width:60%; 
	margin-left:1%;
	float:left;
	border:1px solid green;
	border-bottom:none;
}

#rightContent
{
	float:right;
	background-color:fuchsia;
	border:1px solid red;
	width:10%;
}

/* ................................... STYLES ......................................... */

p.first-letter:first-letter
{
	color:red;
	margin-left:5%;
	font-size:xx-large;
}

p
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	margin:2% 3%;
	color:white;
}

/* ................................... FOOTER ......................................... */

#footer
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:white;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}
Attachments result.jpg 111.85 KB

Both your about page and menu.inc have <head> and <body> tags, which are invalid.

I will do it differently. I will either use a template or like what you did, but in the reverse way. I will have an index/default page with all the menus placed at the right position, and having content as include file.

Both your about page and menu.inc have <head> and <body> tags, which are invalid.

I will do it differently. I will either use a template or like what you did, but in the reverse way. I will have an index/default page with all the menus placed at the right position, and having content as include file.

But wouldn't you say that "content" as "include" file, may not be possible, since the "content" would have to be DIFFERENT for different page, while the "include" function is for sharing the SAME content ALL OVER ???

Ahh, forget to mention that you need to either use ?page=xxxx for each content or use mod_rewrite in .htaccess in this case to make the url look nicer. Many websites with large amount of content are managed in this way, including Daniweb.

This article has been dead for over six months. Start a new discussion instead.