473,230 Members | 1,358 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,230 software developers and data experts.

Putting navigation in the CSS

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.

Sep 28 '07 #1
4 2811
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
Sep 28 '07 #2
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.

Sep 28 '07 #3
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
Sep 28 '07 #4
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.

Sep 28 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Veli-Pekka Tätilä | last post by:
Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...
1
by: Robert Neville | last post by:
I am having some trouble with some old code revolving around custom form navigation buttons. My main form has a sub-form with these custom navigation buttons. In other words, the code should be...
4
by: Sandy.Pittendrigh | last post by:
I don't want to get into a frames discussion here. We all know they have numerous drawbacks, especially with search engine visibility. (Google, ironically, uses framesets for displaying individual...
28
by: laredotornado | last post by:
Hi, Surprisingly, I can't get the drop down menus to work on PC IE 6. If you roll over "PRODUCTS", normally a drop down menu appears (on Safari and Firefox), but on PC IE, nada. ...
3
by: Paul | last post by:
I want the <div id="navigation"column to be the same color all the way to the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to force it with a long 1-pixel graphic - didn't...
10
by: EA | last post by:
I am sure I must be missing something about building navigation bars with CSS. Yes it is a very clever and efficient way to format navigation structures on simple one navigation level webs, i.e....
1
by: quartzy | last post by:
I have a strict doc type: However, I am still unsure about css. Problems I have now are to do with floating both navigation lists. I have used tables and divs, as layouts are just too difficult for...
0
by: emalcolm_FLA | last post by:
Hello and TIA for your consideration. I have created several db's for a non-profit and they want custom navigation buttons to display "You are on the first record, last record, etc". With this...
0
by: tom59593 | last post by:
Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.