newbie navbar question

[Terry Liittschwager]

For the past several years, my wife and some other ladies have had a little
charity that provides comfort quilts to "at risk" children. Increasingly
she has been getting asked if they had a website, so I decided to set one
up for her. The website, comfortsforchildren.org is very amateurish thus
far since I have no expertise in this area, but I'm learning - slowly,
though, 67 year-old retired brains don't learn fast.

Anyway, my current very basic question concerns the navigation bar on the
upper left of each page. It's the same for each page, works fine, and is
currently implemented with the following lines in each page:

<div class="navbar">
<p><a href="index.html">Home</a></p>
<p><a href="policies.html">Policies</a></p>
<p><a href="agencies.html">Agencies<br />Served</a></p>
<p><a href="statistics.html">Statistics</a></p>
<p><a href="construct.html">Quilt<br>Construction</a></p>
<p><a href="testimonials.html">Testimonials</a></p>
<p><a href="history.html">History</a></p>
</div>

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

I've tried using <link href="navbar.html" /> with navbar.html a file with
those lines, but all that happens is that the navbar disappears.

I've also tried @import, but it appears that only works within a style
definition.

So, could someone point me in the right direction?

Any and all suggestions will be most welcome.

Terry L

 

[Nico Schuyt]

Anyway, my current very basic question concerns the navigation bar on
the upper left of each page. It's the same for each page, works
fine, and is currently implemented with the following lines in each
page:
<div class="navbar">
<p><a href="index.html">Home</a></p>
<p><a href="policies.html">Policies</a></p>
<p><a href="agencies.html">Agencies<br />Served</a></p>
<p><a href="statistics.html">Statistics</a></p>
<p><a href="construct.html">Quilt<br>Construction</a></p>
<p><a href="testimonials.html">Testimonials</a></p>
<p><a href="history.html">History</a></p>
</div>
The problem is that whenever I want to add another line, I have to
edit every page. I'm sure there must be some way to have those lines
in a separate file, referenced by one line unchanging line in each
page, so that when I change the navbar, I only have to do it in the
one place.

If your server supports PHP (ask your host):
- Place the menu code in a separate file: navbar.html
- Make a new file test.php with content: <?php include "navbar.html"; ?>
- Upload test.php to te server and open it
- If the menu is shown: rename your pages to *.php and replace the menu code
with the include string

Alternatives: http://allmyfaqs.net/faq.pl?Include_one_file_in_another

 

[William Hughes]

Anyway, my current very basic question concerns the navigation bar on the
upper left of each page. It's the same for each page, works fine, and is
currently implemented with the following lines in each page:

...

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

Is it my imagination, or is this question popping up more and more
often of late? Not picking on you, Terry, but this question is asked
in one or another of the html newsgroups on a near-daily basis.

At any rate, your options are:

1. Server-Side Includes, if your ISP enables such. Make your menu a
stand-alone file, then place a line similar to

<!--#include virtual="menufile.htm"-->

where you want your menu to appear.

2. IFRAME. A bit more involved; also uses a stand-alone menu file. See
the source of http://home.grandecom.net/~cvproj/carrier.htm for an
example. Details about IFRAME can be found at
http://www.htmlhelp.com/reference/html40/special/iframe.html

For the record, my site - which I give as the example above - contains
nearly 300 individual pages, all of which use the same menu.

There may be other ways of accomplishing the task, but these are the
two easiest to apply, IMO.

 

[Vince Morgan]

For the past several years, my wife and some other ladies have had a little
charity that provides comfort quilts to "at risk" children. Increasingly
she has been getting asked if they had a website, so I decided to set one
up for her. The website, comfortsforchildren.org is very amateurish thus
far since I have no expertise in this area, but I'm learning - slowly,
though, 67 year-old retired brains don't learn fast.

Anyway, my current very basic question concerns the navigation bar on the
upper left of each page. It's the same for each page, works fine, and is
currently implemented with the following lines in each page:

<div class="navbar">
<p><a href="index.html">Home</a></p>
<p><a href="policies.html">Policies</a></p>
<p><a href="agencies.html">Agencies<br />Served</a></p>
<p><a href="statistics.html">Statistics</a></p>
<p><a href="construct.html">Quilt<br>Construction</a></p>
<p><a href="testimonials.html">Testimonials</a></p>
<p><a href="history.html">History</a></p>
</div>

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

