Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table always at the bottom 1

Status
Not open for further replies.
neillovell

neillovell

Programmer
Aug 27, 2002
560
GB
Hi all,
I have a set of tables that make a banner and the bottom of the page. Imagine a strip of blue with purple underneath and a disclaimer notice.

I want this to be at the bottom of every page. For large pages it works great, but if I have a page with say just a few sentences on it puts the strip at the end of the text, so halfway down the screen.

How can I make this set of tables appear at the bottom of the page, and the bottom of the browser screen on a small page?

Does that make sense?

Big page1
Text
Text
Text
TextText
Text
Text
TextText
Text
Text

STRIP --------------------
End of browser screen




small page1
Text
Text

STRIP --------------------





End of browser screen
 
Sort by date Sort by votes
Like how many pixels up from the bottom of the page?

I did give this a try, I guess I did it wrong, because the strip appeared as it did normally - halfway up for the short page, and at the bottom for the longer page (that requires scrolling).

I'll give it another try though.
 
Upvote 0 Downvote
Ok I tried absolute bottom 8px and that works great for the short page

Shortpage1
text
text
text
.
.
.
.
.
.
STRIP-----
Bottom of browser


But on the long page which requires scrolling I get

BigPage1
Text
Text
Text
Text
Text
Text
STRIP---------------------
Bottom of browser screen
Text
Text
Text
Text
Text

I'm #including this via an asp file btw, if that helps.
 
Upvote 0 Downvote
you say you have a set of tables ... so if this table with the disclaimer etc is a nested table, just put
Code: 
valing=bottom
in the cell which holds this table. eg:
Code: 
<table width=&quot;100% height=&quot;100%&quot;>
<tr><td>content, whatever</td></tr>
<tr><td>content, whatever else</td></tr>
<tr><td [b]valign=&quot;bottom&quot;[/b]>
<!-- this will be the nested table with the disclaimer -->]<table><tr><td>Disclaimer & Copyright notice</td></tr></table>
<!-- end nexted table -->
</td></tr>
</table>

well, hope this helps
 
Upvote 0 Downvote
oops ... I was trying to embolden the valign=&quot;bottm&quot; there but it didn't quiet work!!

 
Upvote 0 Downvote
valign=bottom will only put the content for that particular cell at the bottom of that cell... it won't extend the table to the bottom of the browser....
 
Upvote 0 Downvote
y2k1981>>
I tried your code and the last row wont be at the bottom of the page. :(
 
Upvote 0 Downvote
Use JavaScript to code the page (and specifically, pixel height of the body bit of the table, thus pushing the disclaimer to the bottom). I've tried to make my example below as compatiable with as many browser version as possible, though it won't work in Netscape 6.0 because Netscape became a lot more highly HTML compliant, and the HEIGHT tag is not a HTML compliant tag...hope it helps anyway.

<html>
<TITLE>Test Page</TITLE>

<body>

<script language=&quot;JavaScript&quot;>

if ( typeof( window.innerWidth ) == 'number' ) {
var ScrnHght = window.innerHeight - 60;
} else {
if ( document.documentElement && document.documentElement.clientHeight ) {
var ScrnHght = document.documentElement.clientHeight - 60;
} else {
var ScrnHght = document.body.clientHeight;
}
}

var TitleHght = 100;
var DisclaimHght = 100;
var BodyHght = ScrnHght - TitleHght - DisclaimHght;

document.write('<table width=&quot;100%&quot; height=&quot;' + ScrnHght + 'px&quot; border=&quot;1&quot;>');

document.write('<tr height=&quot;' + TitleHght + 'px&quot;><td width=&quot;100%&quot;><center>');
document.write('<img src=&quot;TitleImage.jpg&quot;>');
document.write('</td></tr>');

document.write('<tr height=&quot;' + BodyHght + 'px&quot;><td width=&quot;100%&quot; valign=&quot;top&quot;>');
</SCRIPT>

TESTING

<!-- Place standard HTML here for body //-->

<SCRIPT language=&quot;JavaScript&quot;>
document.write('</td></tr>');

document.write('<tr height=&quot;' + DisclaimHght + 'px&quot;><td width=&quot;100%&quot;>');
</SCRIPT>

TESTING

<!-- Place disclaimer here //-->

</td></tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Thanks! The javascript idea was very good, and thanks to everyone else!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
897
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
131
CoolBreeze007
CoolBreeze007
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
163
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top