2 style sheets in one page

D

Dennis Blondell

Hi, I am having trouble with a site that has a linked CSS and a sliding menu
(XP Menu). The general style of the page is good with the CSS but the menu
needs its own style for text, links, hover, visited. The style sheets has
its own, different values for the above. I have given classes to tables and
cells like .hover .visited etc. and assigned them the appropriate colour,
decoration, etc. This works but is very messy and I have to be careful as
the menu has its own classes as well. Is there a way to include values for
various items within one style tag or class? (a: visited: hover: etc) or
assign a separate CSS file to a table or cell and not have it change the
rest of the page? I can't find out how to do this.

Also, does anyone know of a good multi browser 'sliding' vertical menu (XP
Style) that allows me to capture and event onclick when a menu item is
selected? Again I can't find anything suitable on the Net, free or
otherwise.

Cheers from Aotearoa
 
J

Jim Buyens

-----Original Message-----
Hi, I am having trouble with a site that has a linked
CSS and a sliding menu (XP Menu). The general style of
the page is good with the CSS but the menu needs its own
style for text, links, hover, visited. The style sheets
has its own, different values for the above. I have
given classes to tables and cells like .hover .visited
etc. and assigned them the appropriate colour,
decoration, etc. This works but is very messy and I have
to be careful as the menu has its own classes as well.
Is there a way to include values for various items
within one style tag or class? (a: visited: hover: etc)
or assign a separate CSS file to a table or cell and not
have it change the rest of the page? I can't find out
how to do this.

The following styles will default to every hyperlink on a
page, unless overridden.

