Top bar goes completly wrong

I have done this before and as I remember it went right, now it goes wrong.

The middle part of the bar goes a bit over the left one, and right one is below the middle one. :injured:

The issue :

HTML :


<div id="content-wrap">
<div id="content">
		<div id="bar-left">
		</div>
			<div id="bar-mid">

			Upper Bar

			</div>
		<div id="bar-right">
		</div>
</div>
</div>

CSS :


#content {
    text-align:center;
}
#content-wrap {
    width: 80%;
    position: relative;
    margin: 0 auto;
    float:center;
    margin-top: 20px;
}
#bar-left {
    background: url(img/bar-left.png) no-repeat;
    width: 6px;
    height: 58px;
    float:left;
}

#bar-mid {
    background: url(img/bar-mid.png) repeat-x;
    height: 58px;
    text-align:left;
    line-height:55px;
    font-weight:bold;
}

#bar-right {
    background: url(img/bar-right.png) no-repeat;
    width:5px;
    height:58px;
    float:right;
}

Hi,

I think I already mentioned that it would be better to do that as two nested divs with the left background image and the background color of the bar placed on the first outer and then the right cap placed on the inner at the right position. Clean and tidy and no messy empty divs hanging around.

In your example you floated the left and right caps so you must remember that floats must come first before static block content that you want to wrap.


<div id="content-wrap">
    <div id="content">
        <div id="bar-left"> </div>
        <div id="bar-right"> </div>
        <div id="bar-mid"> Upper Bar </div>
    </div>
</div>


However the two nested div approach is cleaner and safer.

Yet again you keep rocking.
This worked again I’m so jealous on your skills :goof:
Teach me! xD

Thanks alot :blush:

Only there is a similiar problem, the middle bar goes over the left and right ends.

In which example?

If you are using my two nested div approach then you add padding left to the outer to match the width of the left image and to make sure the inner div doesn’t overwrite it.

If you were rererring to your example I’d need more info.:slight_smile:

This is what I mean

The left one is wrong and shows what it is like at the moment, the right one is what I made in paint fast to show you how it needs to look like.

Are these transparent corners you are using or do they have a solid white background?

If they are transparent then you need to drag the corners away from the repeating background. You could apply a 6px margin-left and a 6px margin-right to Content (margin: 0 6px) and then drag the left bar float into the gap using margin-left:-6px and the reverse for the right float with margin-right:-6px.

HOORAY IT WORKED.

Added margin-left and margin-right:6px;

To content,

and margin-left margin-right:-6px; to right and left bar.

Thanks alot!
Love you srsly :stuck_out_tongue: