Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Need Page Tabs in Page Menu Bar Equally Spaced and Justified to Fill Entire (http://forum.bytesforall.com/showthread.php?t=15733)

Water Brief Oct 21, 2011 09:32 PM

[SOLVED] Need Page Tabs in Page Menu Bar Equally Spaced and Justified to Fill Entire
 
Hello everyone. I am having some trouble with spacing the Page Tabs in my Menu Bar in the fashion I would like. I am running Atahualpa 3.7.1. Any help would be appreciated.

My website is www.thewaterbrief.com

The layout width of the site is 990px. I have 7 Pages (home, recent articles, water law basics, links, about, contact and disclaimer). Therefore the Page Menu Bar has 7 Page Tabs. The Page Menu Bar is left-aligned.

ISSUE: I want the 7 Page Tabs to be equally spaced and justified across the entire width of the Menu Bar, using up all available space on the Menu Bar, like a text line can be justified in a word document.

Right now, although the 7 tabs appear equally spaced, I have unused space on the right side of the Menu Bar in most browsers, including Firefox and I.E.

I have the following HTML/CSS Insert presently in place:

}
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active
{
padding: 4px 38px;
}

I want the height padding to remain 4px. However, I want Page Tabs to take up all space in the Menu Bar from the right edge to the left edge and be equally spaced.

Thank you kindly,

Paul
thewaterbrief.com

lmilesw Oct 22, 2011 09:23 AM

I would do that by
  • reduce the side padding on your <a> elements with something like the following
    HTML Code:

    div#menu1 ul.rMenu li a {
    padding: 4px;
    }

    You don't need a:hover, a:active, etc since you want them all the same.
  • Give each li a width and center the text with something like the following
    HTML Code:

    #rmenu2 li {
        width: 130px;
        text-align: center;
    }

  • Play with that width to position as you want.
  • Play with
Of course now if you add any menu items you will have to fiddle with this again.

juggledad Oct 22, 2011 10:17 AM

you could also play with this
HTML Code:

div#menu1 ul#rmenu2 li.menu-item {width: 10%;}
div#menu1 ul#rmenu2 li.menu-item ul li {width: 100%;}


Water Brief Oct 22, 2011 02:01 PM

Thank you both for your very quick and helpful responses. The Page Tabs in my Menu Bar are now equally spaced and take up all available width in the Menu Bar. Just the way I want them.

Sincerely,

Paul
thewaterbrief.com


All times are GMT -6. The time now is 09:29 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.