PDA

Click to See Complete Forum and Search --> : Tables, positioning in the middle of the screen

tim_kinder
04-07-2006, 05:53 AM
Hello,
I want to position a fixed-sized area (let say, 800x600) in the middle of the screen. So I had a table with width and height set to 100% and single cell with align=center and valign=middle.

Inside this cell I placed another table with fixed sizes, and all my other stuff inside. This works well.

Then I had to stick some art-work to left-side of my internal table. In order to do so, I set outer table as 3x3, with top and bottom rows height="50%" and colspan="3", left and right columns width="50%" and middle cell with my actual data. It works in IE and Opera - but in Firefox and Safari put my middle cell to bottom cenetr of the screen.

Are there better solutions for such a layout?

Sincerely,

P.S. this is my code :

<html>
<table border="0" width="100%" height="100%" spacing="0" padding="0" bgcolor="#343434">
<tr height="50%"><td colspan="3"><img src="bmp/spacer.gif" height="1" width="1" border="0"></td></tr>
<tr height="1">
<td width="50%" background="content/gp/background.gif" style="background-position:top right;background-repeat: no-repeat;"><img src="bmp/spacer.gif" width="1" border="0"></td>
<td width="800">
<table border="0" width="800" height="600" spacing="0" padding="0" bgcolor="#0000ff">
<tr><td>aaa</td></tr>
</table>
</td>
<td width="50%"><img src="bmp/spacer.gif" width="1" border="0"></td>
</tr>
<tr height="50%"><td colspan="3"><img src="bmp/spacer.gif" height="1" width="1" border="0"></td></tr>
</table>
</html>
WebJoel
04-07-2006, 11:10 AM
Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Your Name">
<meta name="Keywords" content="Search words, seperated by commas">
<meta name="Description" content="In plain language, describe your site, what it is about, etc.">

<style type="text/css">
body {margin:0; padding:0; border:0;}
#content {width:750px; height:600px; margin:20px auto;
padding:45px 25px 25px 25px; background-color:#0000ff;
background-image:url(content/gp/background.gif) top right repeat no-repeat;}
</style>
</head>
<body style="background-color:#343434;">

<div id="content">
<h1>This is the content area.</h1>
Your content in here. All your text and stuff goes in here.
</div>

</body>
</html>/CODE]

It's a bit easier to work with than nesting tables and using pixel-shims for spacing...
I made the "content" area less than your 800px, because on a 800x600 resolution monitor, you just guaranteed a horizontal scrollbar be present. It is still 600px tall (vertical scrollbars are deemed okay).

btw: in your code:
[CODE]<table border="0" width="100%" height="100%" spacing="0" padding="0" bgcolor="#343434">
It is "cellpadding=" and cellspacing=", not "padding=" and "spacing=". :)
tim_kinder
04-07-2006, 08:32 PM
Hello,

that's great, but not exactly what I'm after.

1. I need a fixed-sized area which will always remain in the middle of the screen, even if you resize browser's window;

2. I expect the browser will show scrollbars when the window is smaller than my fixed-sized area;

3. I have to stick some arwork to left of this fixed-sized area (not inside it). When browser's window is bigger than fixed-sized area but smaller than the area along with artwork, I expect the scrollbars not to be shown.

Sincerely,

Tim Kinder