Bottom Footer/100% Content

Russinating · 24 Mar 2010 at 13:31

Firstly, can I just say: aaaaarrgggghhhhhhhhh.

The site in question: www.idoweddingfilms.co.uk/new

I'm trying to get it so that:

The footer is always at the bottom of the page
The background content image (the translucent background) always goes down and meets the footer

I'm at my wits end. I've tried everything that a "css bottom footer" Google search can throw at me to no avail.

Anyone?

Dj_Jestar · 24 Mar 2010 at 13:37

Sorry if teaching to suck eggs.. but have you set the footer to something like:

Code:

#footer {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 100%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
}

?

Russinating · 24 Mar 2010 at 13:49

That doesn't work, but judging by the absolute positioning maybe I didn't explain myself clearly enough.

I don't mean that the footer needs to be always at the bottom of the window (ie fixed/absolute), but always just below the content, or if the content is short, then at the bottom of the browser window.

Like this: http://www.cssstickyfooter.com/

simisker · 24 Mar 2010 at 18:46

While I'm trying to grasp the footer problem, I ought to point out a non-technical issue with that site; something which you may have overlooked, Russ.

When that page loads - especially on a big widescreen monitor - there's a heck of a lot of flesh and hair and flesh-coloured stuff on display.

Obviously it's not NSFW, but it could definitely appear as such when glimpsed out of the corner of the eye by your co-worker sitting next to you, or a boss on reconnaissance.

I checked the site out during my lunchbreak - I'm doing some in-studio freelance design at the moment, so I'm in an office with lots of near-strangers, working on a huge screen - and I had a panicky moment when the image appeared. :eek:

Just something you may not be aware of, given how closely you're working with the image.

suarve · 24 Mar 2010 at 19:50

simisker said:
While I'm trying to grasp the footer problem, I ought to point out a non-technical issue with that site; something which you may have overlooked, Russ.

When that page loads - especially on a big widescreen monitor - there's a heck of a lot of flesh and hair and flesh-coloured stuff on display.

Obviously it's not NSFW, but it could definitely appear as such when glimpsed out of the corner of the eye by your co-worker sitting next to you, or a boss on reconnaissance.

I checked the site out during my lunchbreak - I'm doing some in-studio freelance design at the moment, so I'm in an office with lots of near-strangers, working on a huge screen - and I had a panicky moment when the image appeared.

Just something you may not be aware of, given how closely you're working with the image.

I'm sure of the word to describe that reply

Russinating said:

That doesn't work, but judging by the absolute positioning maybe I didn't explain myself clearly enough.

I don't mean that the footer needs to be always at the bottom of the window (ie fixed/absolute), but always just below the content, or if the content is short, then at the bottom of the browser window.

Like this: http://www.cssstickyfooter.com/

Click to expand...

What's wrong with using the code they provide there? I tried in tons of browsers and it worked perfectly in all of them.

simisker · 24 Mar 2010 at 20:41

suarve said:
I'm sure of the word to describe that reply

"Oversensitive"? "Needless"? "Procrastinating"? "Enfleshening"? The smiley confuses me, dagnabbit!

suarve said:
What's wrong with using the code they provide there? I tried in tons of browsers and it worked perfectly in all of them.

I think the big problem with Russ' layout is that the footer isn't the last div in the markup, unlike the StickyFooter. As you can see, it's contained within wrappers and, erm, containers.

I'm not sure whether this is possible without some sort of javascript monkeying, as it seems a bit too conditional.

EDIT: Although after a little more thought, I don't see why that structure couldn't be adapted to have a separate, ultimate footer div...

Russinating · 24 Mar 2010 at 20:52

simisker said:
While I'm trying to grasp the footer problem, I ought to point out a non-technical issue with that site; something which you may have overlooked, Russ.

*snip*

Haha, duly noted. Thankfully the background image will be relatively blocked once all the content's in place and the boxes are much bigger and filled. The background image will likely rotate as well, so you won't *always* get a woman in a very low wedding dress

.

FYI This is the "final-ish" design: www.idoweddingfilms.co.uk/newsite

suarve said:
What's wrong with using the code they provide there? I tried in tons of browsers and it worked perfectly in all of them.

It works with regards to the footer, but it doesn't stretch the translucent content background to meet with it.

Russinating · 24 Mar 2010 at 22:12

simisker said:
EDIT: Although after a little more thought, I don't see why that structure couldn't be adapted to have a separate, ultimate footer div...

Indeed it can - but then the translucent background (which is attached to #container) doesn't stretch down and meet the footer's top.

Dj_Jestar · 25 Mar 2010 at 10:35

place the footer inside the content div, then margin it "out" of the bottom?

gord · 25 Mar 2010 at 10:45

Dj_Jestar said:
place the footer inside the content div, then margin it "out" of the bottom?

But then if the content was short it wouldnt be at the bottom of the viewport?

Can you apply a percentage height to the content to keep that so it stretches to the bottom and then do as Jestar suggested?

You'd probably have to be using 100% height on the html/body so that it works.

Russinating · 25 Mar 2010 at 17:39

Update: I gave up

.

Couldn't find anything that worked and I figured the majority (if not all) the pages would have enough content to stretch to the bottom of the view anyway. Amended the design slightly (inverted the background drop shadow) so that when the footer does fall short it still looks fine.

For those who are interested the site's now "built" but still under construction at http://v2.idoweddingfilms.co.uk

If anyone spots something that's amiss now would be a good time to shout

.

JamesU2005 · 25 Mar 2010 at 20:23

Looks great.

Not sure if it's meant but on the Logo, Social Network Buttons and Request DVD Sample all have blue borders around in Firefox 3.6 Mac.

Randomface74 · 25 Mar 2010 at 20:29

you need to turn off the border on images that are links.

a img { border:none; }

Russinating · 25 Mar 2010 at 20:38

Yeah, forgot that - I use Chrome and haven't cross-browser checked yet so didn't realise

.

gord · 25 Mar 2010 at 22:18

Websites that have photo's as backgrounds still strike me as ridiculously busy. I have trouble focusing on what needs my attention.

You could try making them slightly transparent so they don't hit me in the face quite as much?