HTML to PHP

**gemzilla** · 07-18-2013, 09:35 AM

Hi, I am new to PHP and have decided to start using it so that when you want to change part of a web page (i.e. navigation menu) you only have to change it once. So using a tutorial I found: http://www.1stwebdesigner.com/css/ho...site-template/ where I create it in HTML first, take out the global parts, put them into "includes" folder and then rename index.html to .php.

What happens after converting it to .php is the "untitled document </head>" shows up in design view:

Click image for larger version.

Name: Untitled-1.fw.jpg
Views: 197
Size: 20.2 KB
ID: 5145

when I preview in a browser it leaves a big gap the "untitled document </head>" would go.

http://chd.ismywebsite.co.uk/

What am I doing wrong? Below I have inserted my code for the index.php, menu.php include and the css.

index:

PHP Code:


<!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>CHD Home Page</title>



<link rel="stylesheet" type="text/css" href="css/style.css"/>

<link rel="stylesheet" type="text/css" href="css/menu.css"/>



</head>



<body>



<div id="top"></div>



<div id="wrapper">

    

    <?php include('includes/head.php'); ?>

    

    <?php include('includes/menu.php'); ?>

    



    

    <div id="banner">

    

    <img src="images/banner.jpg" />

    

    </div>

    

    <div id="content">

        <div id="leftpan">

             

          <?php include('includes/sidemenu.php'); ?>

                

        </div>

        

        <div id="main">

          <h1>Heading</h1>

          <p>hello this is the main area        </p>

        </div>

    </div>

    

    <?php include('includes/foot.php'); ?>

    



</div>



<div id="bottom"></div>



</body>

</html>

Menu:

PHP Code:


<!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>Untitled Document</title>



<link rel="stylesheet" type="text/css" href="../css/menu.css"/>

<link rel="stylesheet" type="text/css" href="../css/style.css"/>



</head>



<body>



    <div id="menu">

        <ul>

            <li><a href="index.html">Home</a></li>

            <li><a href="about.html">About Us</a></li>

            <li><a href="cover.html">Coverage</a></li>

            <li><a href="services.html">Services</a></li>

<!--                <ul>

                    <li><a href="plumbing.html">All Plumbing Work</a></li>

                    <li><a href="contact.html">Get Free Quote</a></li>

                </ul>-->

            <li><a href="contact.html">Contact Us</a></li>

        </ul>

    </div>



</body>

</html>

style css

Code:

/* CSS Document */

a {
	color:#06C;
	text-decoration:none;
}

a:hover {
	color:#900;
	text-decoration:none;
}

img {
	border:none;
}

img a {
	border:none;
}

h1 {
	font-size:18px;
	text-align:center;
}

h4 {
	z-index:1;
	text-align:center;
	margin-top:20px;
	font-size:16px;
	color:#900;
	width:200px;
}

body {
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
}

strong {
	font-size:16px;
}

#top {
	margin-left:auto;
	margin-right: auto;
	background-image:url(../images/headbg.fw.png);
	width:1040px;
	height:20px;
	background-repeat:no-repeat;
}

#bottom {
	margin-left:auto;
	margin-right: auto;
	background-image:url(../images/footbg.fw.png);
	width:1040px;
	height:20px;
	background-repeat:no-repeat;
}

#wrapper {
	margin-left:auto;
	margin-right: auto;
	background-image:url(../images/mainbg.fw.png);
	padding-left:20px;
	padding-right:20px;
	background-repeat:repeat-y;
	width:1000px;
}

#head {
	width:1000px;
	height:250px;
	background-color:#FFF;
}

#logo {
	width:350px;
	height:auto;
	margin-top:50px;
	margin-left:75px;
}

#title {
	width:484px;
	height:auto;
	margin-top:-38px;
	margin-left:430px;
}

#contact {
	margin-top:20px;
	height:20px;
	color:#06C;
}

#contact p {
	display:inline;
	margin-right:20px;
}

#menu{
	z-index:2;
}

#banner {
}

#content{
	z-index:1;
	height:auto;
	overflow:hidden;
}

#leftpan {
	z-index:1;
	width:200px;
	float:left;
}

#main {
	z-index:1;
	width:780px;
	float:right;
	padding:20px 10px 10px 10px;
}

#foot {
	text-align:center;
	height:30px;
	width:1000;
}

Menu css

Code:

/* CSS Document */

/*Nav Bar*/

#menu ul {
	margin:0;
	padding:0;
	height:30px;
	width:1000px;
}

#menu ul li
{
	background-image:url(../images/menu.fw.png);
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
	height:30px;
	width:200px;
	text-align:center;
	float:left;
	line-height:30px;
}

/*#menu ul ul {
	display:none;
}

#menu ul li:hover > ul {
	display:inline;
	height:90px;
	width:200px;
}

#menu ul li ul li, #menu ul li ul li a  {
	background:#CCC;
	color:#000;
	border:#000;
	font-size:14px; 
}

#menu ul li ul li a:hover  {
	background:#999;
	color:#000;
	border:#000 thin;
	font-size:14px; 
}

#menu ul li ul {
	width:200px;
	height:90px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	float:left;
	line-height:30px;
}*/

