CODEWITHSUNDEEP
phphtml
Oliver
Oliver

Reputation: 3

Why is my HTML body inside my PHP header?

For some reason the header that I have created is now merging with the entire page minus the footer. This happened after I tried to add a font to the header. How has it done this and is there a fix?

I noticed it after I tried to add a google font through CSS to the header buttons. The font did not show up and the body (which is an embedded PDF) was now inside the header tag with the gray background attached to the header also around the embedded PDF document. I tried undoing and removing the Google font but this did not work. I have tried padding but it still won't remove the gray background or the association with the header tag.

Here is my Header:

<link href="css/head.css" rel="stylesheet" type="text/css">
<style><?php require("css/head.css");?></style>
<div class="header">
  <a href="#default" class="logo"></a>
  <div class="header-left">
   <br>
    <a class ="button" href="#home">Home</a>
    <a class= "button" href="#contact">Contact</a>
    <a class="button" href="">Weekly Summary</a>
  </div>
  <div class="header-right">
    <a class ="button" href="#home">Home</a>
</div>

This is my body:

<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<?php
    include ('content/header.php');
?>
</head>
<body>
<div>Test</div>
</body>

When you try this the body for this is showing text will be on the same line as the header and inside its tag, although it is clearly not in the body tag?

I can also provide CSS if it's needed.

Upvotes: 0

Views: 771

Answers (1)

Quentin
Quentin

Reputation: 944568

Your HTML is wildly invalid. Use a validator.

What you are experiencing is the results of the error recovery features built into the rules for parsing HTML.

These will include such things as recognising <div class="header"> (which should probably be a real <header> element) is after </head> but not inside a <body> element. This causes the <body> element to be created implicitly (which is fine, the start tag for <body> is optional) so the <div> is inside the body.

Later <body> is ignored because the <body> element is already open and cannot contain another <body>.

Upvotes: 4

Related Questions