separator padding/colour problem!

Poster: Bozzy
Dated: Monday February 20 2006 - 9:07:04 GMT

Hi All,

here is the menu i am working on. http://www.blueotwo.com/temp/menu/index.htm

if you click on home, it takes you to the index page and highlights the home button as white. However you will notice that the left hand side of the separaotr line remains grey.

How can I fix this? I have already tried changing all the color values of page/separator and also using a separator image (currently being used) which is the dark grey bar with transparency either side.

Please help if you can

Poster: vikenk
Dated: Monday February 20 2006 - 13:07:53 GMT

Can you post your menu_data.js file in the forum? Try as I might, I could not find it, even though I followed the path in your source code.

This may be a separator padding issue. If there is separator padding, the color of the padding takes on the properties of the menu BG color, I believe.

Also, the padding does not count in the Menu Item space. I don't quite have the right works to describe this, so I hope it makes some sense: If you specify a PAGEBG color, the menu item ONLY changes color - margin and padding don't count, leaving you with the problem you're having now.

Again, this is a little speculative. I need to see the menu_data.js.file.

menu

Poster: Bozzy
Dated: Monday February 20 2006 - 14:11:51 GMT

Hi, you can download it here: http://www.blueotwo.com/temp/menu/menu/menu_data.js

Thanks,
Chris

Poster: vikenk
Dated: Monday February 20 2006 - 14:30:55 GMT

Hi,

OK....I viewed you file. Try changing this...


...to this:


This assumes that you don't want to use the separator image. Try it and let us know how it works.

Poster: Bozzy
Dated: Monday February 20 2006 - 14:35:25 GMT

Hi, I have updated this but still have the same problem

http://www.blueotwo.com/temp/menu/index.htm

Poster: vikenk
Dated: Monday February 20 2006 - 15:18:24 GMT

OK...

I simply added a general padding of 5px and the problem went away. Add this:


The 5px padding adds padding to all four sides of the menu item, so the more padding you add, the bigger your menu will appear. The configuration above solves your problem and give what I assume you want: text in the middle, all highlighted white, and not too close to the separator.

Hope this helps.

Poster: Bozzy
Dated: Monday February 20 2006 - 15:30:27 GMT

thanks for the help vik.

I hope in a future release they allow you specify the vertical padding and horizontal padding seperately.

Poster: vikenk
Dated: Monday February 20 2006 - 15:44:32 GMT



You can do that now, in a round about way. The menu is based on tables and <td>'s. You can use css to put in padding separately (in theory) using the offclass and onclass commands. However, you'll need to remove the padding=5; for this to work.

In the menu_data file, put:



In your css file, put:


Specifying <td> in your css file will target only the menu items (which are basically table cells) and not the menu as a whole (which is the table).

Try it if you want to experiment.

Poster: Bozzy
Dated: Monday February 20 2006 - 16:03:49 GMT

that's exactly what i was trying to do

one last thing maybe you can help with. Since adding the menuon and menuof styles, when you load the pages the links are all underlined when they should only be underlined when you rollover them.

do you know how to get rid of this?

Poster: vikenk
Dated: Monday February 20 2006 - 16:13:26 GMT



Add more CSS :>)

To your menu style, add:

.menuoff a {
text-decoration: none;
}

.menuon a {
text-decoration: underline;
}


That should do the trick.

Poster: Bozzy
Dated: Monday February 20 2006 - 16:18:42 GMT

nice one vik - thanks again