Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

adding a div to php header

Status
Not open for further replies.

tshey

Technical User
Dec 28, 2005
78
AU
I have a php header that I use as a standard template. I try to create a div for the content on each new page. But it displays behing this header. What am I doing wrong?
 
It is that part of the header that I am pointing to that is the cause of this problem.

PHP runs on the server and delivers regular html. So the fact that information comes from PHP has nothing to do with it. Other than that, you did not tell us one thing about how your header is generated or how you are trying to include that div that would help us in any way to help you.
 
I'm guessing you have used absolute positioning on the header (which removes it from the flow of the document). That at least will explain why the div appears under the header.

We'll need a lot more info if we're going to give you anything but thoughts.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
yes the header is formatted in css. div tags. And yes I have used absolute positioning on the header. I have created a div tag for the content which also has absolute positioning.
The header is added with <?php require ('header.php') ?>
The content div is added in the body like, <div id="content">lalalala</div>
 
Very nice. Thank you for that insightful comment of what we already knew or suspected. Now, do you want some help and are you willing to show us the more of the html code, relevant css or the link to the site itself? That would actually be helpful.
 
Sorry for lack of input I did not realise exactly what you wanted, I thought this forum was to help people not in the know, not to insult them! The code is:
<?php require ('header.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="two1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="head">About Us</div>
<div id="aboutcontent">heollofdlajdfdjfiojwoijefoijweiojfijiofjweriojfgweriogjerhnighirehjghuieo

</div>

</body>
</html>
The css is:
}
#cleanercontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: justify;
position: absolute;
height: 332px;
width: 578px;
left: 171px;
top: 177px;
right: 5px;
}
#head {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #0066CC;
width: 150px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
position: relative;
left: 155px;
top: 50px;
}

If you require more please let me know? I do not know exactly what you require. Ask me questions?
 
You have CSS for an element with an ID of "cleanercontent", but no element with that ID... and an element with an ID of "aboutcontent", with no CSS to match. Is this possibly a simple case of forgetting to rename one of the IDs?

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
What's more you seem to be calling the header file BEFORE starting the other HTML.

The very first thing that you should have is your DOCTYPE, followed by the opening HTML tag, the HEAD tag, TITLE, METAS etc. Then close the HEAD tag and open the BODY tag....

THEN, call in your header file.

That said, the problem may well be the use of absolute positioning. But you'd do well to get the HTML right anyway.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
oki done, so what do I do? Not use absolute, why would this be a problem? Thanks for your help!
 
