css definition of separator color, size

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
rww
Advanced
Advanced
Posts: 11
Joined: Sat Mar 13, 2004 4:34 pm

css definition of separator color, size

Post by rww »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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: Select all

<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: Select all

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
Post Reply