473,662 Members | 2,382 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2832
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
2123
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 org, However, I haven't gotten a reply for a week or so, and figured out I could post here for a larger audience, then. Original message follows: Hello,
1
3547
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 modular and work across forms and sub-forms. My previous code was taken from the Access Expert Solutions 97 (Leszynski) many years ago. As my database became more complex with multiple sub-forms and intricate combo boxes, the code faltered. Some...
4
3029
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 news group posts). Despite the trouble they cause, it is still tempting to use frames, occasionally, for instance for machine-generated pages that might have a large number of left-side navigation links. If you do use frames in that...
28
2673
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. http://test2.boxxtech.com/corporate/test.asp Any ideas? Thanks, - Dave
3
2508
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 work. Any ideas? Here's the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
10
2546
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. six buttons which when clicked go to a separate web page. But here is where I must be missing something, am I right in thinking that if you wish to have nested navigation structures then each individual page of the web site must have a different...
1
1465
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 me to take on right now, but maybe this is causing problems. The left navigation does not sit right ie flush to the left of the page. The top navigation does not float to the right flush either. I hesitantly post this question as a previous post...
0
1955
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 ng help I've created code for all except the add new record command button. If I create individual sub functions behind each form, no problem. The problem is I am trying to create a re-usable module.
0
1908
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 practice using tables...tee hee. Anyways, this should be EXTREMELY simple...as I want NO rollovers, no fancy hovers, no current-page differences...I just want the navigation bar image to be "click-able" where the words are. You can see the...
0
8432
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8856
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8545
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7365
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6185
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5653
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4347
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2762
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1747
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.