Wordpress Themes - WP Forum at BFA - Centering BOTH Page and Category menu bars

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Centering BOTH Page and Category menu bars (http://forum.bytesforall.com/showthread.php?t=892)

Centering BOTH Page and Category menu bars

I found the thread about centering the page menu horizontal bar. I applied that CSS code to the HTML-CSS inserts area. That covered the Page menu bar only. I added it again, this time without the number 2, and that centered the Category menu bar as well.

Then I decided to make the bars stand out by giving them contrasting background color. Now, of course, I have menu item dividers, with the main background color showing through. I don't want that....plus, now there is an extra empty item showing at the far right of the category menu. I set both to 680px. http://larchmontgazette.com/wp27/

How can I get the effect I want?

Here's the CSS I put in the insert:

Code:

ul#rmenu2 {

margin: 0 auto;

border: 0;

width: 680px;

}



/* Safari Hack: it renders the menu wider and needs 

a few pixels more or it will wrap the last menu item. */

@media screen and (-webkit-min-device-pixel-ratio:0){

ul#rmenu2 {width: 680px;}

}



ul#rmenu {

margin: 0 auto;

border: 0;

width: 680px;

}



/* Safari Hack: it renders the menu wider and needs 

a few pixels more or it will wrap the last menu item. */

@media screen and (-webkit-min-device-pixel-ratio:0){

ul#rmenu {width: 680px;}

}

Item dividers: Those are borders around the <A>'s. One way to remove them would be t change the border color of the <A>'s to the background color of the <LI>'s

HTML Code:

ul#rmenu li a {

border:1px solid #506286;

}

To give the submenus another border:

HTML Code:

ul#rmenu li ul li a {

border:1px solid #123456;

}

Third level:

HTML Code:

ul#rmenu li ul li ul li a {

border:1px solid #654321;

}

The empty tab on the right is caused by the background color of the whole menu bar

HTML Code:

ul#rmenu {

background: none; 

}

(currently set to #506286)