#menu ul li a
{
	display:block;
	height:30px;
	cursor:pointer;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#FFF;
}

#menu ul li a:hover
{
	background-image:url(../images/menuhover.fw.png)
}


/*Side Bar*/

#sidemenu {
	width:200px;
}

#sidemenu ul {
	margin:0;
	padding:0;
	height:auto;
	width:200px;
	text-align:center;
}

#sidemenu ul li
{
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
	height:auto;
	width:200px;
	text-align:center;
	line-height:30px;
	
}

#sidemenu ul li a {
	height:auto;
	cursor:pointer;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#06C;
	border:none;
}

#sidemenu ul li a:hover {
	color:#900;
}

#sidemenu ul li a:hover img{
}

**Beverleyh** · 07-18-2013, 12:36 PM

Look at the source of your served page and you'll see at least 3 doctypes and other multiple web page structures (<head>, <body>, etc)

Code:

<!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>CHD Home Page</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>

</head>

<body>
<div id="top"></div>

<div id="wrapper">
	
    <!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">
<link rel="stylesheet" type="text/css" href="../css/style.css"/>


<body>
<div id="head">
		<div id="logo"><img src="../images/logo.jpg" /></div>
        <div id="title"><img src="../images/title.jpg" /></div>
    	<div id="contact">
        <p><strong>Phone:</strong>01843 862102</p>
        <p><strong>Mobile:</strong>07793560055</p>
        </div>
    </div>

</body>
</html>    
    <!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">

<link rel="stylesheet" type="text/css" href="../css/menu.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>


<body>
    <div id="menu">
    	<ul>
        	<li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="cover.html">Coverage</a></li>
            <li><a href="services.html">Services</a></li>
<!--            	<ul>
                	<li><a href="plumbing.html">All Plumbing Work</a></li>
                    <li><a href="contact.html">Get Free Quote</a></li>
                </ul>-->
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>

</body>
</html>
    

    
    <div id="banner">
    
    <img src="images/banner.jpg" />
    
    </div>
    
    <div id="content">
    	<div id="leftpan">
             
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link rel="stylesheet" type="text/css" href="../css/menu.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>


<body>

<h4>What we have to offer</h4>
        
        	<div id="sidemenu">
            
            	<ul>
                	<li><a href="services.html"><img src="../images/piclink1.jpg" /><br/>Services</a></li>
                    <li><a href="services.html"><img src="../images/piclink1.jpg" /><br/>Services</a></li>
                    <li><a href="services.html"><img src="../images/piclink1.jpg" /><br/>Services</a></li>
                    <li><a href="services.html"><img src="../images/piclink1.jpg" /><br/>Services</a></li>
                </ul>            
            </div>

</body>
</html>
                
        </div>
        
        <div id="main">
          <h1>Heading</h1>
          <p>hello this is the main area        </p>
        </div>
    </div>
    
    <!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">

<link rel="stylesheet" type="text/css" href="../css/style.css"/>


<body>

<div id="foot">
    
    	Website Designed and maintained by <a href="www.kent-telephones.com" target="_blank">Kent Telephones Ltd</a>
    
</div>

</body>
</html>    

</div>

<div id="bottom"></div>

</body>
</html>

The parts in GREEN are fine. The parts in RED are superfluous and need to be removed.

The thing to remember with PHP includes is that when you pull off the common blocks of HTML, you only need to include just that HTML in the separated file. The web server and PHP includes are what will pull all the parts back together, so your menu file should just contain;

Code:

    <div id="menu"> 
        <ul> 
            <li><a href="index.html">Home</a></li> 
            <li><a href="about.html">About Us</a></li> 
            <li><a href="cover.html">Coverage</a></li> 
            <li><a href="services.html">Services</a></li> 
<!--                <ul> 
                    <li><a href="plumbing.html">All Plumbing Work</a></li> 
                    <li><a href="contact.html">Get Free Quote</a></li> 
                </ul>--> 
            <li><a href="contact.html">Contact Us</a></li> 
        </ul> 
    </div>

See, there is no doctype or <head> or <body> - just the markup for the menu.

This is what you're doing in your other includes too. That's what's giving you the multiple structural elements in the source code of the final page.

Think of PHP includes like a jigsaw puzzle. Each piece contains just one small fragment of information that is incomplete on its own, but once all the pieces are pulled back together, they can be viewed (via a web browser) as a whole.

Does that make sense?

**gemzilla** · 07-18-2013, 01:25 PM

Yes that made perfect sense, thank you.

I'm still left with a big gap at the top so that is obviously a different issue. But the design view is showing up correctly now.

Thank you again

**Beverleyh** · 07-18-2013, 01:33 PM

Ah, yes, that's much easier to digest.

I can see where the problem is now - its the CSS for #logo; margin-top:50px; in the "style.css" file.

Take that out and the gap closes.