WordPress.org

Support

Support » Themes and Templates » fixed-width navigation items in #access?

fixed-width navigation items in #access?

  • emilysparkle
    Participant

    @emilysparkle

    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.

    View post on imgur.com

    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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Michael
    Forum Moderator

    @alchymyth

    please use a tool such as Firefox’ add-on Firebug for this kind of formatting problem.

    http://getfirebug.com/

    emilysparkle
    Participant

    @emilysparkle

    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.

    Rachel Baker
    Participant

    @rachelbaker

    Emily,

    Can you provide us with a link to the live site so we can help?

    emilysparkle
    Participant

    @emilysparkle

    184.154.226.2/~mzimani1/

    Rachel Baker
    Participant

    @rachelbaker

    Emily,

    1. zero out the margins on #access div #access ul
    2. You can then set the fixed width on #access li

    emilysparkle
    Participant

    @emilysparkle

    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.

    emilysparkle
    Participant

    @emilysparkle

    *sigh* i wish it had been those things. something else is affecting it. can one somehow make the div not wrap?

    Alex Mansfield
    Participant

    @alexmansfield

    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.

    emilysparkle
    Participant

    @emilysparkle

    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.

    🙁

    Alex Mansfield
    Participant

    @alexmansfield

    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

    emilysparkle
    Participant

    @emilysparkle

    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!

    Alex Mansfield
    Participant

    @alexmansfield

    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;

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘fixed-width navigation items in #access?’ is closed to new replies.