Adding a php element screws up my layout

lucy · August 13, 2009

I have tried adding my contact form which is php to the page and it screws up the menu system.

I then added quite a lot of breaks in and it still would not fix it.

I then took out the contact form and simply added <?php echo"hi" ?> and it still screwed up my layout.

It should look like this, normally:

but when i add the php element, with or without any breaks, the menue system is still screwed up (look at ABOUT, its been pushed up.) Even when i add several breaks, the "hi" moves down the page but the ABOUT button does not move to its normal position. Here is an image of how it looks with the php element in:

Can anyone please help me, as this is driving me nuts!!

Full HTML code of page with php element in:

<!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>
<link rel="stylesheet" type="text/css" href="../layout.css" />
<link rel="stylesheet" type="text/css" href="../tabmenu.css" />
<link rel="stylesheet" type="text/css" href="../mainmenu.css" />
</head>

<body>
<div id="header_container">
<img src="../images/header_right.jpg" align="right" />
    <ul class="tabmenu">
	<li class="residential"><a href=""  class="selected"title="residential"><span class="displace">Residential</span></a></li>
	<li class="commercial"><a href="../commercial/about.html"  title="commercial"><span class="displace">Commercial</span></a></li>
</ul>
    <ul class="mainmenu">
	<li class="about"><a href="about.html" title="about"><span class="displace">About</span></a></li>
	<li class="survey"><a href="survey.html"  title="survey"><span class="displace">Survey</span></a></li>
        <li class="order"><a href="order.html"  title="order"><span class="displace">Order</span></a></li>
	<li class="track"><a href="track.html"  title="track"><span class="displace">Track</span></a></li>
        <li class="contact"><a href="" class="selected" title="contact"><span class="displace">Contact</span></a></li>
	<li class="faq"><a href="faq.html" title="faq"><span class="displace">FAQ</span></a></li>
</ul>
</div>

<div id="content">
<?php echo "hi" ?>
</div>
</body>
</html>

Full code of a different page, with the menu system working fine:

<!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>
<link rel="stylesheet" type="text/css" href="../layout.css" />
<link rel="stylesheet" type="text/css" href="../tabmenu.css" />
<link rel="stylesheet" type="text/css" href="../mainmenu.css" />
</head>

<body>
<div id="header_container">
<img src="../images/header_right2.jpg" width="750" height="200" align="right" />
    <ul class="tabmenu" >
  <li class="residential"><a href="../residential/about.html"  title="Residential"><span class="displace">Residential</span></a></li>
	<li class="commercial"><a href="" class="selected" title="Commercial"><span class="displace">Commercial</span></a></li>
  </ul>
    <ul class="mainmenu">
	<li class="about"><a href="" class="selected" title="About"><span class="displace">About</span></a></li>
	<li class="survey"><a href="survey.html"  title="Survey"><span class="displace">Survey</span></a></li>
        <li class="order"><a href="order.html" title="Order"><span class="displace">Order</span></a></li>
	<li class="track"><a href="track.html"  title="Track"><span class="displace">Track</span></a></li>
        <li class="contact"><a href="contact.php" title="Contact"><span class="displace">Contact</span></a></li>
	<li class="faq"><a href="faq.html"  title="FAQ"><span class="displace">FAQ</span></a></li>
</ul>
</div>
<div id="content"><h1>Commercial about </h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur  porttitor lobortis odio, at tincidunt nulla sagittis et. Donec gravida  nulla sit amet purus faucibus elementum. Duis ac urna at arcu convallis  dignissim at in nibh. Aliquam a molestie mi. Ut accumsan, felis vel  vestibulum elementum, leo ur</p>
</div>

<div id="footer_container">FOOTER</div>

</body>
</html>

Layout.CSS:


/*Page styles*/

* {
margin: 0;
}

body {
background-color:#e4e4e4;
padding-left:5px;
padding-right:5px;
max-width:982px;
margin-left:auto;
margin-right:auto;

}

/*Header styles */
#header_container {
min-height:200px;
min-width:978px;
margin-left:auto;
margin-right:auto;
background-image:url(images/header_tile2.jpg);
background-repeat:repeat-x;

border-right-style:solid;
border-right-width:thin;
border-right-color:#737373;
border-left-style:solid;
border-left-width:thin;
border-left-color:#737373;
}

#header_container p {
text-indent:60px;
font-size:20px;
}

/*Main content styles */
#content {
border-right-style:solid;
border-right-width:thin;
border-right-color:#737373;
border-left-style:solid;
border-left-width:thin;
border-left-color:#737373;
background-color:#FFF;
min-width:978px;
margin-left:auto;
margin-right:auto;
}

#footer_container {

text-align:center;
height:50px;
margin-left:auto;
margin-right:auto;
background-image:url(images/header_tile2.jpg);
background-repeat:repeat-x;	
}

#footer_container ul li {
margin-left:0px;
padding-right:20px;
padding-left:20px;
display:inline;
font-size:11px;
margin-top:50%;
}

li.border {
border-right-style:solid;
border-right-color:#000;
border-right-width:thin;
}

Tabmenu.CSS

ul.tabmenu {
list-style: none;
padding: 0px;
padding-top:148px;
margin-left:0px;	
margin-bottom:8px;
left:0px;
}

