Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Results 1 to 5 of 5

Thread: damn css

  1. #1
    Join Date
    Aug 2008
    Posts
    206
    Tokens
    0

    Default damn css

    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:
    Code:
    #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 .
    Last edited by Meti; 10-12-2008 at 03:31 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    3,711
    Tokens
    100

    Latest Awards:

    Default

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

    And NEVER use positions. Use floats

  3. #3
    Join Date
    Jun 2008
    Location
    Manchester
    Posts
    766
    Tokens
    0

    Default

    Quote Originally Posted by Meti View Post
    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.

  4. #4
    Join Date
    Jan 2008
    Posts
    3,711
    Tokens
    100

    Latest Awards:

    Default

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

  5. #5

    Default

    Code:
    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.

    Code:
    <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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •