473,327 Members | 1,896 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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
3 5607
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Larry Viezel | last post by:
http://nominex.com/bottomalign.htm I am viewing this page in IE. The expected behavior is that the image will align to the bottom of the div and that the text will wrap around the image. But...
0
by: Paul E Collins | last post by:
Hello. I want to display a number of individual blocks of text. Each block has an associated image, which should be displayed on the right and aligned with the top of its block of text, i.e....
12
by: S | last post by:
Here's a very basic question. . . I have a DIV that contains content that I need to be bottom-justified. What is the CSS code to do that? Thanks, ---------------S
6
by: tomasio | last post by:
Dear NG-readers, I want to align text right to an image. The last line of text should align with the bottom edge of the image. Unfortunately, the results using my poor CSS knowledge mounted in...
11
by: designkitt | last post by:
Hello, I am having a problem aligning a cell in a table and have tried everything I can think of to correct this without any luck: It appears that the white area, which is an image in the background...
4
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...
4
by: Corey Walker | last post by:
Hello: I am a webmaster for a non-profit organization. I do know some HTML, but I'm by no means an expert. Recently, many pages on our site were redesigned by a professional web designer, who...
47
by: mukeshrasm | last post by:
Hi I am calling two pages using Ajax Get_Pages.php and Get_Content.php from combo box. Both pages are displayed based on selection from combo box. Main problem is that it is not showing the...
1
by: neovantage | last post by:
Hey all, I am using a PHP script which creates headings at run time in a sense at page execution. I am stuck a with a very little problem which i am sure i will have the solution from experts. ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.