I've tried using <link href="navbar.html" /> with navbar.html a file with
those lines, but all that happens is that the navbar disappears.

I've also tried @import, but it appears that only works within a style
definition.

So, could someone point me in the right direction?

Any and all suggestions will be most welcome.

Terry L

What about a frame? Not the recomended route these days, but considering
the circumstances, are they realy that evil?
I know there are issues with printing etc, etc, but are these issues a
problem for this particular site?
If you don't have access to a php engine, or similar, it seems to be a
plausible solution in this case.
<caveat>
My HTML knowledge is largely miniscule
</caveat>
Regards,
Vince Morgan

 

[carolyn]

For the past several years, my wife and some other ladies have had a
little
charity that provides comfort quilts to "at risk" children. Increasingly
she has been getting asked if they had a website, so I decided to set one
up for her. The website, comfortsforchildren.org is very amateurish thus
far since I have no expertise in this area, but I'm learning - slowly,
though, 67 year-old retired brains don't learn fast.

Anyway, my current very basic question concerns the navigation bar on the
upper left of each page. It's the same for each page, works fine, and is
currently implemented with the following lines in each page:

<div class="navbar">
<p><a href="index.html">Home</a></p>
<p><a href="policies.html">Policies</a></p>
<p><a href="agencies.html">Agencies<br />Served</a></p>
<p><a href="statistics.html">Statistics</a></p>
<p><a href="construct.html">Quilt<br>Construction</a></p>
<p><a href="testimonials.html">Testimonials</a></p>
<p><a href="history.html">History</a></p>
</div>

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so
that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

I've tried using <link href="navbar.html" /> with navbar.html a file with
those lines, but all that happens is that the navbar disappears.

I've also tried @import, but it appears that only works within a style
definition.

So, could someone point me in the right direction?

Any and all suggestions will be most welcome.

Terry L

I think the simplest thing to do, if your server supports it, is server side
includes. No PHP to learn - you can learn it later if you want to. No
frames. All you need to do is...

1. Cut and paste the menu lines <div class="navbar"> ... </div> into a file
such as menu.html
2. Insert a line <!--#include virtual="menu.html"--> into each file where
the menu is to appear.
3. Rename each content file index.shtml, policies.shtml, and so forth.

The *.shtml instructs your server, if configured for it, to parse the file
for SSI (Server Side Includes) instructions such as the #include. In this
particular case it would insert the content of menu.html into the file at
that location of the code. It then streams the entire 'virtual' page to
the end user.

Carolyn

 

[ato_zee]

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

One easy solution is "Search and Replace" software, on every
page I have a comment
<!--- NAVBAR --->
navigation HTML links in between
<!--- END NAVBAR -->
I change it on one page, select and copy including
the two comments, paste into search and replace,
using a wildcard, in my case * between the comments.
Then it replaces the two comments and the new
navigation menu on every page.
I use Alert Search and Replace, but there are many
similar programs. You just need one that supports
wildcards that match everything.
As with
<!--- NAVBAR --->*<!--- END NAVBAR -->
The new navigation replaces the old.
Another useful tool is
Type it In, there are many similar tools.
You create the string associated with a button.
Highlight what you want to replace, press the
button, it's done.
Also very useful for snippets of code you use
regularly, such as styles.
You could write a button for
<p class="xyz"> another for </p>
saves hours.
Hope this helps.
Another way is frames but that opens a whole can of
nasty worms.

 

[Terry Liittschwager]

For the past several years, my wife and some other ladies have had a
little
charity that provides comfort quilts to "at risk" children. Increasingly
she has been getting asked if they had a website, so I decided to set one
up for her. The website, comfortsforchildren.org is very amateurish thus
far since I have no expertise in this area, but I'm learning - slowly,
though, 67 year-old retired brains don't learn fast.

Anyway, my current very basic question concerns the navigation bar on the
upper left of each page. It's the same for each page, works fine, and is
currently implemented with the following lines in each page:

<div class="navbar">
<p><a href="index.html">Home</a></p>
<p><a href="policies.html">Policies</a></p>
<p><a href="agencies.html">Agencies<br />Served</a></p>
<p><a href="statistics.html">Statistics</a></p>
<p><a href="construct.html">Quilt<br>Construction</a></p>
<p><a href="testimonials.html">Testimonials</a></p>
<p><a href="history.html">History</a></p>
</div>

