lucy Posted August 13, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/ Share on other sites More sharing options...
Cetanu Posted August 13, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897316 Share on other sites More sharing options...
JonnoTheDev Posted August 13, 2009 Share Posted August 13, 2009 Simple. Your second example has the main content enclosed within <p> tags. Try <?php echo "<p>hi</p>"; ?> Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897319 Share on other sites More sharing options...
JonnoTheDev Posted August 13, 2009 Share Posted August 13, 2009 Simple. Your second example has the main content enclosed within <p> tags. Try <?php echo "<p>hi</p>"; ?> Cetanu, you can see the output being echoed in the screenshots provided. Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897322 Share on other sites More sharing options...
lucy Posted August 13, 2009 Author Share Posted August 13, 2009 I tried that and it didnt work. i also tried enclosing the php element within <p> tags but that did not work either i.e. <p> <?php echo "<p>hi</p>" ?> </p> neither worked Thanks, Lucy Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897325 Share on other sites More sharing options...
JonnoTheDev Posted August 13, 2009 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897335 Share on other sites More sharing options...
Cetanu Posted August 13, 2009 Share Posted August 13, 2009 Simple. Your second example has the main content enclosed within <p> tags. Try <?php echo "<p>hi</p>"; ?> 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 <p><p> </p> </p> Maybe that's why? Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897337 Share on other sites More sharing options...
lucy Posted August 13, 2009 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897344 Share on other sites More sharing options...
JonnoTheDev Posted August 13, 2009 Share Posted August 13, 2009 I must have just missed off a ; or something. That would have resulted in an error! Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897349 Share on other sites More sharing options...
PFMaBiSmAd Posted August 13, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-897352 Share on other sites More sharing options...
lucy Posted August 15, 2009 Author Share Posted August 15, 2009 Yeah, i understnand. Thanks a lot for the help Lucy Quote Link to comment https://forums.phpfreaks.com/topic/170096-adding-a-php-element-screws-up-my-layout/#findComment-898804 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.