.displace {
position: absolute;
left: -5000px;
}

ul.tabmenu li { float: left; }

ul.tabmenu li a { 
display: block;
width: 96px;
height: 52px;
background: url('images/tabs.jpg');
}

/*
*	Normal Links
*/
ul.tabmenu li.residential a { background-position: 0 0; }

ul.tabmenu li.commercial a { background-position: -96px 0; }


/*
*	Hover Links
*/
ul.tabmenu li.residential a:hover { background-position: 0 -52px; }

ul.tabmenu li.commercial a:hover { background-position: -96px -52px; }

/*
*	Selected/Active Links
*/
ul.tabmenu li.residential a.selected { background-position: 0 -104px; }

ul.tabmenu li.commercial a.selected { background-position: -96px -104px; }

Mainmenu.CSS

ul.mainmenu {
list-style: none;
padding: 0px;
padding-top:0px;
margin-left:0px;
left:0px;
}

.displace {
position: absolute;
left: -5000px;
}

ul.mainmenu li { float: left; }

ul.mainmenu li a { 
display: block;
width: 163px;
height: 44px;
background: url('images/menu.jpg');
}

/*
*	Normal Links
*/
ul.mainmenu li.about a { background-position: 0 0; }

ul.mainmenu li.survey a { background-position: -163px 0; }

ul.mainmenu li.order a { background-position: -326px 0; }

ul.mainmenu li.track a { background-position: -489px 0; }

ul.mainmenu li.contact a { background-position: -652px 0; }

ul.mainmenu li.faq a { background-position: -815px 0; }

/*
*	Hover Links
*/
ul.mainmenu li.about a:hover { background-position: 0 -44px; }

ul.mainmenu li.survey a:hover { background-position: -163px -44px; }

ul.mainmenu li.order a:hover { background-position: -326px -44px; }

ul.mainmenu li.track a:hover { background-position: -489px -44px; }

ul.mainmenu li.contact a:hover { background-position: -652px -44px; }

ul.mainmenu li.faq a:hover { background-position: -815px -44px; }

/*
*	Selected/Active Links
*/
ul.mainmenu li.about a.selected { background-position: 0 -88px; }

ul.mainmenu li.survey a.selected { background-position: -163px -88px; }

ul.mainmenu li.order a.selected { background-position: -326px -88px; }

ul.mainmenu li.track a.selected { background-position: -489px -88px; }

ul.mainmenu li.contact a.selected { background-position: -652px -88px; }

ul.mainmenu li.faq a.selected { background-position: -815px -88px; }

Please please can someone offer a reason as to why this is happening?

Thanks a lot for the time to read this lengthy post

Lucy

Cetanu · August 13, 2009

Well PHP code can be used in documents that end in ".php" (without the () )

If you have a .html file, I don't think PHP will work (never done it).

Try that and see.

JonnoTheDev · August 13, 2009

Simple. Your second example has the main content enclosed within tags. Try

<?php echo "<p>hi</p>"; ?>

JonnoTheDev · August 13, 2009

Simple. Your second example has the main content enclosed within tags. Try

<?php echo "<p>hi</p>"; ?>

Cetanu, you can see the output being echoed in the screenshots provided.

lucy · August 13, 2009

I tried that and it didnt work.

i also tried enclosing the php element within tags but that did not work either i.e.

<p>
<?php echo "<p>hi</p>" ?>
</p>

neither worked

Thanks,

Lucy

JonnoTheDev · August 13, 2009

Nesting p tags is invalid. The second example also has a h1 tag. This will be pushing the content down. You are missing in your example with php.

This issue has nothing to do with php as you are only printing html. It is purely CSS and HTML.

Try copying this in.

<?php echo "<h1>Header</h1>\n<p>hi</p>"; ?>

Also missing

<div id="footer_container">FOOTER</div>

Cetanu · August 13, 2009

Simple. Your second example has the main content enclosed within tags. Try
<?php echo "hi"; ?>
Cetanu, you can see the output being echoed in the screenshots provided.

Oh, I didn't see the little "hi" over in the right corner.

With that example, lucy ^

<p> 
<?php echo "<p>hi</p>" ?> 
</p>

You neglected to put in a ; after the echo.

 
<?php echo "<p>Hi</p>"; ?>

Also, as neil.johnson said, you can't have

Maybe that's why?

lucy · August 13, 2009

Thanks for all your help.

I fixed this by simply copying and pasting all of the php code into a new file along with the html code from a correct page and somehow it worked. I must have just missed off a ; or something.

Thanks,

Lucy

JonnoTheDev · August 13, 2009

I must have just missed off a ; or something.

That would have resulted in an error!

PFMaBiSmAd · August 13, 2009

Don't get in the habit of intentionally leaving off the final ;, but it is optional on the last statement before a closing ?> tag.

lucy · August 15, 2009

Yeah, i understnand.

Thanks a lot for the help

Lucy

Sign In

Adding a php element screws up my layout

Recommended Posts

lucy

Link to comment

Share on other sites

Cetanu

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

lucy

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

Cetanu

Link to comment

Share on other sites

lucy

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

lucy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information