Ok, let's try a novel approach. You run your page on the server so that required file will be run. Then look at the page and do view source on it. Copy that source and paste it here. That is the code we're interested in seeing.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vacuum Shop</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_1021032641_0) return;
window.mm_menu_1021032641_0 = new Menu("root",101,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,false,0,false,false);
mm_menu_1021032641_0.addMenuItem("History&nbsp;","location='aboutus.html'");
mm_menu_1021032641_0.addMenuItem("Join&nbsp;Our&nbsp;Team","location='aboutus.html'");
mm_menu_1021032641_0.addMenuItem("Employment","location='aboutus.html'");
mm_menu_1021032641_0.fontWeight="bold";
mm_menu_1021032641_0.hideOnMouseOut=true;
mm_menu_1021032641_0.bgColor='#666666';
mm_menu_1021032641_0.menuBorder=1;
mm_menu_1021032641_0.menuLiteBgColor='#999999';
mm_menu_1021032641_0.menuBorderBgColor='#81FF41';
window.mm_menu_1021034525_0 = new Menu("root",119,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,false,0,false,false);
mm_menu_1021034525_0.addMenuItem("Vacuum&nbsp;Cleaners");
mm_menu_1021034525_0.addMenuItem("Bags&nbsp;&&nbsp;Filters");
mm_menu_1021034525_0.fontWeight="bold";
mm_menu_1021034525_0.hideOnMouseOut=true;
mm_menu_1021034525_0.bgColor='#666666';
mm_menu_1021034525_0.menuBorder=1;
mm_menu_1021034525_0.menuLiteBgColor='#999999';
mm_menu_1021034525_0.menuBorderBgColor='#81FF41';
window.mm_menu_1021035810_0 = new Menu("root",42,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,false,0,false,true);
mm_menu_1021035810_0.addMenuItem("QLD");
mm_menu_1021035810_0.addMenuItem("NSW");
mm_menu_1021035810_0.addMenuItem("VIC");
mm_menu_1021035810_0.addMenuItem("SA");
mm_menu_1021035810_0.addMenuItem("NT");
mm_menu_1021035810_0.addMenuItem("WA");
mm_menu_1021035810_0.fontWeight="bold";
mm_menu_1021035810_0.hideOnMouseOut=true;
mm_menu_1021035810_0.bgColor='#666666';
mm_menu_1021035810_0.menuBorder=1;
mm_menu_1021035810_0.menuLiteBgColor='#999999';
mm_menu_1021035810_0.menuBorderBgColor='#81FF41';
window.mm_menu_1021040544_0 = new Menu("root",151,18,"Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,true,0,false,true);
mm_menu_1021040544_0.addMenuItem("Newsletter","location='newsletter.php'");
mm_menu_1021040544_0.addMenuItem("History","location='history.php'");
mm_menu_1021040544_0.addMenuItem("Franchise&nbsp;Opportunity","location='franchise.php'");
mm_menu_1021040544_0.addMenuItem("Employment","location='employment.php'");
mm_menu_1021040544_0.fontWeight="bold";
mm_menu_1021040544_0.hideOnMouseOut=true;
mm_menu_1021040544_0.bgColor='#666666';
mm_menu_1021040544_0.menuBorder=1;
mm_menu_1021040544_0.menuLiteBgColor='#999999';
mm_menu_1021040544_0.menuBorderBgColor='#81FF41';
window.mm_menu_1021041233_0 = new Menu("root",125,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,false,0,false,false);
mm_menu_1021041233_0.addMenuItem("Register&nbsp;Purchase");
mm_menu_1021041233_0.addMenuItem("Repairs&nbsp;Tracker");
mm_menu_1021041233_0.addMenuItem("Trade&nbsp;In&nbsp;Calculator");
mm_menu_1021041233_0.fontWeight="bold";
mm_menu_1021041233_0.hideOnMouseOut=true;
mm_menu_1021041233_0.bgColor='#666666';
mm_menu_1021041233_0.menuBorder=1;
mm_menu_1021041233_0.menuLiteBgColor='#999999';
mm_menu_1021041233_0.menuBorderBgColor='#81FF41';

window.mm_menu_1021040544_0 = new Menu("root",151,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,false,0,false,true);
mm_menu_1021040544_0.addMenuItem("History");
mm_menu_1021040544_0.addMenuItem("Franchise&nbsp;Opportunity");
mm_menu_1021040544_0.addMenuItem("Employment");
mm_menu_1021040544_0.fontWeight="bold";
mm_menu_1021040544_0.hideOnMouseOut=true;
mm_menu_1021040544_0.bgColor='#666666';
mm_menu_1021040544_0.menuBorder=1;
mm_menu_1021040544_0.menuLiteBgColor='#999999';
mm_menu_1021040544_0.menuBorderBgColor='#81FF41';

window.mm_menu_1025110118_0 = new Menu("root",157,16,"Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",2,0,500,-5,7,true,true,true,0,true,true);
mm_menu_1025110118_0.addMenuItem("Vacuum&nbsp;Cleaners");
mm_menu_1025110118_0.addMenuItem("Specialised&nbsp;Cleaners");
mm_menu_1025110118_0.addMenuItem("Bags&nbsp;&&nbsp;Filters");
mm_menu_1025110118_0.addMenuItem("Spare&nbsp;Parts");
mm_menu_1025110118_0.fontWeight="bold";
mm_menu_1025110118_0.hideOnMouseOut=true;
mm_menu_1025110118_0.bgColor='#00CC66';
mm_menu_1025110118_0.menuBorder=2;
mm_menu_1025110118_0.menuLiteBgColor='#006633';
mm_menu_1025110118_0.menuBorderBgColor='#81FF41';
window.mm_menu_1025110237_0 = new Menu("root",122,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",1,0,500,-5,7,true,true,false,0,true,true);
mm_menu_1025110237_0.addMenuItem("Free&nbsp;Newsletter");
mm_menu_1025110237_0.fontWeight="bold";
mm_menu_1025110237_0.hideOnMouseOut=true;
mm_menu_1025110237_0.bgColor='#666666';
mm_menu_1025110237_0.menuBorder=1;
mm_menu_1025110237_0.menuLiteBgColor='#999999';
mm_menu_1025110237_0.menuBorderBgColor='#81FF41';
window.mm_menu_1025110350_0 = new Menu("root",50,16,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",1,0,500,-5,7,true,true,false,0,true,true);
mm_menu_1025110350_0.addMenuItem("Qld");
mm_menu_1025110350_0.addMenuItem("Nsw");
mm_menu_1025110350_0.addMenuItem("Vic");
mm_menu_1025110350_0.addMenuItem("SA");
mm_menu_1025110350_0.addMenuItem("NT");
mm_menu_1025110350_0.addMenuItem("WA");
mm_menu_1025110350_0.fontWeight="bold";
mm_menu_1025110350_0.hideOnMouseOut=true;
mm_menu_1025110350_0.bgColor='#666666';
mm_menu_1025110350_0.menuBorder=1;
mm_menu_1025110350_0.menuLiteBgColor='#999999';
mm_menu_1025110350_0.menuBorderBgColor='#81FF41';
window.mm_menu_1025110552_0 = new Menu("root",145,12,"Arial, Helvetica, sans-serif",10,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",1,0,500,-5,7,true,true,false,0,true,true);
mm_menu_1025110552_0.addMenuItem("Register&nbsp;Purchase");
mm_menu_1025110552_0.addMenuItem("Repairs&nbsp;Tracker");
mm_menu_1025110552_0.addMenuItem("Trade&nbsp;In&nbsp;Calculator");
mm_menu_1025110552_0.addMenuItem("spare&nbsp;parts");
mm_menu_1025110552_0.fontWeight="bold";
mm_menu_1025110552_0.hideOnMouseOut=true;
mm_menu_1025110552_0.bgColor='#666666';
mm_menu_1025110552_0.menuBorder=1;
mm_menu_1025110552_0.menuLiteBgColor='#999999';
mm_menu_1025110552_0.menuBorderBgColor='#81FF41';

window.mm_menu_1021040544_0 = new Menu("root",107,18,"Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#FFFFFF","#3F3FC1","center","middle",3,0,500,-5,7,true,true,true,0,true,true);
mm_menu_1021040544_0.addMenuItem("History","location='history.php'");
mm_menu_1021040544_0.addMenuItem("Employment","location='employment.php'");
mm_menu_1021040544_0.fontWeight="bold";
mm_menu_1021040544_0.hideOnMouseOut=true;
mm_menu_1021040544_0.bgColor='#666666';
mm_menu_1021040544_0.menuBorder=1;
mm_menu_1021040544_0.menuLiteBgColor='#999999';
mm_menu_1021040544_0.menuBorderBgColor='#81FF41';

mm_menu_1021040544_0.writeMenus();
} // mmLoadMenus()

function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #81FF41;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<link href="two1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.green {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #81FF41;
}
.blue {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #81FF41;
}
-->
</style>
<link href="two1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="pagecell">
<div id="homenav">
<a href="index1.php"> <span class="blue">home</span></a><span class="green">aboutus</span><span class="blue">onlinestore</span><span class="green">hotoffer</span><span class="blue">storelocation</span><span class="green">servicedesk</span><span class="blue">FAQ</span><span class="green">contactus</span>
</div>


<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="border"></div>

<div id="logo"><img src="images/images/logo.gif" alt="vacuum shop logo"/></div>
<div id="nav1"><img src="images/images/nav1.gif" />

<div id="ul">

<p class="heading">Vacuum Shop</p>
<table>

<tr>
<td><a href="categories.php?id=1">vacuum_catalogue</a></td>
</tr>
<tr>
<td><a href="categories.php?id=2">vacuum_bags</a></td>
</tr>
<tr>
<td><a href="categories.php?id=3">specialised_cleaner</a></td>
</tr>
<tr>
<td><a href="categories.php?id=4">promotions</a></td>
</tr>
<tr>
<td><a href="categories.php?id=5">service_&_repairs</a></td>
</tr>
<tr>
<td><a href="categories.php?id=6">spare_parts</a></td>
</tr>
<tr>
<td><a href="categories.php?id=7">cleaning_products</a></td>
</tr>
</table>
<p class="heading">Vacuum Brands</p>
<table>
<tr>
<td><a href="brand.php?brand_id=1">Electrolux</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=2">Kerrick</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=3">Lenoxx</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=4">Menalux</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=5">Miele</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=6">Nilfisk Advance</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=7">Samsung</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=8">Shark</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=9">Shop_Vac</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=10">Shop_Vac</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=10">Vax</a></td>
</tr>
<tr>
<td><a href="brand.php?brand_id=11">Volta</a></td>
</tr>
</table>
<p class="heading">Related Links</p>
</div>
</div>


</div>
<div id="Layer1" style="position:absolute; left:47px; top:5px; width:57px; height:15px; z-index:1"><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_1021040544_0,0,16,null,'image1')" onmouseout="MM_startTimeout();"><img src="images/images/transparent.gif" name="image1" width="57" height="16" border="0" id="image1" /></a></div>
<div id="Layer2" style="position:absolute; left:104px; top:5px; width:79px; height:15px; z-index:2"><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_1025110118_0,-10,12,null,'image2')" onmouseout="MM_startTimeout();"><img src="images/images/transparent.gif" name="image2" width="79" height="16" border="0" id="image2" /></a></div>
<div id="Layer3" style="position:absolute; left:183px; top:5px; width:57px; height:15px; z-index:3"><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_1025110237_0,0,10,null,'image3')" onmouseout="MM_startTimeout();"><img src="images/images/transparent.gif" name="image3" width="57" height="15" border="0" id="image3" /></a></div>
<div id="Layer4" style="position:absolute; left:238px; top:5px; width:91px; height:15px; z-index:4"><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_1025110350_0,0,10,null,'image4')" onmouseout="MM_startTimeout();"><img src="images/images/transparent.gif" name="image4" width="91" height="15" border="0" id="image4" /></a></div>
<div id="Layer5" style="position:absolute; left:330px; top:5px; width:82px; height:15px; z-index:5"><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_1025110552_0,-350,10,null,'image5')" onmouseout="MM_startTimeout();"><img src="images/images/transparent.gif" name="image5" width="82" height="16" border="0" id="image5" /></a></div>
</div>
</div>

