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
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...
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>
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/
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>
I found the hint from Robskiwarrior very helpful though. It now works perfectly!
Thank you very much!!