HTML import to HTML issues

Question

Right now I have my pages, css files and my header.html and footer.html files.
I am trying to import my header and footer into all of my content pages. I have been working on this issue for a while and the closest I have gotten is using:

<html> 
<object type="text/html" data="footer.html">
</object>
</html>

I found this on another Stack Exchange question but it inserts the content of footer.html into a skinny and tall box that scrolls. (screenshot here) This is on Safari and Chrome. I haven't tested on any other browsers yet. Thanks!

Also, iframe doesn't work either and also adds a grey line on the top and right hand side of the scroll box along with the box itself. See this here.

<iframe src="foot.html" seamless></iframe>

UPDATE: Here is the current code @ 12 PM MST:

Index:

<!DOCTYPE html>
<html>
<body>
<head>
<title>Cybersecurity - Andrew Schwartz</title>
<!-- begin css-->
<link rel="stylesheet" type="text/css" href="/resources/css/test.css" media="screen" />
<link rel="stylesheet" type="text/css" href="resources/css/type.css" />
<link rel="stylesheet" type="text/css" href="resources/css/navbarnew.css" />
<link rel="stylesheet" type="text/css" href="resources/css/general.css" />
<!-- end css-->
<link rel="import" href="foot.html">
</head>
<div id="header">
    <h1>cybersecure</h1>
</div>

<!--- <img src="resources/logo.png" style="width:885px;height:391px;"> --->

<!--- nav below --->
<div id="nav">
   <ul><li><a href="index.html" class="active">home</a></li>
      <li><a href="cyber-main.html">cybersecurity</a>
         </li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">contact</a></li>
   </ul>
</div>
<!--- nav above --->
<br>
<div id="page_title">
    <h1>home</h1>
</div>
<div id="color_two">
    <h2>Subheader</h2>
</div>

<h4>Test<br>Bacon ipsum dolor amet doner spare ribs tail bacon porchetta meatloaf beef pork chop cupim pork belly cow pastrami drumstick short ribs tri-tip. Chicken capicola swine sirloin pork belly, bacon picanha meatball tenderloin kielbasa pork sausage meatloaf shank. Short loin pork chicken, venison pastrami fatback ham hock sirloin. Biltong porchetta leberkas kielbasa frankfurter salami prosciutto drumstick pig strip steak cow pork chop sirloin shoulder beef ribs. Pork loin turkey spare ribs strip steak shank. Meatball ham ball tip, turkey t-bone jerky pork chop swine cow porchetta</h4>

<iframe src="foot.html" seamless></iframe>

<!--<object data="foot.html">
</object> -->


</body>
</html>

Footer:

<head>
<title>Cybersecurity - Andrew Schwartz</title>
<!-- begin css crud -->
<link rel="stylesheet" type="text/css" href="/resources/css/test.css" media="screen" />
<link rel="stylesheet" type="text/css" href="resources/css/type.css" />
<link rel="stylesheet" type="text/css" href="resources/css/navbarnew.css" />
<link rel="stylesheet" type="text/css" href="resources/css/general.css" />
<!-- end css crud -->
</head>

<footer>
  <h6><p>&copy; 2015 -
     <script language="JavaScript" type="text/javascript">
    now = new Date
    theYear=now.getYear()
    if (theYear < 1900)
    theYear=theYear+1900
    document.write(theYear)
    </script> Andrew Schwartz. All rights reserved. v 0.1b</p>
    <br>
    <br>
  <p>Contact me: someone@example.com</p></h6>
</footer>
</body>
</html>

Note that in the footer, I need the <head> tag to import the css to format the font.

@Muhammet How would I do that? [I tried this one too](http://stackoverflow.com/questions/4818854/javascript-import-html-is-it-possible) — Andrew Schwartz, Dec 09 '15 at 18:15

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

If it has to be HTML, you can try this:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $(".footer").load("footer.html"); 
    });
    </script> 
  </head> 

  <body> 

  </body> 

  <div class="footer"> </div>

</html>

This will load 'footer.html' into the div class footer

Source: Include another HTML file in a HTML file

edited May 23 '17 at 11:59

Community

1
1

answered Dec 09 '15 at 18:28

Stefan Neuenschwander

743
1
5
22

This only loads as a blank document..maybe I'm doing something wrong? – Andrew Schwartz Dec 09 '15 at 18:35
You sure you have included jquery and the .html files with the right file paths? – Stefan Neuenschwander Dec 09 '15 at 18:42
I fixed the file paths (stupid me) but now I have the same issue as before: the grey line on top and left of the inserted box and I still have the scrolling issue... – Andrew Schwartz Dec 09 '15 at 18:45
Could you maybe post the code you have right now with the changes I suggested so I could take a better look at it? And your skinny/tall box could be a CSS issue – Stefan Neuenschwander Dec 09 '15 at 18:49
Sure, the code is now appended to the question, under the update. The code that you posted doesn't display anything different than without any import technique. (It is as if it isn't there.) – Andrew Schwartz Dec 09 '15 at 18:59
Does the footer have to be an iframe or could it be a normal div? – Stefan Neuenschwander Dec 09 '15 at 19:37
I could try it as a div...How should I write it? – Andrew Schwartz Dec 09 '15 at 20:17

score 0 · Answer 2 · answered Dec 09 '15 at 19:58

0

I tend to use PHP for such things.

<?php 
     include("footer.php");
?>

The only catch is that the included file, in this case the footer has to be a .php file

answered Dec 09 '15 at 19:58

myselfmiqdad

2,092
2
13
31

HTML import to HTML issues

2 Answers2