Footer Problem - Irresistable Theme WooThemes

CMS & WordPress
1

The site Im working on: http://thetaxreturnsite.co.uk/ and http://thetaxreturnsite.co.uk/?page_id=28

I would like the footer (large pink pencil background) to work like this: http://demo2.woothemes.com/wootique/ except without the blue gap between footer and bottom of the page.

Thanks

2

what do you mean? Move the pencil over so it sites under the other contents?

3

Hi Chewmagroo. Welcome to the forums. :slight_smile:

It’s not really clear what you are asking. What I see in my browser at the moment seems to be what you are asking for. The pencil is at the bottom of the page with no gap.

4

Yes I managed to get the footer to sit at the bottom.

The main issue is if you re-size the browser window the footer is not fixed to the white background.

Open this page and check out the footer.
http://thetaxreturnsite.co.uk/?page_id=28

I want it to function like this page:
http://demo2.woothemes.com/wootique/

Hope this is clearer.

5

Ah, I see. I think the first thing you are looking for is a page that is always at least as tall as the browser window … but that if the page is taller than the browser window, the pencil will be hidden until the user scrolls down to the bottom. If that’s the case, check out this link for setting the page height to 100%:

6

Thanks ralph.m, I read that page and tried what it said but couldn’t get any of it to work. I am a novice web designer so maybe this is beyond my capabilities.

Thanks anyway.

7

Actually, looking again at the wootique site, you can do something much simpler. In your CSS file, add in the blue styles and remove the red ones:


#footer {
  [COLOR="#0000CD"]margin: 0 auto;[/COLOR]
  [COLOR="#FF0000"]position: absolute;
  bottom: 0px;
  left: 96px;[/COLOR]
  [COLOR="#FF0000"]width: 879px;[/COLOR]
  [COLOR="#0000CD"]width: 924px;[/COLOR]
  [COLOR="#0000CD"]margin: 0 auto;
  background: url(http://thetaxreturnsite.co.uk/wp-content/themes/irresistible/images/footer_pencil.png) no-repeat 0 0;[/COLOR]
}

[COLOR="#FF0000"]#header, #content, #footer {
  min-width: 960px;
  float: left;
  display: inline;
  clear: both;
  position: relative;
}[/COLOR]

[COLOR="#0000CD"]#wrap {
  overflow: hidden;
}[/COLOR]
8

This worked.

I had to change the footer pencil image so that it had its own white background.

Thanks ralph.m

9

Ah, I see what you wanted now. I’m glad you got what you wanted. :slight_smile: