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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    123
    Thanks
    20
    Thanked 1 Time in 1 Post

    Background stretch

    I am trying to make it so that the div#container automatically stretches, and thus so does the background. How can I do this?
    (http://nicks-world.co.uk/qw/redesign/)
    Literally I want the footer to have more spacing from it.

  • #2
    Regular Coder
    Join Date
    Jan 2007
    Posts
    123
    Thanks
    20
    Thanked 1 Time in 1 Post
    Cacnel that.. It is because of the AJAX.

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by cheechm View Post
    Cacnel that.. It is because of the AJAX.
    ajax have nothing to do with that. Your footer must have 3 parts, left round corner, middle and right round corner, then the middle part can have any width you want.

    regards

  • #4
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Ok, for starters, let's have a look at your #container CSS.

    Code:
    #container
    {
    	background-image:url(images/bground.png);
    	background-repeat:repeat-y;
    	clear: both; 
    	margin:0 auto;
    	display:block;
    	width:800px;
    	padding-bottom: 30px;
    }
    Since the background image you're using is just a grey box with solid grey borders, we can replace this with CSS.
    Remove:
    Code:
    	background-image:url(images/bground.png);
    	background-repeat:repeat-y;
    and replace with:
    Code:
    	border-right:solid 4px #DFDFDF;
    	border-left:solid 4px #DFDFDF;
    	background-color:#FFF;
    Much better, the browser won't have to load the useless background image anymore and the container will expand with the width.

    Also remove:
    Code:
    	clear: both; 
    	display:block;
    Not sure why clear is here... what's it clearing? Also a div already displays as a block element by default, so scrap that.

    Your CSS should now look like the following:
    Code:
    #container {
    	margin:0 auto;
    	padding-bottom:30px;
    	width:800px;
    	border-right:solid 4px #DFDFDF;
    	border-left:solid 4px #DFDFDF;
    	background-color:#F5F5F5;
    }

    Ok, then to do the footer. What I've done is replace your div#footer with the following:

    Code:
    <div id="footer">
    	<div id="left">&nbsp;</div>
    	<div id="middle">
    		<ul class="testbar">
    			<li><a class='altCss' href='index.php?css=Bog_Standard'>Bog Standard</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    		</ul>
    	</div>
    <div id="right">&nbsp;</div>
    </div>
    The CSS is as follows:
    Code:
    #footer {
    	margin:0pt auto;
    	width:816px;
    }
    #footer #left {
    background:url(images/footer_left.png) no-repeat left 0;
    height:50px;
    width:20px;
    float:left;
    }
    #footer #middle {
    	height:46px;
    	width:776px;
    	border-bottom:solid 4px #DFDFDF;
    	background-color:#F5F5F5;
    	float:left;
    }
    #footer #right {
    background:url(images/footer_right.png) no-repeat right 0;
    height:50px;
    width:20px;
    float:left;
    }
    Also, add:
    Code:
    <div style="clear:both;"></div>
    After div#pcontent to clear the floats from the heading classes.

    Images I used are located here: http://www.clochlum.com/redesign/
    Last edited by Lochlan; 05-08-2008 at 04:45 AM.

  • #5
    Regular Coder
    Join Date
    Jan 2007
    Posts
    123
    Thanks
    20
    Thanked 1 Time in 1 Post
    Quote Originally Posted by oesxyl View Post
    ajax have nothing to do with that. Your footer must have 3 parts, left round corner, middle and right round corner, then the middle part can have any width you want.

    regards
    It was Ajax includes, so when I looked in the Source, the page content wasn't in the div.

    Thanks lochlan, although it is a gentle gradient (which I will make 1 pixel tall).


  •  

    Posting Permissions

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