Posted 3 months ago #
hi,
i'm using a twenty-eleven child theme based on zeaks.org NomNom. i'm struggling with the navigation spacing. i'd like to make my nav items all equal widths with no margins. i took a screenshot of where it is now.
what i'd like to do is make it so that the buttons are each 333px wide and there's no black space on the far lef tor far right.
i can't seem to figure out where in the layers of stylesheets that those spaces are coming from. any ideas? thanks!
:) emily
please use a tool such as Firefox' add-on Firebug for this kind of formatting problem.
Posted 3 months ago #
uh thanks. i know how to use firebug and use chrome's inspector with better luck. i promise you i have tried. perhaps i should have stated that in my first post. there's nothing that gives me any indication where the width of these navi items are set and how to control it with a fixed width.
Posted 3 months ago #
Emily,
Can you provide us with a link to the live site so we can help?
Posted 3 months ago #
184.154.226.2/~mzimani1/
Posted 3 months ago #
Emily,
1. zero out the margins on #access div #access ul
2. You can then set the fixed width on #access li
Posted 3 months ago #
i added #access div #access ul {margin: 0 0 0 0;} but i don't think that changed anything.
if i make #access li anything wider than 299 the nav wraps? the image cells are 333 each and i'd like them to line up as best as possible.
Posted 3 months ago #
*sigh* i wish it had been those things. something else is affecting it. can one somehow make the div not wrap?
Posted 3 months ago #
While the image cells might start out at 333px each, they exapnd and/or contract based on the size of the browser. To get your menu items to do the same, I would suggest changing the width of #access li to 33% instead of a fixed width.
Posted 3 months ago #
i had tried that too. i get basically the same results and it mucks with my second level dropdowns. (it's 33% now where it was 299px) in #access li.
:(
Posted 3 months ago #
What browser are you using, and what screen width does it wrap at? I can get it down to about 835px before it wraps. Even then, only the arrows are wrapping for me, not an entire menu item. To keep those style from mucking with your second level drop-downs, use child selectors so this:
#access li
becomes this:
#access div > ul > li
Posted 3 months ago #
hi ... i use primarily chrome (v17.0.963.46). it wraps the arrows for me around 833, which isn't a show-stopper. i'm happy to report firefox and safari all look/act the same. i'm on a mac 10.6.8.
i need to learn more about how to define/decipher child selectors. i once read a tip somewhere that said you could copy this info out of firefox or the chrome inspector. i never figured out how though.
i still can't seem to figure out how to eliminate the left margin on the toolbar, forcing it to 100% and making the edges of the boxes line up at 333 intervals. (this IS the show stopper)
thanks for the ideas, folks. keep them coming and i'll keep trying!
Posted 3 months ago #
I haven't tried to copy child selecter info out of the browser, but here's how the work. Take this menu as an example:
<ul id="parent-menu">
<li><a>Menu Item #1</a>
<ul id="child-menu">
<li><a>Submenu Item #1</a></li>
<li><a>Submenu Item #2</a></li>
</ul>
<li><a>Menu Item #2</a></li>
</ul>Your standard CSS without any selectors would look like this:
#parent-menu li{ width: 33%; }
The problem is, that applies equally to the list items in the parent menu and the list items in the submenu. The ">" selector means "direct descendant." It will apply to child elements, but not grandchild elements. For example:
#parent-menu > li{ width: 33%; }
This will not apply to submenu list elements, because they are't direct descendants of the parent menu (there are other elements in between). I hope that helps a little.
Now, to keep the arrows from wrapping, add the following property just below the width: 33%; we discussed earlier:
white-space: nowrap;
You must log in to post.
