Element Formatting

When planning the layout and formatting of an element, it is helpful to think of the element as surrounded by what are called formatting regions. Behind the element lies the background. The padding separates the element from its border. A margin lies around the border to separate this element from others. The padding, the border, and the margin each have top, bottom, left, and right components. Although not all of these formatting regions are relevant to every element, you will find many of them useful. The following illustration is a diagram of an element's formatting regions.

click to view at full size.

Background-Based Attributes

Let's examine the five CSS attributes that affect the background of an element: background-color, background-image, background-repeat, background-position, and background-attachment. The background shorthand property lets you set all these attributes at one time.

Our first example, Code Listing 13-1, provides a simple demonstration of how the background-color attribute is used to specify the color that appears behind an element. Figure 13-1 shows how this code is displayed.

Code Listing 13-1.

 <HTML> <HEAD> <TITLE>Listing 13-1</TITLE> </HEAD> <BODY> <DIV>This has no style set.</DIV> <DIV STYLE="background-color: red">   This has background-color set. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-1. You can use the background-color attribute to change the color that appears behind an element.

The background-color attribute accepts any standard color unit as a setting, including a named color from the Color Table, an RGB decimal triplet, or an RGB hexadecimal triplet. (See Chapter 12.) To use a predefined color from the Color Table, consult the SBN Workshop Web site or the CD that accompanies this book. On the CD, see Workshop (References); DHTML, HTML & CSS; CSS; DHTML References; and then choose Color Table. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose Color Table. To find out more about CSS attributes, on the CD go to Workshop (References); DHTML, HTML, & CSS; CSS; CSS Attributes Reference.

If you prefer to display an image instead of a flat color behind an element, you can use the background-image attribute. Code Listing 13-2 sets up an image as a background for the second DIV element. You can see the results in Figure 13-2.

Code Listing 13-2.

 <HTML> <HEAD> <TITLE>Listing 13-2</TITLE> </HEAD> <BODY> <DIV>This has no style set.</DIV> <DIV STYLE="background-image: url(tile.gif)">   This has background-image set. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-2. You can use the background-image attribute to display an image behind an element.

The background-image attribute has two possible settings: none and url (Uniform Resource Locator). Setting background-image to none removes any image that has been previously set. This attribute is typically used through script to change the background dynamically. When you set the background-image to url, you must also specify in parentheses the name and location of the file containing the image to be displayed, as shown in Code Listing 13-2.

When you specify the file location, you can give either an absolute path or a relative path to the target file. An absolute path provides the full location of the file—for example, http://www.microsoft.com/library/images/gifs/toolbar/home.gif. A relative path provides the location of the resource relative to the file that is calling for it. For instance, you can simply give the target filename if the two files are in the same directory. If the target resource file is in a subdirectory, you must give the subdirectory name followed by a slash and the filename. You can refer to a parent directory with two dots. Thus, if a directory contains two subdirectories named data and images, an HTML file in the data directory can set a background-image attribute to refer to a file named a.gif in the images directory with the code url(../images/a.gif). If referring to a file in a directory off the root of the same Web site as the calling page, simply use a forward slash before the directory name. For example, any page on the microsoft.com Web site could refer to a file at microsoft.com/images/a.gif as url(/images/a.gif).

When you use a background image behind an element, you can have the image repeated in any of several ways. Code Listing 13-3 offers some examples of how to use the background-repeat attribute. You can see the various visual effects in Figure 13-3 on the following page.

Code Listing 13-3.

 <HTML> <HEAD> <TITLE>Listing 13-3</TITLE> <STYLE>   DIV {background-image: url(tile.gif); height: 44; width: 230} </STYLE> </HEAD> <BODY> <DIV>   A global style sheet sets background-image for the DIV element. </DIV> <BR> <DIV STYLE="background-repeat: repeat">   This DIV has background-repeat set to repeat. </DIV> <BR> <DIV STYLE="background-repeat: no-repeat">   This DIV has background-repeat set to no-repeat. </DIV> <BR> <DIV STYLE="background-repeat: repeat-x">   This DIV has background-repeat set to repeat-x. </DIV> <BR> <DIV STYLE="background-repeat: repeat-y">   This DIV has background-repeat set to repeat-y. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-3. You can use the background-repeat attribute to repeat a background image in various ways.

NOTE
It is considered a good practice to include a background-color setting when using the background-image attribute (for example, STYLE="background-image: url(tile.gif); background-color: red"). Browsers that cannot display background images or cannot find the image file will use the specified background color instead. Later in this chapter, you will see how you can compress this code using the background shorthand property.

The default setting for the background-repeat attribute is repeat, which causes the image specified in the background-image attribute to repeat throughout the entire element. This setting is useful for creating continuous tiled backgrounds. To have a background image appear only once, you can set background-repeat to no-repeat. The repeat-x setting makes the image repeat only horizontally, whereas repeat-y makes it repeat only vertically.

You can use the background-position attribute to set the initial position of the background image relative to the element—that is, to specify where the background image should be placed horizontally and vertically behind the element. Code Listing 13-4 and Figure 13-4 show how the various settings of this attribute affect the position of the background image.

The background-position attribute accepts the keywords left, center, and right for setting the horizontal position and the keywords top, center, and bottom for setting the vertical position. It also allows measurements expressed in standard units such as px (pixels) and percentages. (See the Units of Measurement table in Chapter 12 for a list of standard measurement units.) This attribute is especially useful when you are working with the BODY element. For example, you can make an image appear to be centered behind the entire page, both horizontally and vertically, by setting the background-position attribute for the BODY element to center center.

Code Listing 13-4.

 <HTML> <HEAD> <TITLE>Listing 13-4</TITLE> <STYLE>   DIV {background-image: url(tile2.jpg); height: 75; width: 275;        border: solid 1px black; float: left; margin: 5px} </STYLE> </HEAD> <BODY> <DIV>   A global style sheet sets background-image, width, and height   for the DIV element. This uses the default background-position. </DIV> <DIV STYLE="background-position: bottom right">   This DIV has background-position set to bottom   right </DIV> <DIV STYLE="background-position: 25% 10px; background-repeat: no-repeat">   This DIV has background-position set to 25% 10px and   background-repeat set to no-repeat. </DIV> <DIV STYLE="background-position: center center">   This DIV has background-position set to center center. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-4. You can use the background-position attribute to control where the background image is placed.

The background-attachment attribute, which can be used only on the BODY element, specifies whether the background image scrolls with the rest of the page. The scroll setting is the default. To create the effect of the elements on the page sliding over the background when the user scrolls, set the background-attachment attribute to fixed. Netscape Navigator 4 does not support this attribute.

To set all of these background-based attributes simultaneously, you can use the background shorthand property. The individual attributes must be set in this order: background-color, background-image, background-repeat, background-attachment, and background-position. All of these attributes are optional; simply omit any that you do not want to set. Let's look at an example of a style definition using the background attributes:

 DIV {     background-color: red;     background-image: url(tile.gif);     background-repeat: no-repeat;     background-position: center center;     } 

This style definition could be compressed to the following line of code:

 DIV {background: red url(tile.gif) no-repeat center center} 

Border-Based Attributes

CSS allows you to exercise precise control over the border of an element (a visible line around part or all of an element). You can set the width, style, and color of all sides of a border at one time, or you can specify the characteristics of each side of the border individually.

The border-width attribute defines the width of the border around an element. This attribute accepts the keywords thin, medium, and thick as well as measurements expressed in standard units, such as px, em, and pc. Note that in Netscape Navigator 4, the medium and thick settings are thicker than the same settings in Microsoft Internet Explorer. In Code Listing 13-5, we used different width settings for several borders; Figure 13-5 shows the variation.

Code Listing 13-5.

 <HTML> <HEAD> <TITLE>Listing 13-5</TITLE> <STYLE>   DIV {border: groove red} </STYLE> </HEAD> <BODY> <DIV STYLE="border-width: thin">border-width of thin.</DIV> <BR> <DIV STYLE="border-width: medium">border-width of medium.</DIV> <BR> <DIV STYLE="border-width: thick">border-width of thick.</DIV> <BR> <DIV STYLE="border-width: 10px">border-width of 10px.</DIV> <BR> <DIV STYLE="border-width: 1em">border-width of 1em.</DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-5. With the border-width attribute, you can vary the widths of borders.

The border-style attribute lets you define the style of the border around the element. You can specify any of these styles: none, solid, double, groove, ridge, inset, and outset. (The inset and outset border styles often do not work well on 256-color displays, in which intermediate colors appear poorly blended.) Code Listing 13-6 provides an example of some of these effects, as illustrated in Figure 13-6.

