Question

I am designing a custom navigation menu, which you can see in it’s current state here. Each individual navigation item looks like this:

So essentially each nav item ‘hangs’ from a horizontal bar. The main part of the image is made up of three slices of an image:

Left: Right: and middle:

The background for the middle DIV has repeat-x applied, so that it will grow to fit the content of the navigation items, i.e. the text.

This is the CSS I currently have for the left, right and middle DIVs:

.left {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_01.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:2%;
}

.middle {
    width:auto;
    float:left;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

.right {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_03.png);
    background-repeat: no-repeat;
    height:46px;
}

So far so good, but I then had to work out how to include the vertical bar that joins the main horizontal bar to the image constructed for the nav items, so that it was always centred. The way I did it was to include a div for it within the middle div as follows:

<li>
<div class="nav_image">
<div class="left"></div>
<div class="middle"><div class="top"></div>home</div>
<div class="right"></div>
</div>
</li>

and then apply a negative margin-top to the ‘top’ DIV:

.top {
    height:27px;
    background-image: url(nav/images/top.png);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-top:-24px;
}

and a positive margin-top to the ‘nav_image’ DIV:

.nav_image {
    margin-top:27px;
}

I’m not sure if this is the best way to achieve what I am looking for, but it is working so far.

The issue I am having is setting a background color for the ‘nav_image’ DIV. I would like to set a color for this, and another color on hover. I was hoping that I could add rounded corners to this DIV and then set a background color for this that would show behind the background image.

At the moment the DIV ‘nav_image’ is showing a width of 1200px and a height of 0px though. I would have thought it would have inherited the total width of the three child DIVS, i.e. left, middle and right, but clearly this is not what is happening. So I don’t seem to have a DIV to apply the background color to.

I hope this is clear, thanks for reading, and I’d be glad to get any advice on this.

Nick.

Answer 1

1) add these to the css:

ul#list-nav li {
    float:left;
    display:inline;
}

.clear {
    clear:both;
}

2) add <div class="clear"></div> after each <div class="right"></div>

3) remove .left‘s margin-left: 2%; (add margin to ul#list-nav li instead)

the nav_image should have correct width and height now