cancel
Showing results for 
Search instead for 
Did you mean: 

Common Index in HTML/CSS

Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Common Index in HTML/CSS

I want to do something very simple. At least I think it is but after a lot of Googling  I still  don't know if it is possible.
I want a series of web pages which will be in separate  folders but I want to have a standard index either at the side or at the top.
Now I can create the basic layout using a CSS style sheet but the question is whether the index with html links can also be incorporated into a style sheet so that any change to the index will ripple through all the pages.
PS I don't want to use frames
19 REPLIES
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

One solution found is php coding and the hosting company includes php5 support so it looks like this is the way to go
In order to test the code I need to do it off line - has anyone tried QuickPHP http://www.zachsaw.co.cc/?pg=quickphp_php_tester_debugger&sub=quickphp_php_tester_debugger_moreinfo
hadden
Grafter
Posts: 486
Thanks: 2
Registered: ‎27-07-2007

Re: Common Index in HTML/CSS

Another option might be to generate the index using javascript dynamically?
For example:
document.write('<ul>');
document.write('<li><a href="1.htm">One</a></li>')
document.write('<li><a href="2.htm">Two</a></li>')
document.write('<li><a href="3.htm">Three</a></li>')
document.write('<li><a href="4.htm">Four</a></li>')
document.write('</ul>');

Place the javascript in an external file and call the external javascript into each page that requires it.
This should satisfy the requirement to only maintain the index in one place.
If you call the external javascript within a named DIV, CSS can be used to control the location of that DIV.
Any use?
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

Would that work if the person viewing the page doesn't have javascript enabled
hadden
Grafter
Posts: 486
Thanks: 2
Registered: ‎27-07-2007

Re: Common Index in HTML/CSS

Nope, javascript must be enabled.
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

Scuppers that option then - thanks for the suggestion
Vip3r
Grafter
Posts: 142
Registered: ‎22-10-2009

Re: Common Index in HTML/CSS

Hi Oldjim,
what you need is to be able to include one file inside another, have a look at this site for some ideas http://ask-leo.com/how_do_i_include_one_html_file_inside_another.html . Don't know what options are supported on the plusnet webspace though!
Vip3r.
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

Unfortunately client side include is out as it requires javascript but server side include is a possibility but seems a bit more complex at first sight. Still worth a play
Community Veteran
Posts: 26,739
Thanks: 952
Fixes: 10
Registered: ‎10-04-2007

Re: Common Index in HTML/CSS

I'm using server side includes on home pages to do almost exactly the same as you want to do.
You'll need to add the following to .htaccess
AddHandler server-parsed .shtml
AddType text/html shtml

Then make your pages that need to include the common header have .shtml extension.
Within the pages you put
<!--#include virtual="filename.xxx"-->

The filename and extension can be anything you like.
jelv (a.k.a Spoon Whittler)
   Why I have left Plusnet (warning: long post!)   
Broadband: Andrews & Arnold Home::1 (FTTC 80/20)
Line rental: Pulse 8 Home Line Rental (£13/month)
Mobile: iD mobile (£4/month)
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

In order for that to work do you need to refer the filename back to the root and then forward to the folder where it is stored as you would using straight html coding
Community Veteran
Posts: 26,739
Thanks: 952
Fixes: 10
Registered: ‎10-04-2007

Re: Common Index in HTML/CSS

Yes, exactly the same logic as the way you code links.
jelv (a.k.a Spoon Whittler)
   Why I have left Plusnet (warning: long post!)   
Broadband: Andrews & Arnold Home::1 (FTTC 80/20)
Line rental: Pulse 8 Home Line Rental (£13/month)
Mobile: iD mobile (£4/month)
Community Veteran
Posts: 38,460
Thanks: 1,031
Fixes: 62
Registered: ‎15-06-2007

Re: Common Index in HTML/CSS

So unlike PHP the code would be something like <!--#include virtual="../files/menu.html"--> where the two dots takes it back to the root and then the / etc takes it forward
Community Veteran
Posts: 14,469
Registered: ‎30-07-2007

Re: Common Index in HTML/CSS

Yes.
This is what is called a relative link. The location of one file is specified relative to the current file. All links should be entered this way (except external ones obviously).
One benefit of relative linking is the whole set of files can be moved to a new directory or server and all the links will remain correct.
sexysir
Grafter
Posts: 27
Registered: ‎22-08-2007

Re: Common Index in HTML/CSS

Jim:
I use a header.php holding all the stuff from the Doctype Decleration to the <body> tag. I also include a global footer.php which includes the footer stuff and the </body> tag.
Basically:
<?php include 'header.php'; ?>
webpage code
<?php include 'footer.php'; ?>
Bear in mind that the various webpages will have different header data (title, keywords etc.), so it might be worthwhile sitting down and thinking about how best to pull in the global data without messing with the page-specific stuff.

As for testing, I'm using XAMPP, which provides a local Apache dist on the PC. Just pull your files to the htdocs folder, and use the url 127.0.0.1 in the browser.
http://www.apachefriends.org/en/xampp.html
Cign
Grafter
Posts: 42
Registered: ‎17-08-2007

Re: Common Index in HTML/CSS

Jim, SSI (server side includes) is fairly straightforward. I use this for my site hosted on the Plusnet home page server http://www.cign.org  The menu is entirely CSS and is pulled into each page on the fly. The menu is plain HTML no headers just the code for the menu. As Jelv says you need to amend the .htaccess file to include
AddHandler server-parsed .html
AddType text/html html
 
Note that this can be html and or shtml at least on Plusnet's server this works. If all the pages are already written this makes it a bit easier as there is no need to alter the file type on each page.
Cheers
John