This tutorial will provide you with detailed information on how to control the position of the menus on your HTML documents under different scenarios.
The position of the menus is controlled through the Positioning tab of the Toolbars Editor dialog. Click Tools->Toolbars Editor->Positioning to access it.
A complete description of each one of the options in this dialog is provided here. In this tutorial we're not going to describe them, instead, we're going to present a series of scenarios and we're going to figure out the best way to use those controls to position our menus.
Positioning the menus inside a table's cell
The Free Flow mode is the easiest of the positioning options provided by DHTML Menu Builder but it requires that you add or modify the HTML code on your HTML documents. In this tutorial you will learn how to do this and insert the menus inside a table's cell.
Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.
As you can see, this is a very common design for a simple web site and yet and we're going to place the menus in the left dark-blue cell.
Since we're going to use the Free Flow method we must configure our project so the toolbar uses this method as the positioning mecanism. Click the Continue button to learn how to do this.
A horizontal menu must be placed inside a horizontally aligned cell
Let's consider this page layout where we have an image (perhaps, the logo of our company), a cell and then another cell with the HTML content.
Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.
As you can see, this is a very common design for a simple web site and yet, placing the menus at the correct spot (inside the dark blue cell) can be quite tricky.
First of all we need to define the properties of our design. The two most important things to consider here are:
- The layout is centered in the page. This means that as the browser window is resized, the content will remain centered.
- The position of the dark blue cell is constant in respect to the top, which means that it will preserve that same distance to the top regardless of the browser size.
Click the continue button below to look at how a simple menu would look like if it was implemented in the above design without changing any of the default positioning settings.
You must keep in mind that every new toolbar that you create in DHTML Menu Builder will be placed, by default, horizontally centered and at the top.
A vertical menu must be placed inside a left aligned vertical cell
Let's consider this page layout where we have an image (perhaps, the logo of our company), two cells underneath where the leftmost one will contain our menus and the other our HTML contents.
Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.
As you can see, this is a very common design for a simple web site and yet, placing the menus at the correct spot (inside the dark blue cell) can be quite tricky.
First of all we need to define the properties of our design. The two most important things to consider here are:
- The layout is aligned to the left of the page (although the contents frame is of a variable width). This means that regardless of the browser window is size the dark blue cell will remain in the exact same position.
- The position of the dark blue cell is constant in respect to the top and the left borders of the browser window.
Click the continue button below to look at how a simple menu would look like if it was implemented in the above design without changing any of the default positioning settings. You must keep in mind that every new toolbar that you create in DHTML Menu Builder will be placed, by default, horizontally centered and at the top.
A vertical menu must be placed inside a cell where its left position can vary depending on the browser's window size
Let's consider this page layout where we have an image (perhaps, the logo of our company), two cells underneath where the leftmost one will contain our menus and the other our HTML contents.
Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.
As you can see, this is a very common design for a simple web site and yet, placing the menus at the correct spot (inside the dark blue cell) can be quite tricky.
First of all we need to define the properties of our design. There's only one important thing to consider here:
- The layout is centered which makes all the cells in the table change their horizontal position as the browser window is resized.
This makes positioning the menus quite difficult because the position of the cell where we want to place the menus will vary depending on the browser's window size and we will never know, for sure, what offset to apply. In this case DHTML Menu Builder provides a method for attaching the menus to an element inside that cell. This will cause the menus to follow this element (which is usually an image) thus guaranteeing that the menus are always properly positioned.
Click the continue button to learn how to attach a toolbar to an image so it follows the image position.
When the menus appear perfectly positioned under some browsers and not others
The previous tutorials about positioning only showed how the toolbars appeared under Internet Explorer. If you try one of the samples in the tutorials using FireFox or any other browser you would notice that the toolbars appear out of position... or do they?
This image on the left shows how the menus look under FireFox. They appear to be out of position but the fact is that its the HTML content that is out of position. If you compared the position of the menus under Internet Explorer and FireFox you would see that they are being displayed at exactly the same spot but the HTML content is actually being rendered lower under FireFox. Why? Well, because on this particular sample we didn't specify a top margin for the BODY and Internet Explorer uses a different "default top margin" than other browsers.
