#53. Working with CSS Layout Objects Using CSS to lay out your Web pages offers many more benefits than traditional HTML-based layouts. The underlying code is leaner, maintenance is easier, and sites become more accessible. But laying out pages from scratch with CSS involves learning the complexities and somewhat esoteric rules related to the language. Fortunately, GoLive CS2 introduces CSS layout objects that make laying out pages with CSS as easy as dragging boxes onto a page. Navigating CSS Layout Objects If you're finding it difficult to select certain CSS layout objects you've nested in other objects, try using the Select tab of the Table & Boxes palette. Click the Select Parent Table button  to navigate up to the parent object. A gray box represents a nested object that you can navigate down to by clicking on it. |
CSS layout objects are prebuilt bits of CSS that GoLive works with intelligently. You simply drag a layout object onto a page and adjust its parameters via the Inspector palette. Layout objects are liquid designs, meaning parts of them stretch to accommodate the full width of the viewer's browser window. They are also modular, like interlocking toy building blocks. You can drag a layout object into another to quickly build up what would otherwise be a complex layout you would have to code by hand. To start using CSS layout objects in your pages, follow these instructions: 1. | From the Objects palette (which is now also the Tools palette), select the CSS set from the menu (Figure 53a).
Figure 53a. Switch to the CSS set from the Tools/Objects palette to access the CSS layout objects. 
| 2. | Choose one of the CSS layout objects. Their icons suggest the type of layout they provide, but you can also hover over an icon with your pointer to get a tool tip containing a more informative description.
| 3. | Drag the CSS layout object icon onto your page. You can also double-click the icon to automatically insert it to wherever your insertion point is on the page.
| 4. | Nest CSS layout objects by dragging them into other objects such as separate layers (see #52) or even other CSS layout objects. For example, you can drag a Navigation Rows object into a Two Columns: Fixed Left object (Figure 53b).
Figure 53b. CSS layout objects make it easy to build up a CSS-based layout by nesting the objects in one another. 
| 5. | Edit the parameters of a selected CSS layout object you've placed on a page by opening the Inspector palette. Here you can adjust a layout object's column width, row height, padding, or overall height depending on the layout object selected (Figure 53c).
Figure 53c. Once you place a CSS layout object on your page, you can edit its parameters via the Inspector palette. 
| 6. | Drag images or other site assets into your CSS layout objects just as you would any other container object in GoLive. Enter text by clicking into a layout object box using the Standard Editing tool.
|
|
