CSS Footers... They're killing me!
Hey guys...
I'm really stuck with this.
In an effort to transform to more accessable design methods I'm in the process of learning how to do css layouts properly and for my first project I'm converting my homepage greendezire.com to a CSS and layers based layout. (also so I can do funky dynamic skinning and stuff!).
Anyways... I've been trying to work out how the layout will work and I've got as far as putting a test page together. I've got the 3 colum layout perfected and the header is working fine, but I cannot for the LIFE of me get the footer to sit underneath the main content.
I've been fiddling with this for 3 hours now, reading tutorials and I've even ordered a book from sitepoint on css but I can't wait 7 for the book to be delivered so I can get it working.
The page is at http://www.greendezire.com/test.html
All the CSS is embeded in the page, so you can see whats going on.
Is their anyone out there who can tell me where I'm going wrong? I've got to the end of my teather with this...
I have to say, when doing a simple footer is this difficult I can see why some people shy away from switching to CSS. But I'm determined to make myself a better web designer and I'm gonna push on and suss this out.
Anyone?
Thanks!
Andy
Suzanne posted this at 17:49 — 11th July 2003.
She has: 5,507 posts
Joined: Feb 2000
Basically, don't use absolute positioning, try using floats and relative positioning instead. Though you can use both in the same stylesheet.
The CSS you have says do what it's doing, put the footer in position outside the flow.
If you want it under the rest of the page, it HAS to be positioned relatively.
andy206uk posted this at 18:36 — 11th July 2003.
He has: 1,758 posts
Joined: Jul 2002
errm... I'm not that up on CSS... you've lost me.
If I set the style for the footer to relative, then put the div under the 3 columns in my html it will appear at the bottom of the page?
Andy
Suzanne posted this at 23:50 — 11th July 2003.
She has: 5,507 posts
Joined: Feb 2000
Theoretically -- there are hundreds of templates out there that do this already, why not search for them?
Renegade posted this at 10:37 — 12th July 2003.
He has: 3,022 posts
Joined: Oct 2002
There should be about two or three things that should relativly positioned, i.e. position:relative; they should be the header DIV, the content DIV and if you have one the footer DIV. This is so that the browsers "knows" that they are there. If you put them absolutely positioned it will be at that position at all times and therefore anything can go underneath it.
If you still don't understand, just ask.
spor posted this at 16:57 — 12th July 2003.
He has: 207 posts
Joined: Apr 2003
So this would work for cells also? ive been having problems trying to position a cell in my guestbook, so that it allways is positioned at the bottom of the table, (like the profile, pm, www, ect is postioned at the top here.)its the same type of thing, people fill out their e-mail and or www page and they get put in the bottom part of the entry, but depending on how many are filled out, ive been having problems with the position, so ill try this.
Cymru am byth
spor posted this at 17:02 — 12th July 2003.
He has: 207 posts
Joined: Apr 2003
for an example of what i mean, if you look at the "report this post" link in these threads,Suzannes 2nd post it has moved up a bit, thats whats been happening.
Cymru am byth
Renegade posted this at 23:43 — 12th July 2003.
He has: 3,022 posts
Joined: Oct 2002
Not too sure about that problem, I think it's because theres more content in the left column than there is in the right and since the vertical align is set to top then the text has moved to he top.
Suzanne posted this at 04:07 — 13th July 2003.
She has: 5,507 posts
Joined: Feb 2000
Tables are much different and would only be positioned themselves absolutely or relatively. Their cells are always relative to each other, the row, et cetera. You can't make a table any other way.
Check the vertical alignment if things are moving around. In these forums, each post is a unique table so that if someone posts a huge scrolling post, that is the only post affected, and we can still read the rest of the posts without scrolling back and forth.
KeithMcL posted this at 21:49 — 14th July 2003.
He has: 176 posts
Joined: Oct 1999
Read this article on AListApart. Also read the comments on the article. It's a very good read.
andy206uk posted this at 11:30 — 22nd July 2003.
He has: 1,758 posts
Joined: Jul 2002
Hey guys...
Thanks for the previous help, after a bit of work I got the whole footer thingy working perfectly. And I've got the layout nearly complete, the only problem is with my right column (or it could be the center colum... I'm not sure). It looks absolutly perfect In IE on the PC, but for somebizzare reason the center column seems to overlap the right menu in Mozilla / Netscape and IE for the mac.
I've played around for a couple hours but don't seem to be getting anywhere. Any suggestions?
You can see the layout at http://www.greendezire.com/css
Thanks!
Andy
andy206uk posted this at 11:43 — 22nd July 2003.
He has: 1,758 posts
Joined: Jul 2002
never mind! I had a flash of inspiration and sorted it! YAY!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.