Positioning A Menu Within A Table Cell
If you use tables for web page layouts, this page explains how to configure a floating menu so that its position is fixed relative to a table cell.
This
page uses a table layout which looks like the diagram to the left. The
page layout consists of three tables: a single cell header and footer
table, and a main table with a navbar cell and a content cell. The floating
menu is centered within the navbar cell as follows:
1. In the DHTMLMenu program create a floating menu by checking the Float radio button in the General tab of Global Settings.
2. Select the first menu item under the Top-level menu item in the Menu Tree, go to the General tab of the Menu Item window, click the button in the upper right corner to open the Item Condition dialog, and input the following in the Suffix area::
function stgtxy()
{
var x=0,y=0;
if(!nNN4)
{
for(var o=stgobj("stTABLE");o;o=o.offsetParent)
{
x+=parseInt(o.offsetLeft);
y+=parseInt(o.offsetTop);
}
}
return [x,y];
}
st_ms[st_cm].mcox="stgtxy()[0]";
st_ms[st_cm].mcoy="stgtxy()[1]+stgct()";
3. Add the menu to the desired table cell on the web page.
4. Set the ID of the table cell <td> to stTABLE.
5. Here is the HTML code we used for the menu on this page:
<!-- Navbar Cell -->
<td width="120" align="center" valign="top">
<img src="images/shim.gif" alt="" width="100" height="0" border="0">
<table width="84" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="84" align="center" valign="top" id="stTABLE">
<script type="text/javascript" language="JavaScript1.2" src="http://pittwebs.com/sothink/menu/table_menu.js"></script>
</td>
</tr>
</table>
</td>
Note that we used a table within the navbar cell to center the menu horizontally within the cell. Also, it will be necessary to adjust the widths in the above code depending on the width of the menu.