Question

I’m working on a navigation like the image below.

The whole nav is the width of the browser window, but the items are centered to the design.

I haven’t worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?

Thanks

Answer 1

I’d go with using a container with a simple background colour and positioning the menu inside of that.

I’ll whip up a quick example for you.

UPDATE

Here’s a quick example I’ve just put together: http://jsfiddle.net/aQTRF/

Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you’ve stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.