How to position a spreaded menu

[mikeFromBavaria]

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 MacKay]

"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/

[Soh Tanaka]

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>

[mikeFromBavaria]

Tank you both for your suggestions!

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

Thank you very much!!

[Author]

Posts