Page 1 of 1

keep a footer at base of window

Posted: Tue Jan 18, 2005 10:50 am
by malcolmboston
i dont normally ask for code but im kinda stuck here......

basically im looking for a piece of code that will make a footer at the bottom of the page rehardless of whether the rest of the content actually goes upto that point and if it does, just put the footer after all the content?

hope someone understands what im saying.

any help would be fantastic.

Posted: Tue Jan 18, 2005 11:35 am
by feyd
so basically, you want to have the footer at the bottom of the screen if the content doesn't reach that far. And immediately below the content if it does go beyond the screen size?

Posted: Tue Jan 18, 2005 2:46 pm
by patrikG
Make a div and use the following formatting

Code: Select all

#corner_bottom_right{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 4;
	visibility: visible;
}
So the HTML would look like this

Code: Select all

<div id="corner_bottom_right">This is in the bottom right corner</div>

Posted: Wed Jan 19, 2005 2:17 am
by malcolmboston
ok i got it working but i have a question

i tried the following definitions in CSS

div.footer + #footer

#footer worked but the other didnt
why???

Posted: Wed Jan 19, 2005 2:21 am
by feyd
forget to use "class"?

Posted: Wed Jan 19, 2005 2:35 am
by malcolmboston
nope

Posted: Wed Jan 19, 2005 5:03 am
by zenabi
Just to clarify, why are you trying to use div.footer?

Posted: Wed Jan 19, 2005 5:12 am
by malcolmboston
its a reference for eg

you have this tag in your HTML

Code: Select all

<div class="this-class">something</div>
now if you want to stylise that in CSS one of the ways of referencing to it is

Code: Select all

div.this-class &#123;

&#125;
i personally prefer this method as i find it easier to read the CSS sheet and see exactly what its stylizing, because my style sheets often run into 1000+ lines

on a side note, i have discussed this with feyd through MSN and shown him what happens on the site and hes as baffled as i am

Posted: Wed Jan 19, 2005 5:14 am
by malcolmboston
btw, from what i understand referencing a style through div.footer is the accepted method

also dont mean to be picky but thought i should point out to help novice users
patrikG wrote:

Code: Select all

#corner_bottom_right&#123; 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   z-index: 4; 
   visibility: visible; 
&#125;
i remember that you are not supposed to have _ in CSS class names as it can cause problems

Posted: Fri Jan 21, 2005 7:11 am
by patrikG
# indicates CSS positioning of a DIV-element - I couldn't find a technical explanation, though. I would think that you need to use <div id=''> rather than <div class=''> because it accesses a different part of the DOM - that's just my hypothesis, though.

just a hint in case the HTML document is smaller than a screen: add

Code: Select all

body&#123;
    height: 100%;
&#125;
and the footer will always be at the bottom of the screen.

Posted: Fri Jan 21, 2005 8:05 am
by zenabi
Strange, div.footer works for me with:

Code: Select all

div.footer &#123;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 4;
	visibility: visible; 
&#125;
and

Code: Select all

<div class="footer">Something</div>
Is the page you are having trouble with online? If so, would you mind posting the URL (you can send me a PM if you prefer).

Posted: Fri Jan 21, 2005 8:16 am
by Weirdan
patrikG wrote: # indicates CSS positioning of a DIV-element - I couldn't find a technical explanation, though.
# indicate CSS positioning of any element with id attribute set to certain value.
I would think that you need to use <div id=''> rather than <div class=''> because it accesses a different part of the DOM - that's just my hypothesis, though.
exactly.

PS: there was an article at the alistapart.com about footers, IIRC.