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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: Need to extend wrap background to top and bottom of page?

    Hi everyone!

    I'm having a bit of trouble with my webpage:

    http://www.wellfedproductions.com/linkss.html

    I would like the white background of my wrap in the middle there to extend to the top of the page...and also to the bottom of the page, without the need for content to push it down.

    Thanx in advance for your help...


  • #2
    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
    Code:
    html,body{
    height: 100%;
    }
    html {
    	font-size: 100%;
    	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
    	margin-bottom: 1px;
    }
    
    body {
    	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	color: #536482;
            background-color: #282b54;
            background-image: url("http://www.wellfedproductions.com/images/bluebackground.jpg");
             background-position: top center;
            background-repeat: repeat;
    	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
    	font-size: 10px;
    		margin: 0;
    /*padding:12px 0;*/	
    }
    
    
    /* Main blocks
    ---------------------------------------- */
    #wrap {  
    background-color: #FFFFFF;
    padding: 0 20px; 
    min-width: 850px;  
    width: 850px;
    margin: 0 auto;
    min-height:100%;
    /* hack for IE6 */
    height:auto !important; 
    height:100%;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Woah...that was fast!

    Thank you so much...only thing is, I do want a 12px gap up the top there...


  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, it seems to have cut off the rounded corners on the top of that header?

  • #5
    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
    Add some padding-top to#wrap
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, yes, I have done that...added some padding at the top of the wrap...but:

    Quote Originally Posted by Well Fed View Post
    it seems to have cut off the rounded corners on the top of that header?
    I have some code in there that is supposed to round the corners of the top of the header...like this:

    http://www.wellfedproductions.com/links.html

    Something in the new code has stopped that from working...


  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello...can anyone pls help?


  •  

    Posting Permissions

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