Putting navigation in the CSS

[Doug Laidlaw]

Thank you everybody for your help to date, and please be tolerant of a CSS
beginner!

I have successfully converted my site at http://www.douglaidlaw.net/boykett/
to use a free 3-column template with header and footer. The home page at
index.html uses all sections of the template. The other pages use a
2-column structure with no footer, so I simply left the unused portions of
the template out. It seems to work and validate O.K. The pages are too
uninteresting at the moment, and need colour, at least. Even the old
layout (e.g. at new.html, not yet converted) is more eye-catching.

The left navigation panel and the header are the same right across the site,
except for the page about Lola Montez (lola.html) Probably I should make
it conform, but I like the layout as it is. I will insert a "back" button
or link.

But my real question is: The header and navigation on all the other pages is
identical. I did read somewhere about putting them into the imported CSS.
Is this a good idea? I have just had to go right through the site fixing a
broken link in the navigation (I relied on memory, not copy and paste.) If
it was in an imported file, I would have had to do it only once. A tutorial
about navigation menus on a multi-page site didn't mention doing this. On
the other hand, the two parts mentioned are normally unchanging.

Doug.
--
Perhaps the most important thing we give each other is our attention.
-- Dr R. N. Remen.

[Beauregard T. Shagnasty]

Doug Laidlaw wrote:

I have successfully converted my site at
http://www.douglaidlaw.net/boykett/ to use a free 3-column template
with header and footer. The home page at index.html uses all
sections of the template.

What is this - empty divs - and where did they come from?

<div style="text-align: center;"></div>
<div class="cols-wrapper">
<div style="text-align: center;"></div>
<div class="float-wrapper">
<div style="text-align: center;"></div>
<div id="col-a">
<div style="text-align: center;"></div>
<div class="main-content">
<div style="text-align: center;"></div>

There are still layout tables being used on all the pages.

The left navigation panel and the header are the same right across
the site, except for the page about Lola Montez (lola.html)

Your other pages are different - from each other. Some have a white
background, with overly-small text links, others have button-looking nav
links hard to the left (in a pea-green color), but with my ugly purple
page background showing elsewhere (Family Tree and Gallery).

Probably I should make it conform, but I like the layout as it is. I
will insert a "back" button or link.

If you don't use the same design for the series of pages, everything
looks disjointed. Like they are separate web sites.

But my real question is: The header and navigation on all the other
pages is identical. I did read somewhere about putting them into the
imported CSS.

CSS is for presentation, not content. No, you can't include menu or
header content in CSS. You need to use included files via SSI, or switch
to using PHP or other server-side language. Or a pre-processor on your
development PC.

--
-bts
-Motorcycles defy gravity; cars just suck

[Doug Laidlaw]

Beauregard T. Shagnasty wrote:

Doug Laidlaw wrote:

>I have successfully converted my site at
http://www.douglaidlaw.net/boykett/ to use a free 3-column template
with header and footer. The home page at index.html uses all
sections of the template.

What is this - empty divs - and where did they come from?

<div style="text-align: center;"></div>
<div class="cols-wrapper">
<div style="text-align: center;"></div>
<div class="float-wrapper">
<div style="text-align: center;"></div>
<div id="col-a">
<div style="text-align: center;"></div>
<div class="main-content">
<div style="text-align: center;"></div>

There are still layout tables being used on all the pages.

>The left navigation panel and the header are the same right across
the site, except for the page about Lola Montez (lola.html)

Your other pages are different - from each other. Some have a white
background, with overly-small text links, others have button-looking nav
links hard to the left (in a pea-green color), but with my ugly purple
page background showing elsewhere (Family Tree and Gallery).

>Probably I should make it conform, but I like the layout as it is. I
will insert a "back" button or link.

If you don't use the same design for the series of pages, everything
looks disjointed. Like they are separate web sites.

>But my real question is: The header and navigation on all the other
pages is identical. I did read somewhere about putting them into the
imported CSS.

CSS is for presentation, not content. No, you can't include menu or
header content in CSS. You need to use included files via SSI, or switch
to using PHP or other server-side language. Or a pre-processor on your
development PC.

Thanks. As for the multiple divs, they were there in the original. I could
see no use for them, but I didn't want to meddle. In NVU/Kompozer, they
look like a series of boxes, one inside the other. Perhaps the original
author didn't clean up his code before he put it on the web.

No, it isn't 100% CSS yet. I am still more comfortable with tables. I have
tried to restrict them to the icons on the Home Page. I wasn't aware that
they were present on other new pages. The old buttons on some pages will
be converted in the next day or so, as will the tables on those pages.
They came from an online button generator, but the final colour never
matched the "web-safe" colour selected.

