The alignment dialog in the Toolbars Editor is a very powerful tool
which lets you take complete control over the follow parameters that
affect the way the toolbar is positioned on the browser's window:
- Anchor: This controls the fixed areas of the toolbar that will
remain fixed regardless of the alignment setting
- Alignment: This controls how the toolbar will be positioned
relative to the browser's window
- Position: And this controls where in the document the toolbar
will be displayed
Being able to work with the above parameters on their own would
be a quite complex and tedious task; this is why DHTML Menu
Builder's Toolbar Positioning dialog provides a very easy to use
interface where all you have to do is select from an alignment mode
and if necessary set an offset.
The alignment control is divided in three modes:
- Aligned and Anchored:
In this mode you select the position from 9 available options.
Each option will automatically align and anchor the toolbar to a
specified location of the browser's window and maintain this
setting even if the browser is resized.
 |
For example, in the
configuration shown here the toolbar will be anchored to
top/right corners of the browser's window.
This configuration will be maintained regardless of the window
size and even if this size changes after the toolbar has been
displayed.
Please refer to the Positioning the menus
tutorials for further information. |
- Custom and Fixed:
In this mode the toolbar will be placed at a give x,y
coordinate.
The coordinates are provided in pixels and as in the previous mode
are maintained regardless of the browser's window size.
 |
In this sample the
toolbar will be positioned at exactly 40 pixels from the left
corner of the browser's window and 120 pixels from the top
border.
Please refer to the Positioning the menus
tutorials for further information. |
- Attached to...:
Sometimes, placing the toolbar so it flows with the rest of the
contents of the page can be quite a difficult task.
With this positioning option you can force the toolbar to follow an
item in the HTML document so its position will depend on the
position of the "attached to" object (which is usually an image)
and the selected alignment.
Optionally you can force the image to inherit the size of the
toolbar, this way, whatever content appears next to the image will
appear to flow as if it was flowing around the toolbar. Note that
this option is only available when the alignment has been set to
Bottom/Left.
- Free Flow...:
All the previous positioning methods will create toolbars that
appear floating above all the contents in a page.
In this mode, the toolbar will not float, but instead, will be
part of the HTML contents on the page allowing it to flow with the
rest of the HTML content... just as if it were an image or a table
or some other common HTML element.
For this mode to work you need to add an ID to some enclosing
element in the page. The toolbar will then look for that ID and
will insert the toolbar inside the tag that contains that ID.
A more detailed explanation of how this method works can be found
on the Positioning the menus
tutorial.
Finally you can further tweak the position of the toolbar by
specifying a custom offset. The offset is specified in pixels and
its applied to the position of the toolbar after it has been
calculated based on the selected alignment.
| Related topics of interest:
|
|