keep a footer at base of window

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

keep a footer at base of window

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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?
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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>
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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???
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

forget to use "class"?
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

nope
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post by zenabi »

Just to clarify, why are you trying to use div.footer?
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post 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).
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
Post Reply