while aligning text to bottom of page ,facing resize problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

kk.simhadri@gmail.com - 19 Apr 2007 18:02 GMT

Hi,

I want to align some text to the bottom of page.I am doing this by a
CSS class.It contains

position:absolute;
bottom:0;

this does the purpose. but when I resize my page to smaller size, the
text at the bottom overlaps my text written in the page above it.

I want to overcome this issue. The text at the bottom must not
override the text at top.

Is there anyway which makes my text to be aligned to bottom only till
it reaches a particular point from the top? after that it must not
move up along with the page end.

Any help would be appreciated.

Reply to this Message

Ben C - 19 Apr 2007 21:20 GMT

> Hi,
>
[quoted text clipped - 15 lines]
>
> Any help would be appreciated.

You can do something along these lines:

<style type="text/css">
html, body, #container { height: 100%; }
#container { min-height: 500px; position: relative; }
#footer { position: absolute; bottom: 0; }
</style>

...
<div id="container">
<div id="footer">footer</div>
</div>

I think min-height may not work in IE.

Reply to this Message

kk.simhadri@gmail.com - 24 May 2007 06:00 GMT

hi Ben C,

I dont think that there is some standard way to do this...anywayz I
have written customized code for this to work. Here is the code :
<html>
<head>
<style type="text/css">
.Footer
{
position:absolute;
bottom:0;

}
.Footer1
{
position:absolute;
top:116;
}

</style>
<script type="text/javascript">
function offsetHeight1()
{
var it=kk1.offsetTop + kk1.offsetHeight;
alert(it)
//alert(kk1.offsetHeight)
}
function clientHeight1()
{
//alert(document.body.clientHeight)
alert(document.body.clientHeight-kk1.offsetHeight);
}
function kk()
{
if(document.body.clientHeight-foodiv.offsetHeight <kk1.offsetTop +
kk1.offsetHeight)
{
document.all.foodiv.className="footer1";
}
else
{
document.all.foodiv.className="footer";
}
}
</script>

</head>
<body onresize ="kk()">

<form>
<div id="kk1">
<input type="button" onclick="offsetHeight1()" value="offsetHeight">
<input type="button" onclick="clientHeight1()" value="clientHeight">
<p>By pressing the button, a functions will be called. The function
will alert a message.<br>
ssfdsdfdfd<br>asdasf</p>
</div>
</form>

<div id="foodiv" class ="footer">this is the text at bottom1<br>this
is the text at bottom2<br>this is the text at bottom3<br>this is the
text at bottom4<br>this is the text at bottom5</div>

</body>
</html>

Anywayz thanks for the reply

Reply to this Message

John Hosking - 24 May 2007 15:33 GMT

> hi Ben C,
>
> I dont think that there is some standard way to do this

To do what? You've lost the context. You're replying to a post from five
weeks ago. Quoting some of the previous discussion would have been
thoughtful and potentially helpful.

> ...anywayz I
> have written customized code for this to work. Here is the code :

And you're saying this works for you? You're now satisfied?

> <html>
> <head>
[quoted text clipped - 10 lines]
> top:116;
> }

You'll be needing some units. Try top:116px;

> </style>
> <script type="text/javascript">
[quoted text clipped - 10 lines]
> }
> function kk()

kk? What an uninformative function name. What's it indicate?

> {
> if(document.body.clientHeight-foodiv.offsetHeight <kk1.offsetTop +
> kk1.offsetHeight)
> {
> document.all.foodiv.className="footer1";

I see "footer1" rather than "Footer1" as in your CSS.

> }
> else
> {
> document.all.foodiv.className="footer";

I see "footer" rather than "Footer" as in your CSS.

> }
> }
[quoted text clipped - 19 lines]
> </body>
> </html>

You have included more code than you needed to; a URL would have been
much better. Especially since I suspect the code you posted isn't really
the functioning code on your page.

Also, you've complicated things be including a JS form as part of the
content. It seems to me manual resizing would have been better.

I don't understand the logic of your supposed solution anyway. Where'd
you get the 116px? How does that relate to my font size or the width of
my browser?

Is this related to what Ben C suggested? It doesn't look like it.

Signature

John

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

while aligning text to bottom of page ,facing resize problem