Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to strech the red part to all of the page length (almost 100% height) ?

  1. #1
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to strech the red part to all of the page length (almost 100% height) ?

    I spent hours on google, and found out how to make rounded corners without images :-)

    Now I would like to know how can I strech the red zone, to be almost 100% height, even if he containt only a few lines,
    So the red part height will strech to almost 100% height, the "Footer" will be always at the buttom of the browser, right after the end of the red zone.

    http://img2.timg.co.il/forums/1_120959261.html

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Change:
    Code:
    div.box-contents {position: relative; padding: 8px; color:white;}
    to:
    Code:
    div.box-contents {position: relative; padding: 8px; color:white;height:100%}
    - Mike

  3. #3
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mburt View Post
    Change:
    Code:
    div.box-contents {position: relative; padding: 8px; color:white;}
    to:
    Code:
    div.box-contents {position: relative; padding: 8px; color:white;height:100%}
    Thanks, but I already tried it, with no success :
    http://img2.timg.co.il/forums/1_120962202.html

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Add the following CSS styles:
    Code:
    html,body, div#content, div.rounded-bod, div.box-contents {
       height:100%;
    }

  5. #5
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    Quote Originally Posted by bondnobond View Post
    I spent hours on google, and found out how to make rounded corners without images :-)
    Can you post the link to where you found out how to do this? I am very interested to see how that works.

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by rangana View Post
    I wouldn't recommend the method that Jon uses there (nor does he, for that matter).

    If you're using Fx3 or Safari, the rounded-corner CSS3 property is supported. That could be an option.

  8. #8
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    yes i know about -moz-border-radius for firefox but how did he get his to be round in IE as well? Is there -moz-border-radius that works in IE maybe? Im just confused...

  9. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by Moshambi View Post
    yes i know about -moz-border-radius for firefox but how did he get his to be round in IE as well? Is there -moz-border-radius that works in IE maybe? Im just confused...
    No...that would be too easy. Currently, IE doesn't support border radius.

    If you wanted to, you could do it via the technique that rangaga reported. But, then you would be implementing browser-specific code, which I never like to do (and it's against "best practices").

    It's probably a buch better idea to use any of these methods.

  10. #10
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The following URL already looking better, thanks :-)
    (The trick with the 100% and 94% is working)

    http://img2.timg.co.il/forums/1_120994903.html

    But when I resize the browser window (make it smaller), Than a little vertical scrolling appear.
    Or even if the link open in a none maximize windows - the same problem occur.

    Does anybody knows why ? How can I avoid it ? (Maybe another trick than the 100%, 94% ?)

    Thanks.

Bookmarks

Posting Permissions

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