ONLINEPROOFINGSERVICE.COM

photography hosting - www.onlineproofingservice.com

Menu


of CSS layout. You can use the Box category properties to set positioning and spacing issues for these boxes: Figure 8-15: The


Box category in the CSS Rule Definition dialog box. 224 Part III: Advancing Your Site _ Width, Height: Enable you to specify a width and height that you can use in styles you apply to images, layers, or any other element that can have its dimensions specified. You can use pixels, points, inches, centimeters, millimeters, picas, ems, exs, or percentages for your measurements. _ Float: Enables you to align a boxed element to the left or right so that other elements, such as text, wrap around it. _ Clear: Prevents floating content from overlapping an area to the left or right, or to both sides. (This option doesnt currently display in Dreamweaver.) _ Padding: Sets the amount of space around an element to its edge. You can set padding separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages. _ Margin: Sets the amount of space between the edge of an element and other elements on the page. You can set the margin separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages. For more on using the Box category for layout, see Chapter 9. The Border category The Border category defines settings - such as width, color, and style - for the borders of box elements on a page. Your options are Style, Width, and Color (see Figure 8-16). Many borders are not reproduced properly in Dreamweaver; use your browser to preview the results. Figure 8-16: The Border category in the CSS Rule Definition dialog box. Chapter 8: Cascading Style Sheets 225 The List category The List category defines settings, such as bullet size and type, for list tags. You can specify whether bullets are disc, circle, square, decimal, lowerroman, upper-roman, upper alpha, lower alpha, or none. If you want to use a custom bullet, you can use the Browse button to locate an image to be used as the bullet. You can control the location of the list bullet in relation to the list item (see Figure 8-17). The Positioning category The Positioning category (see Figure 8-18) enables you to precisely position elements on a page. This style uses the tag specified for defining layers in the Layer preferences. The default in Dreamweaver for layers is the <DIV> tag. You can change it by editing the Layer preferences. The <DIV> tag is the most commonly supported, however, so you should try to stick with it. See Chapter 9 for more on layer preferences. To understand how positioning works, its important to know that positioning is done relative to something else, like another element on the page or the