damn css

[UniqueHabbo]

heya, trying to make a title bar thing but...

KEY:
[ = left corner
= = barbg
] = right corner
. = nothing just need it to push the bar

I want it to be like
[=============================]
but it goes like this
[======================
........................................]

The image widths and location etc are all correct.

css:

#title
{
width: 100%;
height: 22px;
background-position: top;
background-image: url("../images/titlebg.gif");
padding: 4px 0 0 6px;
font-family: Tahoma;
color: #FFFFFF;
font-weight: bold;

}

#title-left
{
float: left;
width: 5px;
height: 26px;
background-image: url("../images/titleleft.gif");
}

#title-right
{
float: right;
width: 5px;
height: 26px;
background-image: url("../images/titleright.gif");
}

Thread moved by Meti (Forum Moderator) from "Designing and Development": Please post in the correct forum next time, thanks ;).

[Meti]

The title right is wrong.
Change "float: right;" to "float: left;"

And NEVER use positions. Use floats :)

[Jxhn]

The title right is wrong.
Change "float: right;" to "float: left;"

And NEVER use positions. Use floats :)

It's a background position. There's nothing wrong with that.

[Meti]

Oh soz, didn't see :) Just saw "position" and I was like WOT?! lol :)

[Iszak]

html
{
border: none;
overflow: auto;
}

body
{
margin: 0;
padding: 0;
}

#title
{
color: #fff;
height: 22px;
margin: 0 5px;
font-weight: bold;
font-family: Tahoma;
padding: 4px 0 0 6px;
background-position: top;
background-image: url("../images/titlebg.gif");

}

#title-left
{
width: 5px;
float: left;
height: 26px;
background-image: url("../images/titleleft.gif");
}

#title-right
{
width: 5px;
float: right;
height: 26px;
background-image: url("../images/titleright.gif");
}
If you haven't already done so remove the padding/margin around the body. The other CSS on the HTML is, border to remove the border in IE6, and overflow: auto; to remove the scroll bar until needed in IE in general.

The HTML is slightly different than you probably would think, it is as follows.



<div id="title-left"></div>
<div id="title-right"></div>
<div id="title"></div>
And that should give you the result you were looking for, as the div takes up as much width as it can - and since it's not floated, that's 100%, so we just impose margins to push it left and right from the title-left and title-right.

Live Preview: http://pastebin.me/49400f1be4035

Enjoy.