css definition of separator color, size

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:38

css definition of separator color, size

Poster: rww
Dated: Saturday March 13 2004 - 15:45:26 GMT

Is it possible to define such things as the separator color and size, headercolor and headerbgcolor, etc. via css? I have a site that has several sections that use different style sheets, and I'd like to customize menus as much as possible to coordinate with the rest of the section coloring.

Thanks.
RWW

Poster: Ruth
Dated: Saturday March 13 2004 - 19:02:44 GMT

Yes. I'm not real up on css so perhaps there is a better way but my site does actually change the menu color on each page to match the page color. It works fine in all the browsers I tested [ie5, 5.5, nn6, 7, opera 7, firebird .07] Not sure about the mac though Maz uses one and didn't say anything about the menu not working. If you'd like to check it click the www down below, click enter [not text only] and go through a few pages to watch the menu change [not borders, games, guestbook, milonic]. Then view the source. What I did was use the on/off class feature in the menu. For example say you have a section of your site that has black background, white text and you want the border and separator to be the same as the text. You'd code in your head of the document [I guess it would work with calling a style sheet also, if the sheet got loaded before the menu, but for me I just coded each page since I'm having it change by page and not sections]

Code:

<style type="text/css">
   body{
       background-color: #000000;
       color: #ffffff;
       margin: 0px;
       font-style: normal;
       etc.
              }
              
   
      .mainOff {
      background-color:#000000; 
      color:#ffffff; 
      border: 1px #ffffff solid; 
      etc;}

   .mainOn {
      background-color:#ffffff; 
      color:#000000; 
      border: 1px #000000 solid;
      separator: 1px #000000 solid;      
      etc;}</style>

Then in your menu_data.js file you'd put in for example

Code:

with(main1=new mm_style()){
onclass="mainOn";
offclass="mainOff";
and whatever else you didn't code in the style in the page;
}

This would make the menu with a black bgcolor and white text and white border and separator in the off position, in the on position it would switch to white background, black text, border, separator.

There are a couple of drawbacks. 1st, because NN4 is a static browser and doesn't read class, the menu looks to be transparent, so make sure that the main menu is not set anyplace where it will sit over the page text at all, and then you need to define the submenu styles to have their own color and NOT use the class for the bgcolor or text color. 2nd, when trying to validate the css you will get errors for things like 'separator' is not a valid css property

, but it works in the menu fine.

Ruth

Industrial Strength JavaScript and DHTML Menus

css definition of separator color, size