Adobe GoLive Floating Box Basics
3/03

Floating Boxes allow flexibility in web design because they can be positioned precisely on a grid, layered, and animated. However, they should be used with caution simply because they are not supported by older browsers. To add a floating box to your document, just drag its icon from the basic tab of the Objects Palette. You can also insert floating boxes and other objects by control-clicking any GoLive page and using the contextual menu.

The box comes in with a default name such as layer1(designating its stacking order), and a small yellow box indicating the box's presence on the page.

The Inspector controls most of the box's properties.

The small yellow box indicates that there is a Floating Box on the page. Floating Boxes are created with numbers indicating their layer relative to other boxes on the page.

The Floating Boxes Palette displays information about all boxes on the current page, such as visibility, name, and actions. To access it, go to the Window menu and select Floating Boxes.

General Tips:

  • Double click on a box to type directly in it.
  • Move the mouse over the perimeter and the cursor will become a hand, drag to position the box. Click on the edge of the box and blue sizing handles will appear.

Inspector Tips

  • If you plan on having more than one floating box on your page, name your box in the Name field of the Inspector.
  • Add a background color or size your box via the Inspector.
  • Each box comes in with a Z-Index which is indicated in the lower right hand corner of the box. The Z-Index controls the layer of the box relative to other boxes on the page. The higher it is, the closer the box is to the top of the page. The Z-Index can be changed in the Inspector. Boxes with tables should always have a Z-index greater than 0, and should have width set to automatic.
  • The Visibility check box allows your box to start off as an invisible item in your browser.

Palette Tips

  • Clicking the eyeball icon allows visibility of boxes that are set to invisible in the inspector.
  • A box can be selected by clicking its name in the palette, and then clicking the box's perimeter.

Using the Align Palette to Postion a Box

  • The first set of buttons aligns a box to the parent, or relative to the page.
  • The second set of buttons aligns boxes relative to each other.
  • The third set of buttons distributes objects horizontally or vertically, and allows you to use exact spacing when desired.
  • Select multiple boxes by holding down the shift key and clicking box names in the Floating Boxes Palette.