Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Floating Boxes as Layers
Floating boxes can be effectively used to deploy overlapping content on a Web page. The visual effect of overlapping graphic images can free up your designs from the humdrum, where everything is in its own separate box.
The CSS code for keeping track of which layer sits atop which other layer is a numerical scale called the Z-Index. Each new layer brought onto the page is assigned a value and a layer hierarchy is built as additional objects are added. The higher the object's z-index, the closer it is to the top of the stack.
A floating box's Z-Index number is displayed in the lower-right corner of the box (Figure 9). You can change the Z-Index in the Depth field of the Floating Box Inspector.
){kind=link}
Three overlapping floating boxes each have a Z-Index at the bottom-right corner of the box.
Managing multiple floating boxes
If you use floating boxes merely as a way to organize a Web page and do not overlap them, manipulating each floating box is fairly easy. Simply select and configure the box or move it as needed. If, on the other hand, you group and stack floating boxes to form layers, you will need to use the Floating Boxes palette, a window that allows you to manage and manipulate the order of floating boxes.
To reorder layers with the Floating Boxes palette:
-
Add three floating boxes to a GoLive document. In Figure 10 I have built a page with three floating boxes. Then, using the Inspector, I colored and named them.
Three overlapping floating boxes are stacked atop each other.
-
Using the Floating Box Inspector, change the order of the boxes. The lowest box in the stack will have the lowest number, and vice versa. I have reversed the order of my boxes in Figure 11.
After changing the order in the Floating Box Inspector, the stacking order of the boxes is now reversed.
-
Choose Window > Floating Boxes. The Floating Boxes palette (Figure 12) opens. This palette will look familiar to Photoshop users used to working with the Layers palette.
The Floating Boxes palette shows each floating box on the page, and allows you to lock or hide each box.
-
Select a layer and click its pencil icon, graying it out. That layer will now be locked in place until you click the pencil icon again.
){kind=link}
){kind=link}
){kind=link}
Tip
You can use the Floating Boxes palette to control the visibility of the box. Click the eye icon next to the name of the box. When the eye is grayed out, the box is invisible. You can also make the box invisible by unchecking the Visible box in the Floating Box Inspector, when the box is selected.
Using a grid with floating boxes
You can use a grid to position floating boxes on the page. Unlike the standard layout grid element, the grid you use to position floating boxes is not a page element, but a helper tool that's only visible while you are dragging a floating box in the Layout view. You can set the gridlines as close together or far apart as you like, and force floating boxes to snap to the grid as you drag.
To set floating box grid options:
-
Click the arrow in the upper-right corner of the Floating Boxes palette and select Floating Box Grid Settings from the menu (Figure 13). The Floating Box Grid Settings dialog box (Figure 14) appears.
Click the right-pointing arrow in the Floating Boxes palette to see a menu containing the Floating Box Grid Settings menu item.
Create a grid for your floating boxes in the Floating Box Grid Settings dialog box.
-
In the Vertical spacing and Horizontal spacing boxes, choose the number of vertical and horizontal pixels between gridlines.
-
Click the Snap checkboxes to cause a floating box to snap to the nearest gridlines.
-
Click the Visible while dragging checkboxes if you want to see the grid as you move a floating box.
-
Click the Prevent Overlapping checkbox to keep floating boxes from being stacked.
-
Click OK to close the dialog box. The results appear in the Document window.
){kind=link}
){kind=link}
Tips
The eye icon on the Floating Boxes palette does the same thing as the Visible checkbox in the Floating Box Inspector: it controls the display of the box and its contents.
Experiment! You can add dramatic effects to your pages. Just by tightening up the layers in Figure 15, the three elements change the layout while opening up the page with more white space.
){kind=link}
Floating boxes allow you to overlap design elements as part of the design process.