| Scenario: A horizontal menu must be placed
inside a horizontal cell (Floating Mode) Here's how a menu would look if
we implemented it without changing any of the default
positioning settings:
As you can see, the menus almost look right. Horizontally,
they're centered but they are at the top of the page so all we
need to do is move them down until they appear right above the
dark blue cell.
To do this we're going to use the Vertical
Offset parameter found in the
Tools->Toolbars Editor->Positioning dialog, as show in
this screenshot.
Highlighted
in red you will see the settings that we need to adjust.
First of all its the alignment. By selecting the second dot from
the first row we're configuring the toolbar to appear
horizontally centered and at the very top of the page.
Next, we use the Vertical Offset to push the toolbar downwards.
In this case we have chosen an offset of 100 pixels.
This means that the toolbar will appear horizontally centered,
just as our HTML content and 100 pixels from the top of the page.
Don't worry if you don't know the exact offset that you need to
apply on your particular case. Try with a small value and
compile the project. Then, test your settings by viewing the
menus on your browser. Either increase or reduce the value you
have used and recompile until you obtain the results that you're
looking for.
Here's how the menus will look like after applying the above
mentioned settings:
As we expected, the menus still maintain their
horizontal centered position but have been pushed 100 pixels
from the top placing them exactly above the dark blue area.
This concludes this tutorial.
Click here to return the
"Positioning the menus" tutorial index. |