CSS Position Layer relative to bottom of another layer (cont.)

[Dave Smithz]

Hi there,

A good while ago I posted a request about how I could get copy right message
always be a fixed distance from the bottom of another layer / table.
This meant I would be able to make the content of a particular page be as
long as necessary and then the copyright message always be a fixed distance
from the bottom of the text.

I read all your useful messages, but could just not get it to work for me. I
have decide to post the actual page and see if anyone can recommend how I
would achieve what I'm after.

Take a look at:

http://www.d-geo.com/about-test.htm

and see the copyright message at the bottom- this is a fixed position using
a class that has an absolute positioning, but bearing in mind the rest of
the page layout (as in the rest of the website is already rolled out in the
current style), how do I add the copyright information so that it is in a
fixed position below the text (without using Javascript).

Also in an ideal world, the position of the copyright text would also be at
a maximum vertical position on the page. Therefore if the text part is quite
small on the page, the copyright message would only come up to a maximum
point on the page (so it does not end up being too high on pages with a
little text). This part is not as important.

Hope this makes sense.

Kind regards

Dave

 

[wayne]

Hi there,

A good while ago I posted a request about how I could get copy right message
always be a fixed distance from the bottom of another layer / table.
This meant I would be able to make the content of a particular page be as
long as necessary and then the copyright message always be a fixed distance
from the bottom of the text.

I read all your useful messages, but could just not get it to work for me. I
have decide to post the actual page and see if anyone can recommend how I
would achieve what I'm after.

Take a look at:

http://www.d-geo.com/about-test.htm

and see the copyright message at the bottom- this is a fixed position using
a class that has an absolute positioning, but bearing in mind the rest of
the page layout (as in the rest of the website is already rolled out in the
current style), how do I add the copyright information so that it is in a
fixed position below the text (without using Javascript).

Also in an ideal world, the position of the copyright text would also be at
a maximum vertical position on the page. Therefore if the text part is quite
small on the page, the copyright message would only come up to a maximum
point on the page (so it does not end up being too high on pages with a
little text). This part is not as important.

Hope this makes sense.

Kind regards

Dave

Replace your css for .copyright entries for margin-top and margin-bottom
with

top : auto;
bottom : 1em;

Regards,

 

[Dave Smithz]

Replace your css for .copyright entries for margin-top and margin-bottom
with

top : auto;
bottom : 1em;

Thanks for that Wayne, I tried this (although I did not have a margin-top
and margin bottom entry in their originally) and while it sort of gave the
results I was after, it's not exact.

Can you explain a little how this should work. What does 1em mean?

Thanks again.

Dave

 

[google]

Hello Dave,

Am I right in thinking your goal is to have the copyright at the bottom
of the page no matter how short or long the page is? If so, I've only
found one way to get this to work. I tried a lot of things just using
CSS, but nothing was cross-browser compatable. So, unfortunately you
have to use a table.

Here's how it works:

1. Add the following styles (notice the height values and the negative
margin on the footer style):
html, body {
min-height:100%;
}
..body-table {
height:100%;
width:100%;
padding:0px;
}
..clear-footer {
height:135px;
}
..footer {
width:100%;
margin-top:-135px;
}

2. Use this as a basis for your page:
<table class="body-table" cellspacing="0">
<tr>
<td>
<div class="clear-footer"></div>
</td>
</tr>
</table>
<div class="footer"></div>
</table>

I tried a ton of different ideas, and this was the one that worked all
of the time, and had the least code. Hope it helps.

Chris S.
Implied By Design
http://www.impliedbydesign.com
Free Web Development Programs and Scripts
http://www.impliedbydesign.com/free-software-scripts.html