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 navigation
structure on it?
Level 1
Level 1.1
Level 1.2
Level 2
Level 2.1
Level 2.1.1
Level 2.1.2
Level 2.2
Level 2.3
Level 2.3.1
Level 3
Level 4
When building the site this would be okay, but what about when the site is
updated with additional web pages this would require a lot of work. It
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to be
updated.
Am I missing some clever trick?
If the navigation pages were inside a frame on the left hand side of the web
pages, the navigation pages could all be kept in one place. However I
thought the use of DIV was supposed to make the use of frames obsolete.
EA
10  2504 
EA wrote:
right in thinking that if you wish to have nested navigation structures then
each individual page of the web site must have a different navigation
structure on it?
You can do this quite easily. Use either a server-side technique like
SSI, or some publication-time merge process (a trivial CMS, a Perl
script, or even just a DOS batch file) that embeds a shared "menu" file
inside each "page" file.
It's usually easiest to have a slightly different structure on each
page to make it look perfect (you probably only need to set
class="current" on the relevant menu item). There's a CSS technique
though where you don't even need to do that much. Set a page id on the
<bodyelement and then in the CSS you have a number of selectors that
match each possible combination, i.e.
ul.nav-menu li.current,
#page1 #nav-page1,
#page2 #nav-page2,
#page3 #nav-page3,
#page4 #nav-page4,
{ background-colour: taupe; [...] }
When building the site this would be okay, but what about when the site is
updated with additional web pages this would require a lot of work.
Yes, you ought to do something smart(ish). It does get painful
otherwise.
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to be
updated.
Ditch the "respective navigation coding" Do it right and you can use
the same block for all pages.
Yes, you need to manually update something. Then you need to replicate
that onto all the pages -- but you can make the machines do that for
you.
If the navigation pages were inside a frame on the left hand side of the web
pages, the navigation pages could all be kept in one place. However I
thought the use of DIV was supposed to make the use of frames obsolete.
This has little to do with HTML 4+, CSS or <div You didn't need
frames to solve this particular menu problem, even when frames were a
whizzy new feature.
"EA" <NO****@twelve.me.ukwrote:
>When building the site this would be okay, but what about when the site is
updated with additional web pages this would require a lot of work. It
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to be
updated.
Am I missing some clever trick?
Take your pick: Server Side Inclusion, preprocessor, advanced S&R.
--
Spartanicus
"EA" <NO****@twelve.me.ukwrites:
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 navigation
structure on it?
Level 1
Level 1.1
Level 1.2
Level 2
Level 2.1
Level 2.1.1
Level 2.1.2
Level 2.2
Level 2.3
Level 2.3.1
Level 3
Level 4
When building the site this would be okay, but what about when the site is
updated with additional web pages this would require a lot of work. It
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to be
updated.
Am I missing some clever trick?
Depending on your requirements, it is possible to have the same
navigation in all pages with different parts visible or hidden as a
result of style changes in the page rather then the navigation, but
even then this is probably not the most common solution.
The are several techniques that can simplify the process. You can
build the site with an off-line tool that generates the appropriate
navigation for each page. I use a pile of M4 macros for some sites,
and I hear that XML transformation tools are popular for this purpose.
Alternatively (or, indeed, in addition), the navigation can be
generated by some server side scripting or included via server side
includes.
If the navigation pages were inside a frame on the left hand side of the web
pages, the navigation pages could all be kept in one place. However I
thought the use of DIV was supposed to make the use of frames
obsolete.
I think a reluctance to use server-side technology is largely
responsible for keeping frames alive.
--
Ben.
Depending on your requirements, it is possible to have the same
navigation in all pages with different parts visible or hidden as a
result of style changes in the page rather then the navigation, but
even then this is probably not the most common solution.
Do you have any examples...or any references I could check to try to
understand this.
Alternatively (or, indeed, in addition), the navigation can be
generated by some server side scripting or included via server side
includes.
Again do you have any samples I could look at to try to better understand
this, because it appears what I will have to do - if I can understand how to
do it.
Many thanks for your efforts so far.
EA
"Ben Bacarisse" <be********@bsb.me.ukwrote in message
news:87************@bsb.me.uk...
"EA" <NO****@twelve.me.ukwrites:
>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 navigation
structure on it?
Level 1
Level 1.1
Level 1.2
Level 2
Level 2.1
Level 2.1.1
Level 2.1.2
Level 2.2
Level 2.3
Level 2.3.1
Level 3
Level 4
When building the site this would be okay, but what about when the site
is
updated with additional web pages this would require a lot of work. It
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to
be
updated.
Am I missing some clever trick?
Depending on your requirements, it is possible to have the same
navigation in all pages with different parts visible or hidden as a
result of style changes in the page rather then the navigation, but
even then this is probably not the most common solution.
The are several techniques that can simplify the process. You can
build the site with an off-line tool that generates the appropriate
navigation for each page. I use a pile of M4 macros for some sites,
and I hear that XML transformation tools are popular for this purpose.
Alternatively (or, indeed, in addition), the navigation can be
generated by some server side scripting or included via server side
includes.
>If the navigation pages were inside a frame on the left hand side of the
web
pages, the navigation pages could all be kept in one place. However I
thought the use of DIV was supposed to make the use of frames
obsolete.
I think a reluctance to use server-side technology is largely
responsible for keeping frames alive.
--
Ben.
If I embed a common shared menu, and I am by no mean sure how to do that
yet, how do I cope with the hiding and unhiding of the respective parts of
the navigation menu depending on what is clicked. On what I have so far it
works by me producing lots of menu pages and then displaying them when
clicked.
Are you suggesting I could have one page that hides and unhides relevant
child elements of itself depending on when the mouse pointer is?
Quite what you are intending to show me with the class="current" is beyond
my comprehension. Do you have any references which might assist me.
I really would like to build this web site properly from the start and
understand that navigation is the key to this.
I appreciate any assistance anyone can offer.
Many thanks,
EA
"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11**********************@m7g2000cwm.googlegro ups.com...
>
EA wrote:
>right in thinking that if you wish to have nested navigation structures
then
each individual page of the web site must have a different navigation
structure on it?
You can do this quite easily. Use either a server-side technique like
SSI, or some publication-time merge process (a trivial CMS, a Perl
script, or even just a DOS batch file) that embeds a shared "menu" file
inside each "page" file.
It's usually easiest to have a slightly different structure on each
page to make it look perfect (you probably only need to set
class="current" on the relevant menu item). There's a CSS technique
though where you don't even need to do that much. Set a page id on the
<bodyelement and then in the CSS you have a number of selectors that
match each possible combination, i.e.
ul.nav-menu li.current,
#page1 #nav-page1,
#page2 #nav-page2,
#page3 #nav-page3,
#page4 #nav-page4,
{ background-colour: taupe; [...] }
>When building the site this would be okay, but what about when the site
is
updated with additional web pages this would require a lot of work.
Yes, you ought to do something smart(ish). It does get painful
otherwise.
>seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to
be
updated.
Ditch the "respective navigation coding" Do it right and you can use
the same block for all pages.
Yes, you need to manually update something. Then you need to replicate
that onto all the pages -- but you can make the machines do that for
you.
>If the navigation pages were inside a frame on the left hand side of the
web
pages, the navigation pages could all be kept in one place. However I
thought the use of DIV was supposed to make the use of frames obsolete.
This has little to do with HTML 4+, CSS or <div You didn't need
frames to solve this particular menu problem, even when frames were a
whizzy new feature.
"EA" <NO****@twelve.me.ukwrites:
>Depending on your requirements, it is possible to have the same
navigation in all pages with different parts visible or hidden as a
result of style changes in the page rather then the navigation, but
even then this is probably not the most common solution.
Do you have any examples...or any references I could check to try to
understand this.
Crude example. If every page has the following:
#v+
<ul>
<li><a href="sec1.html">Section 1</a>
<ul class="sec1">
<li><a href="sec1.1.html">Sec 1, subsec 1</a></li>
<li><a href="sec1.2.html">Sec 1, subsec 2</a></li>
<li><a href="sec1.3.html">Sec 1, subsec 3</a></li>
</ul></li>
<li><a href="sec2.html">Section 2</a>
<ul class="sec2">
<li><a href="sec2.1.html">Sec 2, subsec 1</a></li>
<li><a href="sec2.2.html">Sec 2, subsec 2</a></li>
<li><a href="sec2.3.html">Sec 2, subsec 3</a></li>
</ul></li>
<li><a href="sec3.html">Section 3</a>
<ul class="sec3">
<li><a href="sec3.1.html">Sec 3, subsec 1</a></li>
<li><a href="sec3.2.html">Sec 3, subsec 2</a></li>
<li><a href="sec3.3.html">Sec 3, subsec 3</a></li>
</ul></li>
</ul>
#v-
you only need the index page to have the CSS:
ul ul { display: none; }
and all the nested menus will not be shown (to CSS enabled browsers).
The sec1.html would have exactly the same navigation text but it would
include the rule:
ul.sec1 { display: block; }
and the "Section 1" sub menu will be available in this page. All
pages in section one would have this CSS rule. Generalise to the
other sections and style the lists to your preferred menu "look".
>Alternatively (or, indeed, in addition), the navigation can be
generated by some server side scripting or included via server side
includes.
Again do you have any samples I could look at to try to better understand
this, because it appears what I will have to do - if I can understand how to
do it.
If SSI is available in your server, you can include common navigation
by putting:
<!--#include virtual="nav.html"-->
in the page where you want it. You will probably need to read your
server docs to get all of this to work since there are settings to
control what files will be scanned for SSI directives.
--
Ben.
William Hughes wrote:
I use a stand-alone file and IFRAME for my navigation.
That's as bad as frames.
A very big thank you to everyone who offered advice (especially Andy and
Ben).... I now have a navigation structure I am moving forward with that is
centrally administered.
Many thanks for your help and advice... I am sure I will return [smile]
EA
"Ben Bacarisse" <be********@bsb.me.ukwrote in message
news:87************@bsb.me.uk...
"EA" <NO****@twelve.me.ukwrites:
>>Depending on your requirements, it is possible to have the same
navigation in all pages with different parts visible or hidden as a
result of style changes in the page rather then the navigation, but
even then this is probably not the most common solution.
Do you have any examples...or any references I could check to try to
understand this.
Crude example. If every page has the following:
#v+
<ul>
<li><a href="sec1.html">Section 1</a>
<ul class="sec1">
<li><a href="sec1.1.html">Sec 1, subsec 1</a></li>
<li><a href="sec1.2.html">Sec 1, subsec 2</a></li>
<li><a href="sec1.3.html">Sec 1, subsec 3</a></li>
</ul></li>
<li><a href="sec2.html">Section 2</a>
<ul class="sec2">
<li><a href="sec2.1.html">Sec 2, subsec 1</a></li>
<li><a href="sec2.2.html">Sec 2, subsec 2</a></li>
<li><a href="sec2.3.html">Sec 2, subsec 3</a></li>
</ul></li>
<li><a href="sec3.html">Section 3</a>
<ul class="sec3">
<li><a href="sec3.1.html">Sec 3, subsec 1</a></li>
<li><a href="sec3.2.html">Sec 3, subsec 2</a></li>
<li><a href="sec3.3.html">Sec 3, subsec 3</a></li>
</ul></li>
</ul>
#v-
you only need the index page to have the CSS:
ul ul { display: none; }
and all the nested menus will not be shown (to CSS enabled browsers).
The sec1.html would have exactly the same navigation text but it would
include the rule:
ul.sec1 { display: block; }
and the "Section 1" sub menu will be available in this page. All
pages in section one would have this CSS rule. Generalise to the
other sections and style the lists to your preferred menu "look".
>>Alternatively (or, indeed, in addition), the navigation can be
generated by some server side scripting or included via server side
includes.
Again do you have any samples I could look at to try to better understand
this, because it appears what I will have to do - if I can understand how
to
do it.
If SSI is available in your server, you can include common navigation
by putting:
<!--#include virtual="nav.html"-->
in the page where you want it. You will probably need to read your
server docs to get all of this to work since there are settings to
control what files will be scanned for SSI directives.
--
Ben.
El Thu, 09 Nov 2006 13:17:53 +0000, EA escribió:
When building the site this would be okay, but what about when the site is
updated with additional web pages this would require a lot of work. It
seems to me that when the navigation structure is changed every web page,
because it contains it's own respective navigation coding, will need to be
updated.
Am I missing some clever trick?
As others have pointed out, your options are SSI, a preprocessor, or doing
a global search-and-replace. What I have settled on is a preprocessor,
which allows you to have your navigation (and all recurring code)
in one place, making for easy modification later. There are several; my
pick is Webmake: <http://webmake.taint.org/>, I think. Once you get handy
with a preprocessor you will find that all kinds of web maintenance
becomes easier.
--
Warren Post This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Dave Patton |
last post by:
Using my About page as an example:
http://members.shaw.ca/davepatton/about.html
What is the best/proper way to markup a page such as
this that has "the main body" and "a navigation menu"?
It...
|
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...
|
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...
|
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...
|
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.
...
|
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...
|
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...
|
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...
|
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...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
