Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Need Page Tabs in Page Menu Bar Equally Spaced and Justified to Fill Entire


  #1  
Old Oct 21, 2011, 09:32 PM
Water Brief
 
2 posts · Oct 2011
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
  #2  
Old Oct 22, 2011, 09:23 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 22, 2011, 10:17 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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%;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Oct 22, 2011, 02:01 PM
Water Brief
 
2 posts · Oct 2011
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

Bookmarks

Tags
menu bar, page tabs, spacing

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can I remove the entire menu bar from just one page? Shama Header configuration & styling 6 Dec 12, 2010 04:49 PM
[SOLVED] Page tab height issue: page link tabs higher than page menu bar Fux Page & Category Menu Bars 13 Oct 30, 2010 03:42 AM
Add right-justified text to page menu bar? JWalker Page & Category Menu Bars 0 Oct 22, 2009 09:26 PM
evenly spaced page menu bars phryedrice Page & Category Menu Bars 7 Aug 8, 2009 05:01 AM
Stretch Background Image To Fill Entire Page tim5046 Header configuration & styling 3 Jun 9, 2009 10:35 AM


All times are GMT -6. The time now is 02:21 PM.


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