Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts

    Will having a height on the page make the page extend if there is more content?

    Hmm, not sure how to word this.
    But if I set a height to my page, say 500px, will the height of the page extend if there is more content?

    http://simgalaxy.missingstudios.com/?page=tutorials
    There's the page. If I have little to no content, then the navigation will go off the main area of the site.

    So I wanted to put a height on it so this doesn't happen.

    If that makes much sence.
    Last edited by BabyJack; 11-16-2008 at 02:13 PM.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I believe that setting min-height is the way to go.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Of course! Thanks

    but a problem:

    http://simgalaxy.missingstudios.com/?page=downloads

    How would I get the text to go straight down the page and not go below the sidebar??
    Last edited by BabyJack; 11-16-2008 at 12:49 PM.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is just a quickie.

    alter this to suit.

    Code:
    #content {Float:left;
    width: 60%;
    min-height: 500px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-size: 11px;
    font-color: #333333;
    text-align: left;
    border: 2px solid #fff;
    }
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    http://simgalaxy.missingstudios.com/?page=downloads
    That messes up the page, badly.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please fix the markup errors first, before asking for help. See http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Ok, it validates now. http://validator.w3.org/check?uri=ht...Inline&group=0
    So back to the question.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this for size.

    Adjust as necessary.

    It has some errors which I am working on.

    Frank
    Last edited by effpeetee; 11-16-2008 at 01:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Will having a height on the page make the page extend if there is more content?
    No, in the standard browsers like FF, Opera, Safari etc, though it would work in IE.

    So, the usual practice is to initially set a 100% height to the html and body elements.
    Then apply a min-height:100%; to main wrapper element. Since min-height is not supported in IE, we will hack this for IE by the * html selector.

    http://bonrouge.com/3c-hf-fluid.php explains and demonstrates this after setting a style
    Code:
     html {height:100%;}
    body {
    margin:0;
    padding:0;
    height:100%;
    background:#ffffff url(bg.gif) top right repeat-y;
    font-family:arial, serif;
    }
    #wrap {
    position:relative;
    background:url(bg.gif) top left repeat-y;
    min-height:100%;
    }
    * html #wrap {height:100%}
    Ok, it validates now.
    Just forget about the depreciated element <center> and apply a margin-left:auto; margin-right:auto; to center an element.
    Last edited by abduraooft; 11-16-2008 at 02:01 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    BabyJack (11-16-2008)

  • #10
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Thanks abduraooft! It worked!

    Edit: Next Question- How can I get the sidebar to go all the way down to the page so the text doesn't go the way it is now on here: http://simgalaxy.missingstudios.com/?page=downloads
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Just apply margin-right:250px;(the width of your sidebar) to your #content

    Thanks abduraooft! It worked!
    Not in that online version.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by abduraooft View Post
    Just apply margin-right:250px;(the width of your sidebar) to your #content

    Not in that online version.
    What is the online version?
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    He probably means this one. At five posts above.

    Try this for size.

    Adjust as necessary.


    Frank
    Last edited by effpeetee; 11-16-2008 at 02:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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