Various HTML/CSS issues [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I'm working on a site, and it's pretty much done.

I'm trying to have the hills at the bottom of the page, which is currently working. I'm trying to get the footer at the bottom of the hills, but it goes at the bottom of the viewport. I'm using the usual position: absolute; bottom: 0;.

Theses are the main issues. I'd also like for the text to not go over the hills, since it makes it hard to read. The only way I can do this is making the foot开发者_开发知识库er bigger, or a filler between the footer and the main test area.

I can get all these working, but only on their own, not all together.

I wont post any specific code, since there's a lot of it, so if you can help visit www.helpusplan.co.uk.

Thanks for any help

---

I'm fairly certain your problem is that you have your hills image attached to the body of your document. Attach it instead to the footer (I mean, come on, you already named the image footer.png) and place all your footer text in a child div that is positioned relative with respect to the top of the footer div. The height of the footer div should be no smaller than the height of the background image.

Something like:

<div id="footer">
  <!-- hills bg image is attached here by CSS -->
  <div id="footer_content">
     blah blah blah
  </div>
</div>

and

#footer {
  min-height:387px; 
  background: url(image_URL) no-repeat;
}

div#footer_content {
  position:relative;
  top: 100px;
}

Oh, and for heaven's sake. Do not position: absolute your footer. That's just nuts.

---

body{
    position: relative;
    min-height: 700px;
    height: 100%;
}

works.