467,910 Members | 1,682 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

while aligning text to bottom of page ,facing resize problem

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.

Apr 19 '07 #1
  • viewed: 5434
Share:
3 Replies
On 2007-04-19, kk*********@gmail.com <kk*********@gmail.comwrote:
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.
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.
Apr 19 '07 #2
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
May 24 '07 #3
kk*********@gmail.com wrote:
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>
<style type="text/css">
.Footer
{
position:absolute;
bottom:0;

}
.Footer1
{
position:absolute;
top:116;
}
You'll be needing some units. Try top:116px;
>
</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()
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.
}
}
</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>
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.

--
John
May 24 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Larry Viezel | last post: by
reply views Thread by Paul E Collins | last post: by
6 posts views Thread by tomasio | last post: by
4 posts views Thread by Corey Walker | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.