a { color: #990033 ; text-decoration:none }
a:hover { color: #ff0000 ; text-decoration:underline }

To apply different styles to just a few hyperlinks,
assign a class as in:

<a class="menu" href="/">

and then code a CSS rule like this.

a.menu {color: #000000; background-color: #FFFFFF;}
a:hover.menu {color: #FFFFFF; background-color: #000000;}
Also, does anyone know of a good multi browser 'sliding'
vertical menu (XP Style) that allows me to capture and
event onclick when a menu item is selected? Again I
can't find anything suitable on the Net, free or
otherwise.

There are thousands, and I really don't have a
preference. But you can capture click events from any of
them by coding "javascript" as the URL protocol. This
works because, for example,

<a href="javascript:neatoKeen();">

runs the neatoKeen fucntion whenever the visitor
activates tht hyperlink.

Jim Buyens
Microsoft FrontPage MVP
(e-mail address removed)
http://www.interlacken.com
Author of:
*------------------------------------------------------*
|\----------------------------------------------------/|
|| Microsoft Office FrontPage 2003 Inside Out ||
|| Microsoft FrontPage Version 2002 Inside Out ||
|| Web Database Development Step by Step .NET Edition ||
|| Troubleshooting Microsoft FrontPage 2002 ||
|| Faster Smarter Beginning Programming ||
|| (All from Microsoft Press) ||
|/----------------------------------------------------\|
*------------------------------------------------------*
 
D

Dennis Blondell

a.menu
a:hover.menu

Of course! It is so simple but one thing that I didn't try, nor found in any
style sheet help sights. I'll give it a go. Thanks

I understand what you are saying about calling a function in JavaScript for
the menu but I still haven't found many menus like the XP one that are very
customisable or don't use class files.

The XP menu on my site is found at www.leisuretours.co.nz
 
D

Dennis Blondell

Hi, I tried to include what you said to get the menu to the appropriate
colours but no go. It does change the font type but not the size or colour.

I have these lines in the .CSS for the normal links:
a:link {color: #0033cc; text-decoration: none; font-weight: bold;}
a:visited {color: #339966; text-decoration: none; font-weight: bold;}
a:active {color: #0033cc; text-decoration: underline;}
a:hover {color: #0033cc; text-decoration: underline; font-weight: bold;}

Then I added these lines in the .CSS to include the class values:
..menu { font: 9pt "Arial", "Helvetica", "sans-serif";}
a.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#215DC6;
font-weight: normal; text-decoration:none;}
a:hover.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#428EFF;
text-decoration: underline;}
a:visited.menu { font: 8pt "Arial", "Helvetica", "sans-serif";
color:#215DC6; font-weight: normal;}

I have assigned the .menu class by adding it to the style of the cell that
contains the whole java menu, which is an include page (through FP <td
valign="top" width="150" class="menu">). What am I doing wrong?
 
J

Jim Buyens

Dennis Blondell said:
Hi, I tried to include what you said to get the menu to the appropriate
colours but no go. It does change the font type but not the size or colour.

I have these lines in the .CSS for the normal links:
a:link {color: #0033cc; text-decoration: none; font-weight: bold;}
a:visited {color: #339966; text-decoration: none; font-weight: bold;}
a:active {color: #0033cc; text-decoration: underline;}
a:hover {color: #0033cc; text-decoration: underline; font-weight: bold;}

Then I added these lines in the .CSS to include the class values:
.menu { font: 9pt "Arial", "Helvetica", "sans-serif";}
a.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#215DC6;
font-weight: normal; text-decoration:none;}
a:hover.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#428EFF;
text-decoration: underline;}
a:visited.menu { font: 8pt "Arial", "Helvetica", "sans-serif";
color:#215DC6; font-weight: normal;}

Try
font-size: 9pt; font-family: Arial, Helvetica, sans-serif;
instead of
font: 9pt "Arial", "Helvetica", "sans-serif";

As to the DHTML menus, I've used exactly one product and didn't like
it. There's probbaly a newer version by now but oh well. Instead, I've
decided to start coding my own from scratch. So far I'm still working
out a few details but in any event, I'm not an expert on selecting
DHTML menu software.

Perhaps someone else can chime in. Dennis here is looking for a DHTML
menu generator with these features:

o Vertical sliding menus.
o Lots of customization options.
o Can call an external function when the visitor selects a menu item.
o Doesn't use class files (?)

Jim Buyens
Microsoft FrontPage MVP
(e-mail address removed)
http://www.interlacken.com
Author of:
*------------------------------------------------------*
|\----------------------------------------------------/|
|| Microsoft Office FrontPage 2003 Inside Out ||
|| Microsoft FrontPage Version 2002 Inside Out ||
|| Web Database Development Step by Step .NET Edition ||
|| Troubleshooting Microsoft FrontPage 2002 ||
|| Faster Smarter Beginning Programming ||
|| (All from Microsoft Press) ||
|/----------------------------------------------------\|
*------------------------------------------------------*
 
S

Stefan B Rusynko

IMHO he will have to combine the features of several of the menus at
http://www.dynamicdrive.com/dynamicindex1/




| > Hi, I tried to include what you said to get the menu to the appropriate
| > colours but no go. It does change the font type but not the size or colour.
| >
| > I have these lines in the .CSS for the normal links:
| > a:link {color: #0033cc; text-decoration: none; font-weight: bold;}
| > a:visited {color: #339966; text-decoration: none; font-weight: bold;}
| > a:active {color: #0033cc; text-decoration: underline;}
| > a:hover {color: #0033cc; text-decoration: underline; font-weight: bold;}
| >
| > Then I added these lines in the .CSS to include the class values:
| > .menu { font: 9pt "Arial", "Helvetica", "sans-serif";}
| > a.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#215DC6;
| > font-weight: normal; text-decoration:none;}
| > a:hover.menu { font: 8pt "Arial", "Helvetica", "sans-serif"; color:#428EFF;
| > text-decoration: underline;}
| > a:visited.menu { font: 8pt "Arial", "Helvetica", "sans-serif";
| > color:#215DC6; font-weight: normal;}
|
| Try
| font-size: 9pt; font-family: Arial, Helvetica, sans-serif;
| instead of
| font: 9pt "Arial", "Helvetica", "sans-serif";
|
| As to the DHTML menus, I've used exactly one product and didn't like
| it. There's probbaly a newer version by now but oh well. Instead, I've
| decided to start coding my own from scratch. So far I'm still working
| out a few details but in any event, I'm not an expert on selecting
| DHTML menu software.
|
| Perhaps someone else can chime in. Dennis here is looking for a DHTML
| menu generator with these features:
|
| o Vertical sliding menus.
| o Lots of customization options.
| o Can call an external function when the visitor selects a menu item.
| o Doesn't use class files (?)
|
| Jim Buyens
| Microsoft FrontPage MVP
| (e-mail address removed)
| http://www.interlacken.com
| Author of:
| *------------------------------------------------------*
| |\----------------------------------------------------/|
| || Microsoft Office FrontPage 2003 Inside Out ||
| || Microsoft FrontPage Version 2002 Inside Out ||
| || Web Database Development Step by Step .NET Edition ||
| || Troubleshooting Microsoft FrontPage 2002 ||
| || Faster Smarter Beginning Programming ||
| || (All from Microsoft Press) ||
| |/----------------------------------------------------\|
| *------------------------------------------------------*
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top