You say your ugly purple page background. On the old menu, I get a light
blue, which is built-in, not showing through. Do you mean that something
is transparent which shouldn't be? Or do you mean the main content area on
the old pages, which is browser default? My browser default is white, so I
didn't notice.

Can you recommend a good template? This one seems to be coded excessively,
with several stylesheets. Perhaps that is like the extra divs. There are
plenty out on the web, but they are all of similar quality, having
limitations somewhere, or not dealing with an IE issue that I don't fully
understand. The one I liked best was at
http://www.oswd.org/designs/search/designer/id/6205/. It
looked the most professional, and has a printer-friendly format, which
would be handy if I ever get to writing the family history. But when my
existing template started to look good, I continued with it.

Doug.
--
A Lifetime of happiness! No man alive could bear it; it would be hell on
earth.
- G.B. Shaw.

[Beauregard T. Shagnasty]

Doug Laidlaw wrote:

Beauregard T. Shagnasty wrote:

><schnipp>

Thanks. As for the multiple divs, they were there in the original. I
could see no use for them, but I didn't want to meddle. In
NVU/Kompozer, they look like a series of boxes, one inside the other.
Perhaps the original author didn't clean up his code before he put
it on the web.

Ah, the problems with borrowed code...

You say your ugly purple page background. On the old menu, I get a
light blue, which is built-in, not showing through. Do you mean that
something is transparent which shouldn't be? Or do you mean the main
content area on the old pages, which is browser default? My browser
default is white, so I didn't notice.

The main content area on the two pages I mentioned. You assigned no body
background color, so I see my purple, which is _my_ default color.

Can you recommend a good template?

There are so many. Most have some kind of weird issue. Usually small
issues, to be sure, though some are generally worthless.

This one seems to be coded
excessively, with several stylesheets. Perhaps that is like the
extra divs. There are plenty out on the web, but they are all of
similar quality, having limitations somewhere, or not dealing with an
IE issue that I don't fully understand.

The one I liked best was at
http://www.oswd.org/designs/search/designer/id/6205/.

By Andreas? They use XHTML 1.1, which is totally unnecessary. I would
recommend using HTML 4.01 Strict. Internet Exploder doesn't recognize
properly-served XHTML (any version).

It looked the most professional, and has a printer-friendly format,
which would be handy if I ever get to writing the family history.

Normally, just using a print stylesheet along with careful planning of
div IDs will suffice for printing.

But when my existing template started to look good, I continued with
it.

--
-bts
-Motorcycles defy gravity; cars just suck

[Doug Laidlaw]

Beauregard T. Shagnasty wrote:

Doug Laidlaw wrote:

>Beauregard T. Shagnasty wrote:

>><schnipp>

>Thanks. As for the multiple divs, they were there in the original. I
could see no use for them, but I didn't want to meddle. In
NVU/Kompozer, they look like a series of boxes, one inside the other.
Perhaps the original author didn't clean up his code before he put
it on the web.

Ah, the problems with borrowed code...

>You say your ugly purple page background. On the old menu, I get a
light blue, which is built-in, not showing through. Do you mean that
something is transparent which shouldn't be? Or do you mean the main
content area on the old pages, which is browser default? My browser
default is white, so I didn't notice.

The main content area on the two pages I mentioned. You assigned no body
background color, so I see my purple, which is _my_ default color.

>Can you recommend a good template?

There are so many. Most have some kind of weird issue. Usually small
issues, to be sure, though some are generally worthless.

> This one seems to be coded
excessively, with several stylesheets. Perhaps that is like the
extra divs. There are plenty out on the web, but they are all of
similar quality, having limitations somewhere, or not dealing with an
IE issue that I don't fully understand.

>The one I liked best was at
http://www.oswd.org/designs/search/designer/id/6205/.

By Andreas? They use XHTML 1.1, which is totally unnecessary. I would
recommend using HTML 4.01 Strict. Internet Exploder doesn't recognize
properly-served XHTML (any version).

>It looked the most professional, and has a printer-friendly format,
which would be handy if I ever get to writing the family history.

Normally, just using a print stylesheet along with careful planning of
div IDs will suffice for printing.

>But when my existing template started to look good, I continued with
it.

Thanks for the advice. Yes, the tip that I read about navigation did use
SSI, way back before CSS2. No need to add that as well, although I have
used it for other purposes. I think that I can probably clean up the
template I have. The exercise has at least got me as far as recognizing
what to look for. The "Russian Doll" boxes aren't in Andreas' template.

Doug.
--
I am a man; I consider nothing pertaining to mankind as foreign to my
nature.
- Plautus, Roman writer of comedies, 163 B.c.