CSS links?

**SteveRDun** · 11-09-2005, 06:33 PM

Hi. My name is Steve. I am my high school's web designer. I am trying to change the site over from HTML to CSS. For easier design and the such.

The site is designed in a table, the left cell as the left navigation bar, and the right one is the content. I would like to make an external set of links for my navigation, and point each page to the link page. Can I do this any way using CSS? If not, do I have to use HTML or Javascript? If none, what would be the easiest way to have an updated set of links without editing them on every single page?

For your reference, if you need, the site is <www.dunmoreschooldistrict.net> Thanks.

**mwinter** · 11-09-2005, 07:12 PM

Originally Posted by SteveRDun

I would like to make an external set of links for my navigation, and point each page to the link page. Can I do this any way using CSS?

CSS provides presentation suggestions, not content.

If not, do I have to use HTML or Javascript?

You could use plain HTML if you used a template system as you wouldn't need to add the links manually, but that's not necessary. Using client-side scripting is not a good idea as search engines and users with scripting disabled would get no navigation links at all, rendering your site useless.

If none, what would be the easiest way to have an updated set of links without editing them on every single page?

Use either server-side includes (SSI) or a server-side language (your server supports PHP) to insert the links.

If SSI support is enabled on your server, you'd insert something like

Code:

<!--#include virtual="/path/to/links.inc" -->

where you'd want the links to be included. Using PHP would be similar:

Code:

<?php
include "/path/to/links.inc";
?>

One problem with SSI that I don't know how to resolve is that no Content-Length header is sent, which adversely affects network performance (not critically, but still undesirable). Caching validators aren't sent either, which prevents client-side caching. Both can be avoided in PHP (the former using output buffering).

Mike

**SteveRDun** · 11-09-2005, 09:00 PM

I've decided to use Javascript. Can anyone tell me how to use Javascript to display an external menu?

Do I need to make one HTML file with just the menu in it, then use Javascript (in every page I need the menu in to be in ) to link back to it?

Or

Can someone explain to me how exactly to use PHP or SSI to do the same thing?

**Twey** · 11-10-2005, 07:28 PM

Originally Posted by Mike

Code:

<?php
#include "/path/to/links.inc";
?>

Err... actually,

Code:

<?php
include("/path/to/links.inc");
?>

Too much C, Mike?

Mike has given you a perfect example of SSI includes, and I've just brushed up his PHP one. All you need change is the path to your include.

**mwinter** · 11-11-2005, 04:32 PM

Originally Posted by SteveRDun

I've decided to use Javascript.

I can only say that you've made a bad decision, but then it's yours to make.

Can someone explain to me how exactly to use PHP or SSI to do the same thing?

There isn't really a lot to it. Create a file that contains a fragment of HTML (just that which you'd otherwise have to copy into every applicable HTML file), and place that file somewhere easily accessible. You'd then insert one of the statements in my previous post, adjusting the path as appropriate.

For example (taking the SSI route), with the file, example.inc:

Code:

<ul class="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/about-us/">About Us</a></li>
</ul>

and the served file, example.shtml:

Code:

<!DOCTYPE html PUBLIC ...>

<html lang="en">
<head>
  <!-- ... -->
</head>

<body>
  <div id="header">
    <h1>My Site</h1>

<!--#include virtual="./example.inc" -->

  </div>
  <!-- ... -->
</body>
</html>

the client would receive:

Code:

<!DOCTYPE html PUBLIC ...>

<html lang="en">
<head>
  <!-- ... -->
</head>

<body>
  <div id="header">
    <h1>My Site</h1>

<ul class="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/about-us/">About Us</a></li>
</ul>

  </div>
  <!-- ... -->
</body>
</html>

Any changes that you make to example.inc would be automatically reflected in all files that include it.

There is a difference between PHP and SSI when it comes to the treatment of paths. SSI acts at a URL level, whilst PHP operates from the filesystem. This means that

Code:

<!--#include virtual="/path/to/file.ext" -->

would resolve to the resource at

  http://www.example.com/path/to/file.ext

whereas

Code:

<?php
include "/path/to/file.ext";
?>

would resolve to the file at

  /path/to/file.ext

on a Linux system, or

  C:\path\to\file.ext

on a Windows system (assuming the DocumentRoot directive [or equivalent] points to a directory on the C: drive).

Relative paths are usually the same with both, though PHP introduces the concept of a 'working directory' and an include_path directive (much like the PATH environment variable).

Originally Posted by Twey

Too much C, Mike?

It doesn't help that I'm not used to hashes as comment delimiters in programming languages. Weren't C and C++ -style comments enough for them?

Mike

**Twey** · 11-11-2005, 04:46 PM

You'll be glad to know that Perl-style comments are discouraged in the PEAR coding standards (warning: massive gzipped page)

The worst thing is when a language has absolutely no block comments whatsoever (cough Perl/TCL [delete as most frustrating])

**Wedgy** · 11-13-2005, 09:31 AM

Relative paths are usually the same with both, though PHP introduces the concept of a 'working directory' and an include_path directive (much like the PATH environment variable).

It sounds like PHP is a lot like the old DOS 3.3 system with environmental variables. Is this true?

**Twey** · 11-13-2005, 10:19 AM

Originally Posted by Wedgy

It sounds like PHP is a lot like the old DOS 3.3 system with environmental variables. Is this true?

PHP is a lot like every modern operating system, with environmental variables

DOS, Windows, *n?x; all have environmental variables. In Windows they can be found by right-clicking My Computer and going to Properties->Advanced->Environment Variables (or something like that). Of course, they can be accessed from a command prompt as well.

**SteveRDun** · 11-14-2005, 03:54 PM

Ok. Wow. I feel really stupid for still being stuck on this. I tried to use mwinter's suggestion. After creating all of the files, when i would open index.shtml, only "my site" would show up, and not the links. What am I doing wrong?

or

Since I can't figure this out, can you please show me the easiest way to make this work?

I feel stupid for all of this, but Thank you all for your help

**mwinter** · 11-15-2005, 12:16 AM

Originally Posted by SteveRDun

After creating all of the files, when i would open index.shtml, only "my site" would show up, and not the links. What am I doing wrong?

If you look at the source code in your browser, do you see the include statement? If so, then whichever form you're using (I'd guess SSI) hasn't been enabled on your server.

Based on the response headers sent by your server, it does support both options I've mentioned so far. In fact, the home page is a parsed PHP file. However, you'll have to speak to the server administrator and check that they are available for you to use.

I feel stupid for all of this

Don't. We're happy to help.

but Thank you all for your help

You're welcome.

Mike

Thread: CSS links?

Thread Tools

Search Thread

CSS links?

I decided...

Bookmarks

Bookmarks

Posting Permissions