PDA

View Full Version : Site Layout

nether
06-06-2008, 03:09 PM
Hey,

I want to layout a page in the following way:

--------MenuBar--------
--------Toolbar---------
SidePanel-|-ContentArea

I want the sidePanel to be as tall as it possibly can without exceeding the height of the browser window.

Here is some simplified html for what I've been trying.

<body width=100% height=100%>
<table width=100% height=100%>
<tr>
<td> Menu Bar Area </td>
</tr>
<tr>
<td> Toolbar Area </td>
</tr>
<tr>
<td height=100%> SidePanel Area </td>
<td> Content Area</td>
</tr>
</table>
</body>


Note: In my actual code I set the widths and heights with CSS.

The result of the above code is that the total height of the table will be =
heightOfScreen + heightOfMenuBar + heightOfToolbar, but I want the whole table to just be in the space of the window...

Any help would be appreciated.
jcdevelopment
06-06-2008, 03:19 PM
Well to start off i would stop using tables for a layout. they dont work very well and they are hard to manage, "no tables" (http://www.hotdesign.com/seybold/). Thats just something to show you that its better to use divs. Any ways i noticed in the code you posted it looked like so


<body width=100% height=100%>
<table width=100% height=100%>
<tr>
<td> Menu Bar Area </td>
</tr>
<tr>
<td> Toolbar Area </td>
</tr>
<tr>
<td height=100%> SidePanel Area </td>
<td> Content Area</td>
</tr>
</table>
</body>


not sure if thats a typo. It should be like this


<body width="100%" height="100%">
<table width="100%" height="100%">
<tr>
<td> Menu Bar Area </td>
</tr>
<tr>
<td> Toolbar Area </td>
</tr>
<tr>
<td height="100%"> SidePanel Area </td>
<td> Content Area</td>
</tr>
</table>
</body>


If its a typo then ignore what i just said, if not try that out.
nether
06-06-2008, 03:32 PM
i left the quotes out just to type it faster. Again, I don't put these heights inside the html file
Neno
06-06-2008, 05:36 PM
I think more important point that JC was trying to make is that you should use tables for tabular data only, and not for layout.

There are different ways to accomplish what you want but they all require css and sometimes javascript.
nether
06-06-2008, 06:28 PM
I'm willing to ditch the table but only if someone shows me a better solution.