</body>
</html>
<div id="head">About Us</div>
<div id="aboutcontent">heollofdlajdfdjfiojwoijefoijweiojfijiofjweriojfgweriogjerhnighirehjghuieo

</div>

</body>
</html>
 
OK... you have 2 closing <body> tags, 2 closing <html> tags. You have links to 2 CSS files that you haven't provided - and the CSS that you have provided is of no use to help with your problem.

Some suggestions: post your code within the [ignore]
Code:
 your code here
[/ignore] so that it is rendered like this:
Code:
 your code here

Whilst your page doesn't validate at the the problems are relatively minor. You should address them nonetheless (removing the redundant language attribute in your <script> tags and adding in the type attribute would get rid of a few. Some ampersands need to be addressed too (convert & to &amp; - even in URLs on the page). As I said... that'll address a large majority.

Why bother fixing these things? Because you can't accurately troubleshoot a problem if the underlying code is broken.

Not use absolute, why would this be a problem?
Read up on the differences between relative and absolute regards the position css rule. This will explain that absolute positioned items are removed from the flow of the document (as I posted initially in this thread).

You may find it easier to capture the "view source" of your page, and all the css and images... and then upload them to a test file on the web -- that way we can see what you are seeing (since I expect the current code you have is not being shared). If you are able to do this... please post the URL. If not... we will need the CSS files that you missed (paste them in between [ignore]
Code:
[/ignore] tgml tags).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Given that that code in question:

Code:
<div id="head">About Us</div>
<div id="aboutcontent">heollofdlajdfdjfiojwoijefoijweiojfijiofjweriojfgweriogjerhnighirehjghuieo

</div>

</body>
</html>

is after the first close body and html tags, I can't see any reason why they should display properly.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top