Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Floating Boxes
Floating boxes are based on the HTML tag <div>. This encloses objects and text in moveable boxes, visible in the Layout Editor but invisible to receiving browsers. Pre-4.0 browsers support <div>, but you can't view stacked or overlapping floating boxes in these older browsers. Everything within the <div> tag and displayed in the floating box in the Layout Editor is bounded by the box. Everything inside the box is positioned, aligned, or otherwise related to the box, rather than to a table, or to the page as a whole. When you move a floating box, its contents come along.
To create a floating box:
-
Choose the Floating Box icon (Figure 1) from the Objects palette and either drag it into the Document window, or double-click it. An empty floating box appears. Note that the box is numbered in the lower-right corner (Figure 2). This identifies it for ordering the layers of the Document window. A tiny placeholder box bearing the initials SB (see sidebar) appears at the upper left of the Document window, indicating the presence of a floating box in the layout.
The Floating Box icon is on the Basic tab of the Objects palette.
The floating box placeholder has a number, identifying it for layer ordering.
-
Without clicking the mouse, move the cursor over the new box.
-
When the cursor changes from an I-beam to a hand (Figure 3), drag the box to another position in the Document window. Unlike most other elements, you can drag a floating box around the Layout Editor, even if the page does not contain a layout grid or table.
Click the edge of a floating box (when the cursor is a hand) to select a floating box or move it around the Document window.
-
With the box selected, change the size of the box by dragging one of the handles on the sides or corners of the box.
){kind=link}
){kind=link}
){kind=link}
What does the SB stand for?
You may notice the tiny initials SB in the upper-left corner of the Document window when you add a floating box (Figure 4). GoLive's roots are in Hamburg, Germany, where Schewbende Büchse is how they say floating box. The SB indicator appears for each floating box you add, and you can click it to select individual boxes.
Each floating box is represented by the SB icon in the upper-left corner of the Document window. This page has two floating boxes.
){kind=link}
To change a floating box's attributes:
-
Select the floating box. The Floating Box Inspector appears.
-
To better identify the floating box, type a descriptive name in the Name field of the Inspector (Figure 5). The name will become more useful to you if you use multiple floating boxes.
The Floating Box Inspector controls the attributes of the selected floating box.
-
The distance from the top-left corner of the Document window to the floating box is expressed in pixels. Change the values in the Top and Left fields in the Inspector to move the box on the page.
-
Leave the Visible box checked so that the box will appear on the page.
-
Enter a value in the Depth field to set the order in which multiple floating boxes are stacked. You need not enter anything in the Depth field if you have one floating box, or if the boxes don't overlap.
-
Adjust the Width and Height of the box (measured in pixels, percent, or Auto). Pixels is the default.
-
Click the Inspector's Color box to add a color to the box. Clicking the Color box opens the Color palette, allowing you to select a color.
-
To add a background image to the floating box, click the BGImage button. Then Point & Shoot or browse to the file you wish to use.
){kind=link}
Adding content to a floating box
If you know how to add content to the Document window, you already know how to add content to a floating box.
Think of a floating box as a miniature Web page. You can type text directly into the box or add images and other elements that constrain the text. You can even place tables within the box. The boundaries of the box constrain everything within it, regardless of what's on the outside. To add content, use palette icons or any other method that can be used in the Layout Editor.
In Figure 6, I have typed some text into one of the boxes, named it Headline 2, added a GIF image to another floating box, and put a photograph in a third floating box. Note the SBs in the upper-left corner of the Document window. You can use them to select each floating box.
){kind=link}
These three floating boxes contain three types of content and are spaced around the page
Tips
There's little reason to do so, but you can even place tables or a layout grid within the boundaries of a floating box. Just because you can, though, doesn't mean you should! Floating boxes eliminate the need for most display structures like tables.
If you do need to add a table to a floating box, you can minimize table-related problems within a floating box by setting the box's depth to a value greater than zero (the default is empty), and setting the table's width to Auto.
A word about positioning types
As I mentioned earlier, floating boxes do not interact with the content on the base page. Objects and text outside a floating box flow down the page, regardless of floating boxes that are there. For example, in Figure 7, I have flooded the example from Figure 6 with text. The text does not wrap around the three floating boxes. In the case of floating boxes that are completely filled with opaque content (like the two images in the figure), text outside the floating box is hidden by the box. On the other hand, the page text interferes with the transparent text box. To correct this situation, you could set a color for the floating box containing the headline. However, the text in the base page still does not wrap (Figure 8).
){kind=link}
){kind=link}
Text floods the page, ignoring the three floating boxes. Two of the three floating boxes are opaque and do not displace or wrap any of the underlying text. The headline's floating box is not opaque, but still has no effect on the text beneath it.
Setting the top floating box's color to white makes the box solid and the type easier to read, but still has no effect on what's beneath it.
You can create boxes (layers) that form a boundary around their content but which are themselves part of the flow of the page. Text wraps around such a layer and you can align the box to text, just as you can align an image or media object to adjacent text.