Page 1 of 2
Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 1:28 am
by Montycarlo
How can I position a table to the bottom of the page?
Using the following class:
Code: Select all
.footing {
Position:absolute;
top:100%;
}
Will position it at the bottom, but it will only position it at the bottom
without scrolling, so if I have a webpage that is about two pages long (One page fits the screen) then it will position it at the start of page 2 and will overlap anything previously there. How can I use the relative property to achieve the same result?
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 1:49 am
by Gillian
Where exactly in the source do you have the footer? If it helps, here's this site's footer.
Code: Select all
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #EFF3F6 url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
It is right above the </body> tag
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 2:01 am
by Montycarlo
I find it ironic that your footer is defined before anything else.
Code: Select all
.footing {
Position:absolute;
bottom:0px;
}
Works exactly how I'd like it to apart from one downfall; it acts like there is no scrollbar.
I'd like it so the footer is placed on the bottom of the page exactly like if some text was in a table with the table's y positioning value set to "baseline".
Do you know any way of achieving this?
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 2:13 am
by Gillian
Err I suck at CSS but try to use a DIV instead of a class and also don't use Position:absolute; but try relative.
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 2:18 am
by Montycarlo
I didn't know there was a different between using the div tag and the class, merely that one was for grouping and the other for a singular object.
What is the difference?
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 2:23 am
by Gillian
Divs are for areas around a site and classes are more for styles like font, color, etc...
Example, the footer on the homepage is one div, inside that is 2 classes, one for the left text and one for the right (contact link).
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 2:41 am
by Montycarlo
According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”
Going by that and your own explanation, the DIV tag is used as a generic label, while more specific labels may be inside the DIV tags, so using either would achieve exactly the same thing.
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 10:00 am
by Gillian
Montycarlo wrote:According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”
Going by that and your own explanation, the DIV tag is used as a generic label, while more specific labels may be inside the DIV tags, so using either would achieve exactly the same thing.
DIVS are used for main blocks on a page like the header, main content body, side panel, footer etc... They are containers that you only place once to make up the template. Classes are used for things that can be placed multiple times on the site such as <p>, <a> <img> etc.. Sure you can do the same with classes and leave divs out completely, but DIVS are made for a reason.
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 10:23 am
by Montycarlo
Ah I see.
Some googling found a solution, I needed to use
which works perfectly.
Thankyou so much for your help :]
Anything I can do in return?
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 11:03 am
by Gillian
Good to see it working, Sorry I wasn't much help
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 11:26 am
by Montycarlo
Haha no worries, at least I learned something from you.
Re: Positioning to bottom in CSS?
Posted: Mon Jan 12, 2009 11:30 am
by Pepsi
I always learn from Gilly xP
Re: Positioning to bottom in CSS?
Posted: Tue Jan 13, 2009 1:46 am
by jonlin
lol i wish i understood any of that >.<
Re: Positioning to bottom in CSS?
Posted: Tue Jan 13, 2009 10:27 am
by Pepsi
The CSS part or the learning part?
Re: Positioning to bottom in CSS?
Posted: Tue Jan 13, 2009 8:56 pm
by jonlin
the random programming language part idk
Btw could someone help me learn html?
Re: Positioning to bottom in CSS?
Posted: Wed Jan 14, 2009 6:25 am
by Montycarlo
jonlin wrote:the random programming language part idk
Btw could someone help me learn html?
Adobe Dreamweaver is all you will need.
Re: Positioning to bottom in CSS?
Posted: Wed Jan 14, 2009 6:36 am
by Gillian
Dreaweaver is a WYSIWYG editor, it wont 'teach' you html because you can just draw a line and spawn a table.. What you really need is
Notepad ++. (I use it to build this site).
Re: Positioning to bottom in CSS?
Posted: Wed Jan 14, 2009 6:48 am
by Montycarlo
I agree with your point that it won't teach him html, but I'm not sure if he actually wants to learn it or use it to create a quick site.
Also, there is the 'Code only' button which will view only the code, which you can freely edit.
Re: Positioning to bottom in CSS?
Posted: Wed Jan 14, 2009 11:26 am
by Pepsi
Its better to create your own using NotePad++
Re: Positioning to bottom in CSS?
Posted: Thu Jan 15, 2009 2:23 am
by jonlin
a) is just notepad ok?
b) i actually am doin this site to learn html...