How to create a unique CSS navigation menu

Question

I have enough CSS knowledge, but I was stumped trying to create a unique navigation bar for the website I'm working on.

Since pictures cost more than 9,000 words, I put together a diagram to represent the script.

Container # (blue) has a width of 1000 pixels and has rounded corners of 25 pixels. At the top of the container is #navbar (green), which is the full width of the # container and has a height of 55 pixels (it corresponds to the top, left and right edges of the # container, but I enlarged it in the image so that you can see it better) . Inside the #navbar are various navigation buttons (red). I want all the buttons to be equally wide (and always stretch from one side to the other), and the buttons in the left / right left corner should have rounded corners, like my grandparents #container. The solution should be clean and strong CSS and work in most modern browsers (except IE 8 and below).

I want this to be a learning experience, so if you are posting the code, provide some explanation.

Answer 1

HTML:

<nav> <span>1</span> <span>2</span> <span>3</span> </nav> <div id="container"> </div> 

You should probably include this in the list ...

CSS

 nav { display: table; /* see below */ width: 1000px; } #container { height: 400px; width: 1000px; background: blue; border-radius: 0 0 25px 25px; /* top-left top-right bottom-right bottom-left */ } nav span { display: table-cell; /* spreads them equally across, no matter how many elements */ height: 55px; background: green; } nav span:first-child { border-radius: 25px 0 0 0; } nav span:last-child { border-radius: 0 25px 0 0; } 

Here's the fiddle: http://jsfiddle.net/GHVSZ/

Answer 2

update:

check this script: http://jsfiddle.net/jQpF8/4/

that's what you need?

to set the width equal, you must manually set the width using the percentage (total width of the navigation bar / number of links) of the links or set it via JS in case of a dynamically changing number of links.

Answer 3

If you always have only 3 elements, you can give a width of 33% for the first 2 of them and automatically switch to the 3rd - so that they are stretched to the end, as well as adding 2 classes - the "first element" to the first menuitem and "last-item" on the last, so you can give them border-top-left-radius and border-top-right-radius