Forum Moderators: open
I ran a site search but couldn't find this particular problem...
I have a table that runs about 70% of the length of a page. I want to center that table so that there would be 15% of background above and 15% below. That way on any resolution screen it would appear centered. Is there a way that I could do this without using the height attribute? Or do I have to wrap it in a table or two using height? Another goal is to make it XHTML valid and height won't cut it.
Thanks
There have been threads on this in the recent past. Maybe I could do a search in a minute...
[webmasterworld.com...]
[webmasterworld.com...]
<center>
<script language="JavaScript">
document.writeln('<table border="2" height="',
screen.height -190,'"><tr><td>')
</script>
By entering + or - a number, it becomes more or less than 100% in any screen resolution.
</td></tr></table>
</center>
<center>
<script language="JavaScript">
document.writeln('<table border="1" height="100%" width="', screen.width -170,'">');
document.writeln('<tr><td height="', screen.height / 10 * 1.5,'"> </td></tr>');
document.writeln('<tr><td height="70%">');
</script>Content goes here.<br>
<script language="JavaScript">
document.writeln('</td></tr>');
document.writeln('<tr><td height="', screen.height / 10 * 1.5,'"> </td></tr></table>');
</script>
</center>
Just turn off the borders attribute.
Works even in NN4.x and will validate XHTML (I also added a TABLE Summary - Accessibility!).
<div style="padding: 10px 20px; margin: 15% 5%; border: 1px dotted #333;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" summary="Quentin Tarantino">
<tr>
<td class="color" width="145"><img src="images/whois.gif" width="145" height="33"
alt=" " /><br />
<img src="images/bio.gif" width="145" height="33" alt=" " /><br />
<img src="images/filmo.gif" width="145" height="33" alt=" " /><br />
<img src="images/stories.gif" width="145" height="33" alt=" " /> <img
src="images/move.gif" width="145" height="33" alt=" " /><br />
<img src="images/what.gif" width="145" height="33" alt=" " /></td>
<td class="color" width="1"><img src="images/line2.gif" width="1" height="300"
alt=" " /></td>
<td class="color"> </td>
<td class="color" width="20"><img src="images/line.gif" width="20" height="300"
alt=" " /></td>
<td class="color" width="196"><img src="images/quentintarintino.jpg" width="196"
height="300" align="right" alt=" " /></td>
</tr>
</table>
</div>
toadhall-->That code is very cool, is there anyway to make that code follow a 'liquid-type' format. When I change screen.width (-170) to screen.width (-2) a horizontal scrollbar appears and all hell breaks loose. I suppose after seeing this script; it would be possible to write some code that could place my table in the center of each screen resolution? Can you recommend a nice JavaScript book to learn from?
papabaer-->Works just fine, and so simple too. The problem though is that the tables position is relative to the browser chrome. Is there anyway to keep it in the center, where I don't have to worry about it moving around on me?
Just wondering...and thanks again for all you guys help.
>>>>> Is there anyway to keep it in the center, where I don't have to worry about it moving around on me?
I'm not quite certain what you mean, could you explain a little more?
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>table_max_set3</title>
<style type="text/css">
<!--
body {font-family:verdana,helvetica,sans-serif; font-size:11.4px;background:#c8e0d8;line-height: 1.3}
td {font-family:verdana,helvetica,sans-serif; font-size:11.4px}
-->
</style>
<script language="JavaScript">
<!--
// Set your margins as screen %. Don't leave them blank.var top = 15;
var bottom = 15;
var left = 5;
var right = 5;
// Don't touch
var cellh = 100 - (top + bottom);// "Content" cell height
var cellw = 100 - (left + right);// "Content" cell width
function ver(mojo){
if (mojo == 0){
return(1);
} else {
vset = mojo / 10;
return(screen.height / 10 * vset);
}
}
function hor(mojo){
if (mojo == 0){
return(1);
} else {
hset = mojo / 10;
return(screen.width / 10 * hset);
}
}
//-->
</script>
</head>
<body style="margin:0px" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<script language="JavaScript">
document.writeln('<table border="0" height="100%" width="100%"><tr>');
document.writeln('<td rowspan=3 width="'+hor(left)+'"> <br></td>');// left
document.writeln('<td height="'+ver(top)+'"> <br></td>');// top
document.writeln('<td rowspan=3 width="'+hor(right)+'"> <br></td></tr><tr>');// right
document.writeln('<td height="'+cellh+'%" width="'+cellw+'%" align="center"bgcolor="red">');
</script>
Content goes here.<br>
<script language="JavaScript">
document.writeln('</td></tr><tr>');
document.writeln('<td height="'+ver(bottom)+'"> <br></td>');// bottom
document.writeln('</tr></table>');
</script>
</center>
</body>
</html>
It really is goofy. Have a feeling I've just reinvented the wheel (CSS) and haven't done a very good job of it.
Oh well. Hope you're as amused as I am.
>code that could place my table in the center of each screen resolution
Not sure what you mean.
Not sure I want to know what you mean.
>recommend a nice JavaScript book
Anyone that has "a beginner's guide" as part of its title.
The O'Reilly Definitive Guide is , er... definitive, but a beginner's book is uncluttered and methodical. Test the index of the ones you run across. That is, try to find information in the book through it. If you can't, it's not you, it's the book - pick another one. You'll be using it as a reference guide for some time so it's got to have a good index. And glossary for that matter.
Check the remainders bins at stationery stores. You can pick up half price bargains or better. It may not cover the latest version but so what? 1.0 and 1.1 still work. And in more places!
And now, it's back to me pint.
>>>>> Is there anyway to keep it in the center, where I don't have to worry about it moving around on me?I'm not quite certain what you mean, could you explain a little more?
All I mean is that when you expand and contract the menus up top (like the URL menu for example) The table moves with them. The table only looks centered say if my URL menu and my menu with FILE EDIT VIEW ETC... are expanded. I want it to stay centered at any screen configuration or resolution--JavaScript must provide a way...or maybe fixing the position of the div using percentages or something...? Hope that makes some sense, a bit late.
Thanks for any help...
