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;
}