- Creating and Applying a Custom Style
- Exploring Style Settings
- Redefining the Heading 3 <h3> Tag
- Positioning a Layer with a Style
- Creating a Hyperlink Rollover
- Creating an External Style Sheet
- Transforming the Property Inspector
- Converting Styles to HTML Markup (<font> Tags)
- Saving HTML Markup as an HTML Style
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
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
Create and name a new custom style as you did earlier in this hour.
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.
-
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.
Select the OK button to save your style.
){kind=link}
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.
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.