Home > Articles > Graphics & Web Design > Dreamweaver & Flash

  • Print
  • + Share This
This chapter is from the book

Positioning a Layer with a Style

So far, you've applied styles to text. When dealing with layers, it's useful to position objects on the page with styles. If you need to position layers in a consistent place on the screen, it's an excellent idea to define a style for those layers. To define a positioning style for a layer

  1. Create and name a new custom style as you did earlier in this hour.

  2. Select the Positioning category in the Style definition dialog box. Notice the properties in this category are properties that you used in the last hour creating layers.

  3. Select Absolute in the Type category at the top of the dialog box. Set the Left, Top, Width, and Height properties as shown in Figure 15.8.

  4. Figure 15.8 To create a positioning style, set the Left, Top, Width, and Height properties in the Positioning category of the Style definition dialog box.

  5. Select the OK button to save your style.

Create a layer in your Web page and position it in another area of the screen from the area you just defined. Delete the L (left), T (top), W (width), and H (height) layer properties and apply the style to the layer. It should hop to the position you defined in the style. You need to remove the properties that are within the <div> tag of the layer for the layer to take on the properties defined in the style. You can tell that this layer has a style applied to it because the style name is highlighted in the CSS Styles panel when you select the layer.

TIP

If you accidentally move the layer, you will override the style's Top, Left, Width, and Height attributes. To return the layer to its style-defined position, select the layer and remove the values in the Top, Left, Width, and Height boxes in the Property inspector. The layer should return to the location and size you defined in the style.

TIP

Instead of creating a layer first, you can simply apply the style you just created to an object in your Web page. The style will create a layer around the object.

  • + Share This
  • 🔖 Save To Your Account