SSI Question

[fastwave]

Hello all, I am new here.

I have a simple home page that I want to use to learn how to use SSI to set up my nav bar on the top and right with, so it can be quickly and easily updated in the future. (Would like to eventually figure out how to use this to display my banners and videos as well.)

I found some information on google, but its from pretty far back. It did help me get the jist of the include code etc though.

But there were no examples I could find on how to set up a nav bar, and have it appear on all your html pages.

I also have the nav bar currently set up with certain CSS styles, can I maintain that same color and style setup etc while using the SSI to somehow show the content of the nav bar within or using those style settings?

I hope to learn how to do this well, and I am eager to learn for any who want to help me.

Thank you!

E

[jerry62704]

I use PHP on the server for this.

SSI Server Link

[fastwave]

Well once I start to use and learn PHP, I will probably do the same *smiles*

But for now I need to learn how to insert this into XHTML

[BoldUlysses]

There are a number of ways to do it but a PHP include is probably your best bet as most servers have PHP and only Microsoft IIS can run ASP. If your preference is to use ASP instead, contact your hosting provider and see what servers they use (can probably find it in service documentation as well). Anyway.

With PHP, it's quite simple. Take the nav bar code and isolate it (no normal HTML body tags or DOCTYPE--just the nav markup) in its own PHP file:

<ul id="navbar">
  <li><a href="#">Link 1</li>
  <li><a href="#">Link 2</li>
  <li><a href="#">Link 3</li>
  <li><a href="#">Link 4</li>
</ul>

Remove it from its original markup document and put this (or equivalent) in its place:

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

where navbar.php is the name of the file with the nav code. Resave your original markup document, now with the PHP include, with a .php file extension. Upload to server running PHP and voilà, SSI.

As far as your stylesheet is concerned, the browser parses the CSS code once the HTML file ("assembled" at the server by PHP) is delivered, so the browser "sees" exactly the same thing as if you didn't use the SSI at all--your stylesheets can remain the same.

[Excavator]

Hello fastwave,
If you build your website as if the menu were local, say it's like this:

<div id="header">
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<!--end nav--></div>
<!--end header--></div>

The menu itself would go in a file named menu.php and it would include all the code inside of #nav, like this:

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

That would leave #header and #nav divs for structure on your html, as well as all the CSS that styles them and your menu.
Like this:

<div id="header">
<div id="nav">
<!--end nav--></div>
<!--end header--></div>

You would load your menu like this then:

<div id="header">
<div id="nav">
              <?php include("../path/to/menu.php"); ?>
<!--end nav--></div>
<!--end header--></div>

menu.php would have to be on your php enabled server.

[fastwave]

Great tips guys thanks! Now if I do it that way excavator, do I need to change the main pages file extension to .shtml instead of the current html?

[BoldUlysses]

If I may: You need to rename it with a .php file extension--this tells the server to process the file with PHP and not just relay it as static (X)HTML. You should also know that unless you have your local computer set up as a server running PHP, you won't be able to test the files until you upload them to your remote server. It makes testing a little more cumbersome, but the benefits of server-side processing far outweigh the inconvenience.

[fastwave]

I am doing it all locally for now, will upload it once it tests out. Thanks for that Php extension tip msuffern, never messed with php myself.

[fastwave]

I meant to say I am doing it all on my pc, will create files with test names, upload them to godaddy, then test them on their server, thanks for the tips.

You all rock!

[Excavator]

Originally Posted by fastwave

Great tips guys thanks! Now if I do it that way excavator, do I need to change the main pages file extension to .shtml instead of the current html?

My sites that have php includes are still named with the .html extension. The included file itself is the only thing I've used the .php extension on.

[BoldUlysses]

Originally Posted by Excavator

My sites that have php includes are still named with the .html extension. The included file itself is the only thing I've used the .php extension on.

Don't you mean the other way around? This file works when named, for example, phpcontainer1.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>This is my PHP test</title>
	
</head>

<body>

<p>And here it is.</p>
	
<?php include("phptest1.html"); ?>
	
</body>
</html>

[Excavator]

Originally Posted by msuffern

Don't you mean the other way around?

No, mine works like this:
menu.php is the include

*.html is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 12px "Comic Sans MS";
	background: #FC6;
	text-align: center;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#wrap {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
#sidbar {
	width: 200px;
	float: left;
}
</style>
</head>
<body>
    <div id="wrap"> 
    		<div id="sidebar">
              <?php include("../homepage/menu/menu.php"); ?>
            <!-- end sidebar --></div>
    <!--end wrap--></div>
</body>
</html>

I use that all over the place.
Don't tell me I've gotten it wrong all this time!
I am dyslexic you know...

[fastwave]

Ok, I created a file mypage.html

I put the code you told me to in there

<div id="sidebar-a">
<div class="padding">
<?php include("/includes/rightnav.php"); ?>
</div>
</div>

Uploaded it to my godaddy server where my web page is hosted

Also created a file rightnav.php and put this in there for the nav bar

<ul>
<li>
<a href="coming_soon.html"><img src="images/nav_bullet.gif" border="0" /> Postcards from the Edge <img src="images/spacer.gif" width="14" height="10" border="0" />of the Green Economy
</a>
</li>

</ul>

And when i got to the url for the html page, the spot where the php nav bar should be showing up is only showing my css style stuff like background color, the php file is in a subfolder under the main root folder called "includes" , which i included in the path info, please help me figure out what I am doing wrong

[fastwave]

Anyone...please?

[fastwave]

Ok got it, once i change both file extensions to php it worked, hehe thanks!