Grow your CSS skills. Land your dream job.

How to position a spreaded menu

  • # April 14, 2009 at 8:14 am

    First of all: Hi at all css players out there and thanks to Chris Coyler for his superb blog!

    Now to my problem:
    For my own homepage I want to do a design, where the menu buttons are widely spreaded over the whole header area. Not like most of the menus in a fixed, nicely arranged and positioned order. Lets say the first button on the coordinates 100,100; the second one at the coordinates of 243,220; etc.
    Now you would say: no problem, use the absolute positioning. Yeah I know – I am not soo new to the CSS circus. But the problem is that I want the site to be centered within the browser window. That said I am using a surrounding div that enables the inner div to be centered (margin-left: auto; margin-right:auto)
    With this configuration the absolute positioning does not work anymore since it is always using the window-display area as reference…
    But with the relative positioning being used, the hover does not work anymore…!?!?

    So what would you suggest?

    Thanks in advance,
    best regards,
    Mike from Bavaria

    Rob
    # April 14, 2009 at 10:40 am
    "mikeFromBavaria" wrote:
    First of all: Hi at all css players out there and thanks to Chris Coyler for his superb blog!

    Now to my problem:
    For my own homepage I want to do a design, where the menu buttons are widely spreaded over the whole header area. Not like most of the menus in a fixed, nicely arranged and positioned order. Lets say the first button on the coordinates 100,100; the second one at the coordinates of 243,220; etc.
    Now you would say: no problem, use the absolute positioning. Yeah I know – I am not soo new to the CSS circus. But the problem is that I want the site to be centered within the browser window. That said I am using a surrounding div that enables the inner div to be centered (margin-left: auto; margin-right:auto)
    With this configuration the absolute positioning does not work anymore since it is always using the window-display area as reference…
    But with the relative positioning being used, the hover does not work anymore…!?!?

    So what would you suggest?

    Thanks in advance,
    best regards,
    Mike from Bavaria

    if you add position:relative to the wrap for example, the buttons would then get their absolute position from the wrap and no the window…

    I just wrote a tut on positioning, it might help – it might not lol…

    http://tutshelf.com/the-art-of-css-positioning/

    # April 14, 2009 at 2:41 pm

    You can wrap your navigation list in a wrapper container class (setting its max-width)
    Then work each of your navigation link as a % based width. this way it spreads across evenly.

    something like

    <div class="navwrap"> <– Set max width, or desired width, with margin: 0 auto; to center
    <ul> <– 100% Width
    <li>Link</li> <– % based width
    <li>Link</li> <– % based width
    <li>Link</li> <– % based width
    <li>Link</li> <– % based width
    <li>Link</li> <– % based width
    </ul>
    </div>

    # April 16, 2009 at 5:41 am

    Tank you both for your suggestions!

    I found the hint from Robskiwarrior very helpful though. It now works perfectly!

    Thank you very much!!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".