# Importing html code onto another html sheet



## sophosmus (Aug 31, 2009)

I am just getting the hang of Xhtml & Css.

I have seperate CSS sheets for banner, sidebar and footer.

Not yet figured out how to have seperate Html code for same areas that I could then "import" into the page. The resulting webpage would then contain the "imported "code. I could then write specific code for page "content".

Eg
--------|-------------------
...................| Banner (imported)
..................|-------------------
................|
Sidebar | Content (write after other xhtml code imported)
(imported) |
.................|----------------
.................| Footer (imported)
-----------------------------------
Also is there an order in which the code should be imported, if indde it can be.

I suspect yu need to use javasript or PHP?

Any advice appreciated.


----------



## kfawcett (Aug 13, 2009)

Sophomus,

I'm a little confused with what you are trying to accomplish. Normally when you write HTML and CSS it goes like this. You usually do not need separate stylesheets.

You create multiple HTML pages each with their specific content using reusable parts, think of them like modules. I have attached a rudimentary picture of a layout. Each module then has a class name that you specify in the html like this:



​​​
Then you would link each html page to your one CSS stylesheet that specifies the parameters for each div.


----------



## sophosmus (Aug 31, 2009)

Thanks for your response.
I understand what you are saying.

CSS
I have three css sheets so that I can manipulate the header, sidebar & footer from them rather than each webpage css. I appreciate the three could be one but find it easier to seperate them.

HTML
My question relates to HTML - currently I have the same code for the three "modules" header, sidebar & footer in each webpage. If I want to change the code in any of these modules I have to change in all the pages -which is tedious and time consuming.

I am trying to find out if each of the 3 modules can be created in their own seperate file (?html page) and "called" or "loaded" into each page.

Alternatively there could be a "main page" containing the three modules and the content is called from a seperate file. (this is probably the preferred route.)

To achieve either I need to know if HTML code can be called from file "A" & "Loaded" into file "B" whilst maintaining CSS layout.

As I said I suspect this will require javascript or PHP coding!!

I hope this explains OK.


----------



## colinsp (Sep 5, 2007)

You can do this with php include (recommended) or using frames in html (not recommended)


----------



## brandmantra (Dec 1, 2008)

You can do this by iframe also . but always better to use include or similar options.


----------



## sophosmus (Aug 31, 2009)

I am not sure what the code will look like. Do you have an example that I could use to import the relevant XML code.

Also how do I creat the XML code the Doctype and head is already in the Basic page which will include my header(pics, page title etc).

Is it best just use a txt file saved as HTML and "include that file?

Thanks for advise.


----------



## colinsp (Sep 5, 2007)

To give you an example save you index page as index.php NOT index.html it can be exactly the same page just change the file extension.

In this example I will have the navigation menu stored externally and then loaded into each page. So in your navigation div you will have


```
<?php 
 include 'menu.php';
 ?>
```
Then you will have a separate menu.php file that will hold all your page links


```
[LIST]
      [*][URL=http://xflive.techguy.org/index.php]Home[/URL]
      [*][URL=http://xflive.techguy.org/about.php]About Us[/URL]
      [*][URL=http://xflive.techguy.org/groups.php]Groups[/URL]
      [*][URL=http://xflive.techguy.org/membership.html]Membership[/URL]
      [*][URL=http://xflive.techguy.org/committee.php]Committee[/URL]
      [*][URL=http://xflive.techguy.org/links.php]Links[/URL]
      [*][URL=http://xflive.techguy.org/newsletter.php]Newsletter[/URL]
     [/LIST]
```
The above is all you need in the menu.php file no doc type or anything as that is all in the page that it is included in.

All the styling is done by your CSS. In this example if you add an additional page to your site navigation structure you just add it in to the menu.php file and it then appears on any page that has menu.php included on it.


----------



## sophosmus (Aug 31, 2009)

Many thanks colinsp - I think I can work that out - I will give it a go anyway

A few issues:

Presumably I can create othr php files to operate the same way.

With other divs say for header.php and Footer.php and place in appropriate div - then do as for your menu.php list example for the new php files.

As I have already created quite complex side nav, footer and a header (with pictures) is it possible to "include" the existing html rather than craete a new list as you describe?

Also out of interest why did you ceate a *class* and then *id* in your div list. I have only ever used them by themselves usually a class div within an id div.


----------



## colinsp (Sep 5, 2007)

sophosmus said:


> Presumably I can create othr php files to operate the same way.


Yes you can



sophosmus said:


> With other divs say for header.php and Footer.php and place in appropriate div - then do as for your menu.php list example for the new php files.


Yes that's right



sophosmus said:


> As I have already created quite complex side nav, footer and a header (with pictures) is it possible to "include" the existing html rather than craete a new list as you describe?


Yes you can do it multiple times in the same page, that was just a simple example.



sophosmus said:


> Also out of interest why did you ceate a *class* and then *id* in your div list. I have only ever used them by themselves usually a class div within an id div.


Because that was a cut and paste from one of my sites the class defines the container for the navigation element and then the id defines the actual styling of each of the list elements. That's just the way I do my coding, it makes the CSS easier to read IMHO.


----------



## sophosmus (Aug 31, 2009)

Thank you very much for your advice. 

I am away for a few days. 

I will attempt to create on return next week.


----------

