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 4 of 4

Thread: 3 Part Banner

  1. #1
    Join Date
    Aug 2006
    Posts
    53
    Tokens
    50
    Habbo
    Ash564

    Latest Awards:

    Default 3 Part Banner

    Hello!

    On my site, i want my banner to cover the whole page regardless of resolution. I have chopped my banner into 3 sections...



    How do i code the CSS so the middle bit stretches until the end part?

    My current CSS:

    Code:
    .bannerstart {
    	background: url(images/v1/banner_start.png) no-repeat;
    	height: 150px;
    	text-align: left;
    	}
    .bannermiddle {
    	background: url(images/v1/banner_middle.png) repeat-x;
    	height: 150px;
    	text-align: left;
    	}
    .bannerend {
    	background: url(images/v1/banner_end.png) no-repeat;
    	height: 150px;
    	text-align: left;
    	}
    Thanks

    Ash

    EDIT: Cant see due to white on white background.

    Links are http://solent-fusion.co.uk/forum/ima...nner_start.png - http://solent-fusion.co.uk/forum/ima...ner_middle.png - http://solent-fusion.co.uk/forum/ima...banner_end.png
    Last edited by Ash564; 15-02-2011 at 08:07 PM.

  2. #2
    Join Date
    Jun 2008
    Location
    United Kingdom
    Posts
    2,015
    Tokens
    568

    Latest Awards:

    Default

    I'm pretty sure it's just a matter of making a container div that adjusts to fit the resolution using a percentage width (width: 100%; or width: 80%; ), then making the start of the banner stick to the left (float: left; ) and the end of the banner float right (float: right; ).
    The middle part of the banner appears to just be transparent, so you should be able to just leave that out

  3. #3
    Join Date
    Feb 2005
    Location
    Sheffield
    Posts
    2,288
    Tokens
    1,686

    Latest Awards:

    Default

    Quote Originally Posted by Trinity View Post
    I'm pretty sure it's just a matter of making a container div that adjusts to fit the resolution using a percentage width (width: 100%; or width: 80%; ), then making the start of the banner stick to the left (float: left; ) and the end of the banner float right (float: right; ).
    The middle part of the banner appears to just be transparent, so you should be able to just leave that out
    I'm a little rusty on my coding, not done it for a while. If the central bit is just white/transparent/whatever make a 100% width div and then WITHIN that float different images left and right. Think that's what you're saying but just clarifying :p

  4. #4
    Join Date
    Aug 2006
    Posts
    53
    Tokens
    50
    Habbo
    Ash564

    Latest Awards:

    Default

    Sorted Thanks for the help guys!

Posting Permissions

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