Welcome to . Please login or sign up.

May 09, 2021, 03:50:05 PM

Login with username, password and session length



2021 May 01 21:26:46
Registration for membership is open, once your registered you'll get full access to this site


2021 Apr 25 02:26:27
Creating a new Windows Application...


2021 Apr 23 21:14:10
 ;) new files added in downloads


2021 Apr 21 18:33:28
hCaptcha Installed!


2021 Apr 20 21:52:29
Matt's Web Browser is available for download.

Jump Menu

Jump Menu
  • Total Posts: 547
  • Total Topics: 547
  • Online Today: 247
  • Online Ever: 247
  • (Today at 01:09:01 PM)
Users Online
Users: 0
Guests: 4
Total: 4


Header / Body / Footer and CSS

Started by Admin, April 27, 2021, 09:46:54 PM

Previous topic - Next topic
April 27, 2021, 09:46:54 PM Last Edit: May 07, 2021, 02:47:56 AM by Admin
I found a really nice PHP sample written by: Christian Cawley
Folder structure:

You can download this project from the link below:

This tutorial and download is for /intended to be ran on a web server
html folder
html folder
refer to images below for this file structure:
main folder

inside main folder

inside the html folder

Ready to move on to what is going on here?

First let us look at the index.php
Here we are looking at the file get contents that are located in the directory/ html, and also using the p tag to show copyright
<?php echo file_get_contents("html/header.html"); ?>
<?php echo file_get_contents("html/body.html"); ?>
<?php echo file_get_contents("html/footer.html"); ?>
<p>Copyright © CM Cawley <?php echo date("Y"); ?></p>

Now we take a look at the style.css
Whats the style.css do for this example, This is how the php page will be displayed with colors and so on..
body {
 width: 70%;
 margin: auto;

a:link {
  color: gray;

a:visited {
  color: green;

a:hover {
  color: rebeccapurple;

a:active {
  color: teal;

#navigation {

p {
  font-size: 120%;
  color: dimgray;

#contents {
 float: right;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: sans-serif;

li {
  float: left;

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

/* Change the link color to white on hover */
li a:hover {
  background-color: #fff;

heading on to the header.html file
The header is the upper most portion of this .php file, banners and menus normally reside here.
<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <meta name="description" contents="About CM Cawley Biography website in PHP">
        <link rel="stylesheet" href="style.css" type="text/css">
            <nav id="navigation">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="https://www.makeuseof.com/tag/author/ccawley/">MakeUseOf</a></li>
        <div id="contents">

Onto the body.html
<p>all of your content for the middle of your page will reside here</p>

lastly have a look at the footer.html
The footer.html is located at the bottom of this php file
            Contact me on Twitter: <a href="https://www.twitter.com/TheGadgetMonkey">@TheGadgetMonkey</a>
Webmaster, Administrator, Owner

Social Sharing