Beginner CSS website

[Nyk]

I'm hoping that someone might be able to point me in the right direction regarding my test website.
www.tankshock.com/nyk/

I am trying to get the black footer at the bottom to always stay at the bottom of the page when resizing the browser window, unless you resize it to a smaller size than the content, where the footer will stay at the bottom of the content. (I don't know if I explained that clearly).

I got it to work, kind of, by putting all the content in a wrapper with a spacer and footer div above it set at 95% height for the spacer and 5% for the footer, but it caused the 2 border edges to disappear.

Which brings up another point; is there a better way to make a repeating border down the edges of the main content than how I did it?

I appreciate any advice, because I'm a complete CSS newb!

[ukgeoff]

For your borders, try using a single image as the background image for the container div and setting the repeat attributes.

Move your header and footer divs to be above and below the middle div respectively.

[oya]

<div style="position: absolute; bottom: 0px;">

Or something like this, I think....

[minute44]

Originally Posted by oya

<div style="position: absolute; bottom: 0px;">

Or something like this, I think....

That doesn't work... I tried it when I was first starting out and to my dismay it failed miserably.

I emailed a friend of mine who runs www.makehay.co.uk and asked him if it was possible to do this.

here was his reply:

It isn't you, it isn't stupid. Annoyingly it's almost impossible....

The almost bit is because you can do this BUT you need to involve Javascript
to get the layer to expand.

Check this page of mine:

http://www.makehay.co.uk/webs/sesc/

You should see the effect there, this is a tricky combo of Javascript and
CSS. What you are trying to do is almost (as far as I know) impossible to
achieve using CSS alone.

This is most likely why your posts have gone unanswered.

Have you tried:

www.sitepoint.com
www.communitymx.com

might be worth a shot

[Nyk]

Originally Posted by ukgeoff

For your borders, try using a single image as the background image for the container div and setting the repeat attributes.

Alright, good. I think what's what I did and, and set the vertical height of the divs to 100%. It seems to work pretty well. Except (in Firefox at least) there seems to be a glitch where when I manually resize the window smaller and then scrolldown, the borders disappear towards the bottom.

Originally Posted by minute44

That doesn't work... I tried it when I was first starting out and to my dismay it failed miserably.

I emailed a friend of mine who runs www.makehay.co.uk and asked him if it was possible to do this.

I tried that as well and it didn't seem to work. I think you're right, minute, it seems extremely difficult to pull off with pure CSS. I looked all over the place and couldn't find a way. The only way seems to be if the conent and consequently footer are taller than the browser window, so that it stops when you scroll to the bottom. Predicting how the Divs will react to each other is baffling to me, I have to get used to that.

Thanks for the help, I'm sure I'll be back with plenty more questions.

By the way, I like the alternating signature quote, minute44.

[minute44]

Yeah man, you a NoFX fan?

[Nyk]

Originally Posted by minute44

Yeah man, you a NoFX fan?

Sure am! I think we talked about it briefly weeks ago? I've only posted on these forums once before, so I'm not even sure. Anyway, always good to see a fellow fan.

[minute44]

Oh yeah, I remember you now.

cool

[Ryan Fait]

It's possible in browsers that support the min-height class, but as IE doesn't, it's kind of pointless.

[Ryan Fait]

I had a faint flicker of hope when this idea flashed into my head, but sadly, it didn't work without the min-height class. Anyone want to help me take this further? We could be on to a major CSS discovery!

Code: Select all

<style type="text/css">
    html, body {
        min-height: 100%;
    }
    body {
        position: absolute;
        margin: 0;
    }
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        background-color: #000;
    }
</style>

The above should work in all modern browsers. It handles as intended in Safari and Firefox for sure.

[moojoo]

Sticking a footer at the bottom is tricky at best. Read this for some techniques.

[Ryan Fait]

Nice example! I had no idea that was even possible. That one's now in my bookmarks.