The Tutorial - Positioning the menus
Scenario: Positioning the menus inside a table's cell (Free Flow mode)

To configure our project so the toolbar is positioned using the Free Flow mode we first click Tools->Toolbars Editor->Positioning and select the Free Flow option.

That's all that is required to configure the project.

You may have noticed that, besides the Free Flow option, appears a code between brackets; this is the ID that the toolbar will look for on your pages.
An ID is something like a unique name that you can assign to an element on page to identify it and distinguish it from the rest.
The ID displayed next to the Free Flow option is telling you the ID that you must use for this toolbar. If you have a project with more than one toolbar then each toolbar will have its own ID.

And how do we assign an ID to our cell? Its actually very easy and all you will need is a text editor or you could use your preferred HTML editor (such as FrontPage, Dreamweaver, etc...)

So, start you favorite editor for HTML documents and load the document containing the cell where you want the toolbar to appear.
If you're using a visual editor such as FrontPage or Dreamweaver you will have to switch to "Code View" so you can see the HTML code.
Next, locate the HTML code for the cell. In our example, this is how the HTML code for the cell looks like:

<td align="left" valign="top" bgcolor="#004080" height="100%" nowrap></td>

Now, all you have to do is to add the "ID" parameter and assing it the ID that DHTML Menu Builder generated for your toolbar: dmbTB1ph. When done, the code for your cell will look like this:

<td align="left" valign="top" bgcolor="#004080" height="100%" nowrap id="dmbTB1ph"></td>

Notice that we have highlighted the changes in bold/red text. That's it... that's all that is required to assign an ID to a cell.
Now, when you view your menus using a browser the menus will look for the dmbTB1ph ID and will position themselves inside whatever tag contains the ID.

Below you can see how the sample looks like after we have added the ID parameter to our cell.

Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.

The great advantage of this method is that the toolbar will flow with the cell's size, alignment and all its parameters in general. This means that if you ever change your design layout, as long as you keep the cell's ID, the toolbar will reposition itself inside the cell... automatically.
 


This concludes this tutorial. Click here to return the "Positioning the menus" tutorial index.