...

View Full Version : Background stretch



cheechm
05-07-2008, 11:33 PM
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.

cheechm
05-07-2008, 11:39 PM
Cacnel that.. It is because of the AJAX.

oesxyl
05-08-2008, 01:56 AM
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

Lochlan
05-08-2008, 03:25 AM
Ok, for starters, let's have a look at your #container CSS.



#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:


background-image:url(images/bground.png);
background-repeat:repeat-y;

and replace with:


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:


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:


#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:



<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:


#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:


<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/

cheechm
05-08-2008, 07:40 AM
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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum