Making a menu centered using Layers (MM2)
Article Applies To:
MenuMachine 2 only
GoLive CS, CS2
Mac, Windows
Article ID: 000079
Category: Browser Issues
Issue
A menu placed in a layer does not center when the browser window is resized.
Solution
GoLive layers are fixed in their position. They do not move dynamically when the browser window is resized.
If you place a menu in a layer, it will not move when the browser window is resized, and will not remain centered.
To make a centered menu using a layer, you will need to change the layer so it can resize when the browser is resized.
You can edit it a layer's attributes in 1. the source code, or 2. the CSS editor.
1. Source code method:
Here is an example of what a typical GoLive layer looks like in source code:
#layer1 {
height: 100px;
width: 100px;
left: 18px;
top: 18px;
position: absolute;
visibility: visible;
}
To make this layer 100% wide no matter how wide the browser window is, you would change the above to:
#layer1 {
height: auto;
width: 100%;
left: 0;
top: 100px;
visibility: visible;
}
Continue to step 3. or use method 2. below.
2. CSS editor method:
Click on the layer in the page and then open the CSS Editor.
Click on the Block Properties tab in the CSS Editor (looks like a + sign).
Set the following:
Width: 100%
Height: Auto
Left: 0 px
Top: [any value] px
Position: Unchanged
Continue to step 3.
3. Position the Layer from the top of the page
The Top attribute in either method above should be the distance in pixels that you wish the menu to be from the top of the page.
4. Place and select the menu
Place the menu in the layer if it is not already there, and select the menu.
5. Center the menu inside the Layer
In the GoLive toolbar, select the Align Center button (looks like lines of centered text).
Now the layer will be 100% of the browser window and the menu will be centered within it.
When a layer is changed like this, GoLive can no longer "see" it as a layer and it will no longer appear in the Layers palette. This is not a problem. You can still see the the name of the layer in the CSS palette and edit its attributes there, or in source code.
Note: If you have more layers and you need the menu to overlap them, set the Z-Index of this layer to a higher number than the Z-Index of the other layers.
Last updated: July 29, 2006
This article has been viewed 5840 times.