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 to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Expand page with background

    So here is the situation:
    I made the 'header & begin content-page' as one background.
    I made a footer that will come under this header also with a background that fits nicely.

    Then i added content manually with a div and some margin, but of course you want to automatically expand the page so the content fits inside.
    But HOW would i accomplish this?

    This might make it more understandable:
    PHP Code:
    <div id="content-singlepage"> <!-- This had the first background -->
                <
    div id="page-content">
                      
    Content blablbaa
                 
    </div>
    </
    div>
    <
    div class="extend"></div> <!-- background for extending between header footer -->
    <
    div id="footer">.</div><!-- background for footer --> 
    Css:
    PHP Code:
    #content-singlepage {
        
    background-image:url("images/Header-test.png");
        
    background-repeat:no-repeat;
        
    height:549px;
    }

    #page-content-container {
        
    max-width:850px;
        
    width:850px;
        
    height:300px;
        
    margin:0 auto;
        
    margin-top:240px;
        
    }

    #page-content {
        
    max-width:850px;
        
    width:850px;
        
    text-alignjustify
        
    padding:15px;
      
    }

    .
    extend {
        
    background-image:url("images/extender.png");
        
    background-repeat:repeat-y;
        
    height:100px;
        
    margin-left:95px;
    }

    #footer {
        
    background-image:url("images/footer.png");
        
    background-repeat:no-repeat;
        
    height:334px;

    PREVIEW
    Last edited by jasperdj; 11-10-2011 at 03:17 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jasperdj,
    The normal behavious of a div element would be to expand to contain whatever you put in it. We would need to see your both your CSS and markup to see why that is not happening.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello jasperdj,
    The normal behavious of a div element would be to expand to contain whatever you put in it. We would need to see your both your CSS and markup to see why that is not happening.
    there you go also visit the preview:
    http://jdejong.org/craftedmovie/singlepage.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning jasperdj,
    .extend cannot extend as it is because it has a height of 100px. Remove that height and it will expand to contain what you put in it.

    Oops, check that.
    You're editing the online version now so that answer doesn't apply.

    --Any element that you want to be "infinite expandable" should not have a height set. You can put a min-height to stop it from getting too small though.
    Last edited by Excavator; 11-10-2011 at 04:18 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i know, thats now the problem. I just use the height for testing purposes.

    I want to add text/images within the content area.
    But when the content gets ' too big' the page should expand by increasing the height of .expand .
    The problem is, if i put the text inside .expand the text will be to low.

    Do you have a solution for that

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Code:
    #pagecontainer {
        margin: 0 auto;
        padding-top:0px;
    /*height: 100px;*/
        width:1250px;
    }
    #content-singlepage {
        background-image:url("images/Header-test.png");
        background-repeat:no-repeat;
    /*height:549px;*/
    }
    #page-content-container {
        max-width:850px;
        width:850px;
    /*height:300px;*/
        margin:0 auto;
        margin-top:240px;
        
    }
    I just commented out the heights that were stopping your text from expanding it's container and the ones it's nested in. Your background image does not lend itself well to expanding though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Code:
    #pagecontainer {
        margin: 0 auto;
        padding-top:0px;
    /*height: 100px;*/
        width:1250px;
    }
    #content-singlepage {
        background-image:url("images/Header-test.png");
        background-repeat:no-repeat;
    /*height:549px;*/
    }
    #page-content-container {
        max-width:850px;
        width:850px;
    /*height:300px;*/
        margin:0 auto;
        margin-top:240px;
        
    }
    I just commented out the heights that were stopping your text from expanding it's container and the ones it's nested in. Your background image does not lend itself well to expanding though.
    Yea that worked for expanding, but the text should be higher Please take a look at: http://jdejong.org/craftedmovie/singlepage.html

    Any ideas to make an offset for the text?


  •  

    Posting Permissions

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