|
Author
|
Message
|
|
Krischan Hauschkez
|
Tuesday 10 October 2006 12:52:47 pm
Hi all! I have a question regarding the position of the footer. I'm using t8 and I want to make the footer being on bottom of the screen, even when div#allcontent is empty. Do you have a hint for me? Or the fitting chapter of the documentation?
Thanks,
Krischan
|
|
Claudia Kosny
|
Thursday 12 October 2006 5:50:40 am
Hi Krischan I don't know about the t8 design but generally you just need something like this
#footer
{
position:absolute;
bottom:0px;
}
to place a div with the id footer on the bottom of the surrounding element which should be the body tag in this case. Greetings from Luxembourg Claudia
|
|
André R.
|
Thursday 12 October 2006 7:06:19 am
There is a difference between bottom of the viewport (screen), and the bottom of the document. To be sure that it is placed on the bottom of the screen in all browsers, you should also specify a bit more:
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
div#footer
{
margin: 0;
padding: 0;
position:absolute;
bottom:4px;
right: 4px;
z-index: 99;
}
4px is what I noramlly set to avoide that the footer makes the scrollbar apear.
eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom
|
|
Claudia Kosny
|
Thursday 12 October 2006 8:01:41 am
Hello André
Yes you are right. I work to seldom with CSS to be any good at it.
Once you are at it: Is there a way to have the footer at the bottom of the viewport if there is no or not much content but have it on the bottom of the document if I need to scroll? Greetings from Luxembourg Claudia
|
|
André R.
|
Thursday 12 October 2006 11:18:13 am
Yes, there a multiple ways.
The best way is to use position: fixed, but it is not supported in IE lower then version 7.
So if you want it to work on <irony>very nice browsers as ie 6</irony>, you'll have to use javascript to call a reposition function on scroll event. If you search for 'position fixed for internet explorer 6', you'll probably get some nice examples. Edit:While reading your question one more time, i realised that you'll need a javascript function that checks the document height against the document scroll height and then reposition the footer based on what you'll find. Also remember to reposition it again if the user resizes the window.
eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom
|
|
Claudia Kosny
|
Thursday 12 October 2006 2:07:05 pm
Hi Andre Ah, good to know. Thanks for the answer. Greetings from Luxembourg Claudia
|
|
Krischan Hauschkez
|
Friday 20 October 2006 11:10:28 am
Thanks for your help! But it doesn't really do, what I expected. When you take a look at http://janun.ecobytes.net/ you will see, what I mean. I want to enlarge the content area. And that isn't done with positioning the footer in the bottom of the page, or is it?
|
|
Mark Marsiglio
|
Friday 20 October 2006 11:48:12 am
Sounds like you want the content area to never be smaller than the screen size. So the footer would either be at the bottom of the screen, or below (if there was lots of content). This sounds like it would be very tricky to do reliably. Here is a recent article with lots of suggestions and examples for different footer layouts that might be of help... http://www.alistapart.com/articles/footers/
http://www.thinkcreative.com
Turning Ideas Into Strategic Solutions
|
|
Claudia Kosny
|
Friday 20 October 2006 2:57:59 pm
Hi Krischan Seeing that you are German (or understand at least a bit) I would also check the one and only http://de.selfhtml.org/ and, if necessary, ask in the forum there http://forum.de.selfhtml.org/ Although the main posters there can be sometimes a bit standoffish they usually know their stuff. Claudia
|