• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

Calling external HTML content with CSS (like iframes does)

I tried to find a solution for this but nothing to answer what I need.

I have 3 HTML+CSS pages.
Let's call them "header, body and footer".

Header and Footer are unique files and ALWAYS keep intact.

There are many body files, with different content, but all them must call the HEADER and FOOTER.

Is it possible? How do I call them?

I was thinking in calling the header and footer like divs but the content come from header.html and footer.html

Thanks for any help!
  • 7
  • 6
1 Solution
If your trying to call files with CSS it cannot be done.  You'll need to call them within the "body" page with either PHP, HTML or your server language.  
We use PHP where I am at currently and one of our pages looks like this:
We have all of our normal header declarations in the header.php file. Like the CSS, Doctype, scripting, etc.  
Then comes the body and the content.  Then the rest of the includes.

$title = "Here's our title";
$keywords= "Here are the keywords";
$description ="Description.";?>

<?php include ('includes/header.php'); ?>


<?php include ('includes/sidebar.php');?>                       
<?php include ('includes/footer.php'); ?>

Open in new window

fabianlujanAuthor Commented:
LZ1, how do I format a full HTML file in order to become php?
I have php on my server.

Ok, no calls from css but, every file (header, body and footer) are formatted using style.css so it will appear under that style, right?

You don't have to use PHP, that was just an example.  You really don't need to format it.  I would only use PHP if you absolutely need it.  If your just doing a simple non-databased website then use HTML.  It'll be lighter weight on your server.
As long as you have the styles in your CSS they will format that way.  And the browsers will render them as if it were one big file.
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

fabianlujanAuthor Commented:
OK, no need of php, but, how should I put the code (example) above into a HTML?

<?php include ('folder/footer.php');?> does the trick?

and the same for header?

thanks again :D
If your running php then yes you could use the php include like you have above.  Otherwise you could just use this:
<!--#include virtual="insertthisfile.html" -->  
fabianlujanAuthor Commented:
will try and let you know LZ1 ;)
I'm not going anywhere........yet.  ;)
fabianlujanAuthor Commented:
Hello LZ1,

Can't make them work fine.
Check the files by theirselves:

The body 'calling' the header and footer: http://www.marambio.aq/mainbody.html
The footer file: http://www.marambio.aq/footer.html
and the header file: http://www.marambio.aq/header.html

Thanks for your help!
Try using this instead:
<?php include("http://www.marambio.aq/header.html"); ?>
<?php include("http://www.marambio.aq/footer.html"); ?>

If the PHP doesn't work, save the header and footer files with an shtml extension and try it again the first way.
<!--#include file="http://www.marambio.aq/header.shtml" -->
fabianlujanAuthor Commented:

I works but, I have to figured out why I wasn't been able to see it working.

The mainbody file was being opened as .html instead of .php

Then, I saved the same file as php and it did the trick!

You got the solution my friend, thanks!

Last question...
What is the best practise when working with this kind of files?
Each of this trio have a full header with meta tags, etc.
Should I only have that within the "body" file and let the header/footer alone?

Thanks again!
Well, as posted above:
The header should contain all the critical include files and house everything that goes in the head of the document.  
The footer is the same, except it should only contain everything that goes in the footer or at the end of the file.
The body of each page should be relevant to that page, with the header and footer includes above and below respectively.  Like above, you can also specify your keywords, title and meta tags if you'd like, but make sure you set your header file up for that.  
fabianlujanAuthor Commented:
LZ1 is truly an expert!

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now