PDA

View Full Version : Auto Resize Background Image within a template


cmartin5970
01-08-2011, 03:58 AM
I am somewhat new to dreamweaver and css and all of that. I am using Dreamweaver CS3 just to avoid any confusion. I have created a website using a template and a CSS stylesheet. I have a solid grey background and then the text and footer and all of that is within a white box in the center of the page. For some reason if i have a large body portion of my webpage, then my white background does not expand like it should and my footer is pushed outside of my background. I know this is kind of confusing but i am not sure how else to explain it. the size of the white background box has been established within the css stylesheet and i have a feeling i am having this problem because i am using a template and a stylesheet.

Here is a link to what the site is supposed to look like and what it looks like as long as there are no long paragraphs
http://www.unc.edu/~craigma/

And here is what it looks like when there is a large body area, notice the footer on the bottom.
http://www.unc.edu/~craigma/events.html

Is there anyway to make it so that the height of the body, which within the stylesheet is called div id container, to auto-adjust to the size of the paragraph. I have tried adjusting the height to auto and even added a min-height but that does not seem to fix the problem. Any sort of feedback you can give me would be great! let me know if this problem needs any sort of clarification.

cmartin5970
01-08-2011, 04:24 AM
let me know if you need me to include any exact code, you should be able to view most of the code from the URL's which i posted

edbr
01-08-2011, 05:04 AM
i looked v quickly but on the second example the fooret is outside the container div and the second not so it appears differently

gentleone
01-08-2011, 11:51 AM
It's because you set a fixed height on the container div. If the content in the content div get's longer then that height it will push the footer div outside the container because the footer is a floated div.

If you delete the height of the container div, you lose your white background... which is logical. If you set seperate white background colors to your left div, content div and right div you will get unequal height white columns, but you can solve this with CSS faux columns. The white backgrounds will then stretch along with the longest column.

http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

FethrdWlf
01-09-2011, 02:27 AM
All you have to do is not put any height at all for your div id container. Then it will automatically adjust. Don't even put in auto. I think this is what you mean....

cmartin5970
01-13-2011, 04:52 AM
i have tried removing the height and setting it to auto and that still does not seem to fix the problem, anymore suggestions?

edbr
01-14-2011, 03:28 AM
whick i\link shows your problem and ill have another(proper) look

cmartin5970
01-19-2011, 06:16 AM
look at the location of the footer on this page,

http://www.unc.edu/~craigma/index.html

compared to this page,

http://www.unc.edu/~craigma/events.html

i am trying to make it so that the white background will automatically expand with longer pages, some pages are going to have a lot of text...thanks again

edbr
01-19-2011, 06:48 AM
the footers are wrong because in one with the calendar you have it outside of the 'wrapping div. go through and check for un closed divs to make sute it is within that wrapper or content div, if that div had no height attribute then it will expand

gentleone
01-19-2011, 07:18 AM
Okay... I've figured it out for you. You have to change a couple of things in your CSS.

In the css rules from container div you change height to max-height with a value of 2000em and add also overflow: hidden; to it.
Like so:

#container {
margin: 20px auto;
width: 900px;
max-height: 2000em;
padding: 10px;
background-color: #fff;
overflow: hidden;
}
And delete in the CSS rule from your footer div float: left and add clear: both; to it.

#footer {
border-top: solid #fff 1px;
width: 900px;
height: 60px;
background-color: #455A79;
clear: both;
}
This solves your problem accept for IE6 (max-height doesn't work in IE6 and below), but if you want to support IE6 too then I can give you a CSS hack for it.

cmartin5970
01-19-2011, 02:06 PM
thank you so much for figuring that out for me, and if that CSS hack isnt too hard then that would be amazing too...thanks again

gentleone
01-19-2011, 02:44 PM
Here you go:

* html #container {
height: expression( this.scrollHeight > 9998 ? "9999px" : "hidden" ); /* IE6 hack */
}

#container {
margin: 20px auto;
width: 900px;
max-height: 2000em;
padding: 10px;
background-color: #fff;
overflow: hidden;
}