Example on how to place your menu centered in an area


content here

I want the menu to appear "Top-Centered" at the <td> area below:

content here
content here
  
content here

content here
content here
content here


How I can place the menu in the center of the <td>:

Assumptions: Because I use multiple menus in my website I compiled this menu under a custom filename "mymenu_centered.js". You do not need to change the default "menu.js" name in your projects.

 

Positioning Step 1: I first make sure that the "Relative to an Element" value is selected on the AllWebMenus <Positioning> property of the Main Menu Group, before I compile the menu:

I also choose to anchor the "Top Side Center" point of the menu to the "Top Side Center" point of the <td> area. Note that the "Default ID" uses the filename that I selected for the compiled menu. I will need this ID in Step 2 for final positioning.


Positioning Step 2: Assuming that I already compiled and linked the menu to the page, I add the following parameter to the <td> tag:

<td id='awmAnchor-mymenu_centered' width="450" height="44" bgcolor="#0066CC"> &nbsp; </td>

The parameter positions the menu inside the <td> area, using the positioning values specified in step 1. Specifically, the top-center point of the menu touches the top-center point of the <td>. This yields the desired result of a "centered" menu.


Why 'awmAnchor-mymenu_centered'? Why this particular name?

Please view the html source of this page. Go right below the <body> tag and find the AllWebMenus menu-linking section (this is where the menu-linking section should always be). You can see that the name of my particular menu is mymenu_centered. If you use a different name, then you should use this different name inside the awmAnchor ID.

You can read more on the <Positioning> property and techniques by pressing "F1" while you have this property selected in AllWebMenus.


< Previous Example

 

Created by Likno Software ©