The problem is that whenever I want to add another line, I have to edit
every page. I'm sure there must be some way to have those lines in a
separate file, referenced by one line unchanging line in each page, so
that
when I change the navbar, I only have to do it in the one place. For the
life of me, though, I haven't found out how to do that.

I've tried using <link href="navbar.html" /> with navbar.html a file with
those lines, but all that happens is that the navbar disappears.

I've also tried @import, but it appears that only works within a style
definition.

So, could someone point me in the right direction?

Any and all suggestions will be most welcome.

Terry L

My thanks to all who replied, giving me the various options available.

I must admit that it really surprises me there is no provision in the
language itself for doing this directly. Every other computing language
I've ever worked with has the ability to do this with ease without having
to invoke some peripheral process. Oh, well, such is life.

I think the easiest thing for me is to just write an emacs macro to do it.
Not a biggie.

Again, many thanks to all who replied for the info. I was really batting my
head against the wall, not realizing that what I was searching for didn't
exist in the manner that I had convinced myself it had to be.

Terry L

 

[Nico Schuyt]

Terry Liittschwager wrote:

[How to include a menu on every page]

My thanks to all who replied, giving me the various options available.
I must admit that it really surprises me there is no provision in the
language itself for doing this directly.

Frames

 

[Joe (GKF)]

Terry Liittschwager wrote:

My thanks to all who replied, giving me the various options available.

I must admit that it really surprises me there is no provision in the
language itself for doing this directly. Every other computing language
I've ever worked with has the ability to do this with ease without having
to invoke some peripheral process. Oh, well, such is life.

HTML is a *MARKUP* language, not a *programming* language.
As others have said, your options are -

