Navigation menu with CSS

Question

I try to make a simple horizontal navigation menu with html and css2.

What is a bit special is, that I want a nice background (image) and also the left and right side of the menu are styled with a background image (rounded corners):

( Link 1 | Link 2 | Link 3 )

It would be nice if the dividers are also images but for the moment they are second priority for me as I'm already struggling with the corners.

I experimented with using 3 or 4 divs where one is the container for the whole bar and the rest are left, center and right div. Setting the background images in the last 3 divs:

div.nav
{
    height:39px;
    line-height:39px;
    padding:0;
    margin:0;
    text-align:center;
    vertical-align:middle;
}

div.navLeft {
    content: 
    background: url('../images/left.png') center left no-repeat;
    float: left;
    width:19px;
}

div.navRight {
    content: 
    background: url('../images/right.png') center right no-repeat;
    float: right;
    width:19px;
}

div.navCenter {
    background-image:url('../images/background.png');
    background-color:transparent;
    background-repeat:repeat-x;
    background-position:center;
    width:100px;
}

And the HTML:

        <div class="nav">
            <div class="navLeft"></div>
            <div class="navCenter">test</div>
            <div class="navRight"></div>
        </div>

But in the browser this only shows me the navCenter background image, no left and right image backgrounds are visible. I added the 'content: ' as I thought maybe the DIVs need some content but nothing improved.

Maybe this is the wrong approach and I should use "ul" and "il" tags for the menu but then I don't know where I should place the css for each according background image. For exmaple, can I place the background image for left in the css for the "ul"? But what with the image for the right corner as ul is already in use? Or do I have to use "ul:after" for this?

Answer 1

content:  is not valid CSS, and you shouldn't need it anyway, the width alone on the left/right divs should be enough to give it the width you need, then add a height to match your line-height of the center portion.

If you feel you need to add a &nbsp it should be in the HTML

also navRight should be before navCenter in the HTML for the floats to work properly. if the container div is 138px = 100+19+19 then the center div should just fill the space between the floats, it will if you make it into a new Block Formatting Context, - overflow: hidden will do that..

CSS:

div.nav
{
    height:39px;
    width: 138px;
    line-height:39px;
    text-align:center;
}

div.navLeft {
    background: #0f0;
    float: left;
    width:19px;
    height: 39px
}

div.navRight {
    background: #0f0;
    float: right;
    width:19px;
    height: 39px;
}

div.navCenter {
    background: #f00;
    width:100px;
    overflow: hidden; /* to make new black formatting context if width is used */
}

HTML:

<div class="nav">
  <div class="navLeft"></div>
  <div class="navRight"></div>
  <div class="navCenter">test</div>
</div>

Example fiddle

Answer 2

Give the height to navLeft and navRight as the height of your image. The image will be displayed then. Try it.

Answer 3

It isn't wrong to use div as the menu tabs, although using ul and li offers convenience and more options when you are editing the CSS.

Have you considered using HTML5 for the rounded corners? You can use the border-radius property on the menu container: border-radius: 10px;

You should also add a div with style="clear:both;" after your nav to clear out the effects of float:left and float:right.

Here are some javascript menus you can use on your website, I think they will be helpful:

MenuBasic Menus