Code Listing 13-6.

 <HTML> <HEAD> <TITLE>Listing 13-6</TITLE> <STYLE>   DIV {border: 9px red} </STYLE> </HEAD> <BODY> <DIV STYLE="border-style: none">border-style of none.</DIV> <BR> <DIV STYLE="border-style: solid">border-style of solid.</DIV> <BR> <DIV STYLE="border-style: double">border-style of double.</DIV> <BR> <DIV STYLE="border-style: groove">border-style of groove.</DIV> <BR> <DIV STYLE="border-style: inset">border-style of inset.</DIV> <BR> <DIV STYLE="border-style: outset">border-style of outset.</DIV> <BR> </BODY> </HTML> 

click to view at full size.

Figure 13-6. You can change the style of a border with the border-style attribute.

The border-color attribute sets the color of all four sides of the border simultaneously. It accepts the same standard color settings as the background-color attribute (discussed in the preceding section). Some border styles, such as groove, inset, and outset, are composed of multiple colors to create a three-dimensional effect. These border styles use the border-color setting as the base color but might shade or lighten it to enhance the 3-D effect.

Rather than setting the border-width, border-style, and border-color attributes separately, you can use the border shorthand property to simultaneously specify the width, style, and color of an entire border, as shown in Code Listing 13-7. The resulting border appears in Figure 13-7.

Code Listing 13-7.

 <HTML> <HEAD> <TITLE>Listing 13-7</TITLE> <STYLE>   DIV {border: 10px double red} </STYLE> </HEAD> <BODY> <DIV>This has the same border on all sides.</DIV><BR> </BODY> </HTML> 

click to view at full size.

Figure 13-7. You can use the border shorthand property to set the width, style, and color of an entire border at one time.

All of the attributes included in the border shorthand property are optional and can be listed in any order. If you omit one of the attribute settings, Internet Explorer will display the default for that attribute. For example, if you omit the color setting, the resulting border will be black, the default. One important note: if you omit a border-style setting, Internet Explorer uses the default setting none—which means that there will be no visible border.

The border-left, border-right, border-top, and border-bottom attributes let you set the width, style, and color for one side of a border at a time. These attributes are not supported in Netscape Navigator 4. For instance, Code Listing 13-8 demonstrates how to set up a different border on each side of an element. Figure 13-8 shows the resulting page.

Code Listing 13-8.

 <HTML> <HEAD> <TITLE>Listing 13-8</TITLE> <STYLE>   DIV {     border-top: 10px double black;     border-bottom: none;     border-left: 20px solid red;     border-right: 15px groove green;   } </STYLE> </HEAD> <BODY> <DIV>This has a different border on each side.</DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-8. Each side of this element has a different border.

You can also use even more specific CSS attributes to fine-tune particular aspects of a border. These attributes, which are not supported in Netscape Navigator 4 (though they are supported in Internet Explorer, Opera (a small, fast browser that requires only 1 MB of disk space), and most likely Navigator 5), include the following:

border-left-width border-right-width border-top-width border-bottom-width
border-left-style border-right-style border-top-style border-bottom-style
border-left-color border-right-color border-top-color border-bottom-color

These attributes can be mixed and matched to produce the desired effect. For example, the following style definition creates a 10-pixel-wide, red double border, except on the left side, which has no border, and on the bottom, where the border is only 5 pixels thick.

 DIV {border: 10px double red; border-left-style: none;        border-bottom-width: 5px} 

Padding-Based and Margin-Based Attributes

The amount of space around an element is controlled with the padding and margin attributes. The padding attribute sets the spacing between an element and its border; the margin attribute sets the spacing between the border and any other elements. Additional and more specific attributes such as padding-right and margin-top allow you to set a different size padding and margin for each side of a border.

Code Listing 13-9 demonstrates several of the major layout attributes, including padding and margin. The DIV elements have a light gray background that extends through a 20-pixel padding to a 10-pixel-wide, solid blue border. They are separated from their surroundings by 30-pixel margins. Figure 13-9 on the following page shows an example of the padding and margin attributes. Netscape Navigator 4.08 displays the same code with a slight gap between the padding and the margin (where the body color will show through). This indicates that although Navigator 4 supports both padding and margin, its behavior does not completely conform to the CSS specifications. This problem will likely be corrected in Navigator 5.

Code Listing 13-9.

 <HTML> <HEAD> <TITLE>Listing 13-9</TITLE> <STYLE>   DIV {     padding: 20px;     margin: 30px;     background: darkgray;      border: 10px solid black;     height: 50px;     width: 300px   } </STYLE> </HEAD> <BODY> <DIV>   A global style sheet sets many attributes for the DIV element. </DIV> <DIV>   A global style sheet sets many attributes for the DIV element. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-9. The padding and margin attributes control the spacing around an element.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net