"Include" files (either with SSI, CGI or PHP - google for them, or visit
http://allmyfaqs.net/faq.pl?Include_one_file_in_another for good info).
Preprocessing (of which multi- search and replace is a crude example)

 

[dorayme]

http://graspages.cjb.cc/bigdry/

"Limit showers to 5 minutes."

Christ mate, this is generous advice! Unless you are really
dirty, washing hair or something, it is not necessary to hang
about for 5 min in a shower. I'd say 2 mins generally, especially
for city slickers. Me, I am bored after 30 secs!

 

[Sid]

On Tue, 14 Nov 2006 13:28:50 +1100, dorayme

: Unless you are really
: dirty, washing hair or something, it is not necessary to hang
: about for 5 min in a shower. I'd say 2 mins generally, especially
: for city slickers. Me, I am bored after 30 secs!


I do my day planning in the shower. And I usually have long days...

Sid

 

[Toby Inkster]

I must admit that it really surprises me there is no provision in the
language itself for doing this directly.

If you allowed includes in HTML, then you could have this situation:

<div>
I am in a DIV.
<include file="foo.html">
I am in the same DIV.
</div>

Where "foo.html" is:

</div>
<div>

Then the meaning, and the generated tree of the first document is
changed when the second file loads up. For this reason, it has always
been that when an HTML file is sent to a browser, it is always the whole
thing in one file.

This doesn't mean that you can't keep your navigation bar separate: it
just means that the inclusion must happen *before* the page gets sent to
the browser -- i.e. on the server.

That's the logic of it anyway.

 

[Joel Shepherd]

If you allowed includes in HTML, then you could have this situation:

From the example to follow it seems you're talking about client-side
includes, right?

<div>
I am in a DIV.
<include file="foo.html">
I am in the same DIV.
</div>

Where "foo.html" is:

</div>
<div>

Then the meaning, and the generated tree of the first document is
changed when the second file loads up. For this reason, it has always
been that when an HTML file is sent to a browser, it is always the whole
thing in one file.

I'm confused. Why can't exactly the same problem happen with SSI (which
strictly speaking, is not part of HTML, but is used closely with it)?
I.e., what difference can it make whether the include functionality is
client-side or server-side? With respect to generating broken or
unintended constructs, it looks like they have equal potential.

 

[Toby Inkster]

I'm confused. Why can't exactly the same problem happen with SSI (which
strictly speaking, is not part of HTML, but is used closely with it)?

It does happen, but it's not a problem there.

I.e., what difference can it make whether the include functionality is
client-side or server-side?

Because the client needs to build a DOM tree out of the HTML file, whereas
the server doesn't. So it matters to the client whether an include could
possibly break the DOM tree, whereas it doesn't matter to the server.

The obvious solution is that the client could perform the inclusion
*before* building a DOM tree, but that requires a two-pass parse, which
would slow down rendering.

 

[Joe (GKF)]

"Limit showers to 5 minutes."

Christ mate, this is generous advice! Unless you are really
dirty, washing hair or something, it is not necessary to hang
about for 5 min in a shower. I'd say 2 mins generally, especially
for city slickers. Me, I am bored after 30 secs!

ummm - I'm a farmer. When I have a shower, it's because I *NEED* a
shower!!
I usually shave and wash my hair - got the whole thing down to about
four minutes, so yeah, I guess I wam (cross between was and am) being
generous. I should change it.

Of course, I realise Martians have less affinity with running water than
even the Poms, but that's beside the point.

I haven't had one for about a week as it happens; the bloody pump went
bang so we don't have any water to spare until it's fixed. On the up
side, we did get about 7mm of rain over the last few days.
Which is really bad for the wheat cockies; they're trying to reap what
little they have. NOt all that flash for us either; you can't pack wet
fruit.

 

[Joe (GKF)]

On Tue, 14 Nov 2006 13:28:50 +1100, dorayme

: Unless you are really
: dirty, washing hair or something, it is not necessary to hang
: about for 5 min in a shower. I'd say 2 mins generally, especially
: for city slickers. Me, I am bored after 30 secs!


I do my day planning in the shower. And I usually have long days...

Sid

That's what the dunny is for.

 

[dorayme]

ummm - I'm a farmer. When I have a shower, it's because I *NEED* a
shower!!
I usually shave and wash my hair - got the whole thing down to about
four minutes, so yeah, I guess I wam (cross between was and am) being
generous. I should change it.

Of course, I realise Martians have less affinity with running water than
even the Poms, but that's beside the point.

ok ok... calm down... was meaning the no-good, lazy, do-nothing
majority of city slickers who are mostly concerned to be sweetly
odoured for the bus/train trip into town...

<rave>I knew someone would bring up this business of the poms...
I reckon that we are running out of water because of a national
myth that has been going on at least since after WW2 and the £10
migration scheme. It is very Australian to be showering a lot,
and each shower is like... well... a sort of matter of national
honour. At least for everyone except the farmer. It is especially
prevalent practice in fierce backers of the Australian cricket
team during the Ashes games. Yes, I have made a study of it and
yes the water usage rate goes up in that period. It unnerves the
Poms, both the players and the Balmy Army that come out.</rave>

 

[Joel Shepherd]

Joel Shepherd wrote:

Because the client needs to build a DOM tree out of the HTML file, whereas
the server doesn't. So it matters to the client whether an include could
possibly break the DOM tree, whereas it doesn't matter to the server.

Sure, but the statement wasn't who it matters to, it was that dumb
includes on either end are just as likely to hork the page.

Also the server _could_ build a DOM tree, and _could_ be concerned about
whether it's structurally what is expected. It doesn't have to, but it
could.

The obvious solution is that the client could perform the inclusion
*before* building a DOM tree, but that requires a two-pass parse, which
would slow down rendering.

That might sound obvious to you, but it sounds close to impossible to
me. Going back to your original example: the HTML post-include is valid
(IIRC), but not what the author intended semantically. If you can write
a client to draw that distinction and automatically make the appropriate
correction, I'll be _very_ impressed.

If anything, that sounds like something that could possibly be addressed
on the server, since the server could have knowledge of what the
semantic structure of the page should be. (Not saying that's easy or
practical: but it is possible.) The client can't possibly know what the
correct structure should be ... so how is your solution the obvious one?

--
Joel.

http://www.cv6.org/
"May she also say with just pride:
I have done the State some service."

 

[Joe (GKF)]

ok ok... calm down... was meaning the no-good, lazy, do-nothing
majority of city slickers who are mostly concerned to be sweetly
odoured for the bus/train trip into town...

<rave>I knew someone would bring up this business of the poms...
I reckon that we are running out of water because of a national
myth that has been going on at least since after WW2 and the £10
migration scheme. It is very Australian to be showering a lot,
and each shower is like... well... a sort of matter of national
honour. At least for everyone except the farmer. It is especially
prevalent practice in fierce backers of the Australian cricket
team during the Ashes games. Yes, I have made a study of it and
yes the water usage rate goes up in that period. It unnerves the
Poms, both the players and the Balmy Army that come out.</rave>

Priceless. I am going to steal this message and send it to everyone I
know.