ptg 572 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.10 Positioning Elements and Layers One of the most important features of CSS is the ability to position objects on a page, to size them, and to make them either visible or invisible. This feature makes it possible to 5 <td>Baby Bear</td> </tr> </table> </div> </body> </html> EXPLANATION 1 When a table is defined, the data cells will take on this style only if the <em> tag is used within the cell. See line 3. 2 The <em> tag used within this <h1> tag is not affected by the contextual selector because it is not within a table cell; that is, it is out of context. 3 The <em> tag is embedded within a <td> tag. The table’s data will follow the style defined on line 1; it is in context. 4 This table cell is not using the <em> tag, so will not be affected by the style rule on line 1. It can only be affected if in context. 5 This table cell will not be affected by the style rule either because it doesn’t use the <em> tag. See Figure 14.22. Figure 14.22 A table cell is defined by the contextual selector. EXAMPLE 14.21 (CONTINUED) From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 573 move objects to different sections of a page, move text and images, create animation, cre- ate tooltips, scrolling text, and more. Normally when you place tags in an HTML docu- ment, the flow is from top to bottom. Now, with style sheets, you can set the position of an element, even layering one on top of the other (see Table 14.12). A note about Netscape layers. Netscape 4 introduced layer (<layer></layer>) tags, a prototype of CSS positioning, to control the position and visibility of elements on a page, and then with Netscape 6 abandoned the whole thing. This book does not address the Netscape layer technology because it is really a thing of the past. However, the term “layer” is still in use, and is used to refer to objects using the id attribute. 14.10.1 Absolute Positioning Absolute positioning places an element in a specific location on the page and can be used to achieve full animation; for instance, moving an image across a page. It is used to specify the absolute coordinates (x,y) of the element in terms of the browser window itself. The top and left properties are used to determine the coordinates (see Figure 14.23). If not specified, the browser will assume the top left corner of the browser window, where x is 0 and y is 0. The top left corner of the window is position 0,0 and the bottom right corner depends on the resolution of the screen. If the screen resolution is set to 800 pixels in width and 600 pixels in height, the bottom right corner is posi- tioned at coordinates 800, 600. If an absolutely positioned element is nested within another absolutely positioned element, it will be positioned relative to that element. Table 14.12 Positioning Styles Property What It Specifies bottom, right The placement of the bottom, right edges of an element. clip A specified region of the element that will be seen. display Whether an element is displayed. overflow What to do if there is an overflow; that is, there isn’t enough space for the element. position How to position the element on the page. top, left The placement of the top, left edges of an element. visibility Whether an element can be seen. width, height The size in width and height of an element’s content, not additional padding, margins, borders, and so forth. z-index The third dimension in a stack of objects. From the Library of WoweBook.Com ptg 574 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Figure 14.23 Absolute positioning. EXAMPLE 14.22 <html> <head> <title>layers</title> <style type="text/css"> 1 #first{ background-color: red; border-style: solid; font-weight:bold; top: 20; 2 position: absolute; left: 20; height: 100; width: 100; } 3 #second{ background-color: blue; border-style: solid; font-weight:bold; top: 30 ; position: absolute; left: 60; height: 100; width: 100; } left top width height height From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 575 4 #third{ background-color: orange; border-style: solid; font-weight:bold; top: 40 ; position: absolute; left: 100; height: 100; width: 100; } </style> 5 <body> 6 <p id="first"> First position </p> 7 <p id="second"> Second position </p> 8 <p id="third"> Third position </p> </body> </html> EXPLANATION 1 An ID selector called #first sets the pixel positions for a red block that will be ab- solutely positioned 20 pixels from the top of the window, 20 pixels from the left side, and have a size of 100 × 100 pixels (width × height). 2 The position attribute is specified as absolute. It is independent of all other ele- ments in the body of this document. 3 An ID selector called #second sets the pixel positions for a blue block that will be absolutely positioned 30 pixels from the top of the window, 60 pixels from the left side, and have a size of 100 × 100 pixels (width × height). The blue box will ap- pear to be layered over the red one. 4 An ID selector called #third sets the pixel positions for an orange block that will be absolutely positioned 40 pixels from the top of the window, 100 pixels from the left side, and have a size of 100 × 100 pixels (width × height). The orange box will appear to be layered over the blue one. 5 The <body> serves as the container for three objects. The red, blue, and orange boxes will appear in the window at the absolute positions assigned to them in re- lationship to their container, the body of the document. Continues EXAMPLE 14.22 (CONTINUED) From the Library of WoweBook.Com ptg 576 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Top, Left, Bottom, Right—Absolute Positions. As shown in Example 14.22, once the position has been set, the left, top, right, and bottom attributes can be used to specify exactly where on the page the element should be located. Although we used left and top to define the position of the element within the body of the document, right and left bot- tom can also position the element on the page. In the following example, four elements are placed in different fixed positions in the document. If you change the size of the win- dow, the boxes will appear to be located in different places than shown in the output of this example, Figure 14.25. That is because the fixed positions are relative to the dimen- sions of the document’s window. For example, if you shrink the window horizontally, and the boxes are positioned 10 pixels from the bottom, they are still 10 pixels from the bottom of the document, and the boxes at the top are still 10 pixels from the top, giving the appearance that they have moved much closer together. If the window is shrunk enough either vertically or horizontally, the boxes might even overlap to maintain their absolute positions, as shown in Figure 14.26. 6 The paragraph element is positioned and styled according to the rule for the first ID selector. 7 The paragraph element is positioned and styled according to the rule for the sec- ond ID selector. 8 The paragraph element is positioned and styled according to the rule for the third ID selector. See Figure 14.24. Figure 14.24 Three layers based on absolute positioning (Internet Explorer 8, Firefox). EXAMPLE 14.23 <html> <head> <title>layers</title> <style type="text/css"> <! EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 577 1 #first{ background-color: red; border-style: solid; font-weight:bold; position: absolute; top: 10; right: 100; height: 100; width: 100; } 2 #second{ background-color: blue; border-style: solid; font-weight:bold; position: absolute; top:10; left:400; height: 100; width: 100; } 3 #third{ background-color: orange; border-style: solid; font-weight:bold; position: absolute; top: 10; left: 200; height: 100; width: 100; } 4 #fourth{ background color: yellow; border-style: solid; font-weight:bold; position: absolute; bottom: 10 ; right: 40; height: 100; width: 100; } </style> </head> 5 <body> 6 <p id="first"> First position </p> Continues EXAMPLE 14.23 (CONTINUED) From the Library of WoweBook.Com ptg 578 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 7 <p id="second"> Second position </p> 8 <p id="third"> Third position </p> 9 <p id="fourth"> Fourth position </p> </body> </html> EXPLANATION 1 An ID selector called #first sets the pixel positions for a red block that will be ab- solutely positioned 10 pixels from the top of the current window, 100 pixels from the right side, and have a size of 100 × 100 pixels (width × height). 2 An ID selector called #second sets the pixel positions for a blue block that will be absolutely positioned 10 pixels from the top of the window, 400 pixels from the left side, and have a size of 100 × 100 pixels (width × height). 3 An ID selector called #third sets the pixel positions for an orange block that will be absolutely positioned 10 pixels from the top of the window, 200 pixels from the left side, and have a size of 100 × 100 pixels (width × height). 4 An ID selector called #fourth sets the pixel positions for a yellow block that will be absolutely positioned 10 pixels from the bottom of the window, 40 pixels from the right side, and have a size of 100 × 100 pixels (width × height). 5 The body is called the container for the elements within it. The red, blue, orange, and yellow boxes will appear in the window at the absolute positions assigned to them in relationship to their container, the body of the document. If you change the size of the window, the boxes are fixed to the absolute positions, making it seem as though the boxes have moved. They are aligned to the fixed pixel posi- tions from the top, bottom, right, and left sides of the current sized window. 6 The paragraph element is positioned and styled according to the rule for the first ID selector, the top, right corner. 7 The paragraph element is positioned and styled according to the rule for the sec- ond ID selector, the left, bottom corner. 8 The paragraph element is positioned and styled according to the rule for the third ID selector, the top, left corner. 9 The paragraph element is positioned and styled according to the rule for the fourth ID selector, the bottom right corner. See Figure 14.26. EXAMPLE 14.23 (CONTINUED) From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 579 14.10.2 The <div> Container One of the most important containers is the <div> It serves as a generic block-level con- tainer where you can put other elements and give them color, borders, margins, and so forth. It is most useful when used with CSS, allowing you to easily change the contents of the div for an entire site. A site, for example, is often divided up into a header, navigation Figure 14.25 Blocks are absolutely positioned based on pixels from top, bottom, left, and right. Figure 14.26 Firefox: Absolute positions with four blocks. Window height is changed and boxes overlap. From the Library of WoweBook.Com . ptg 572 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.10 Positioning Elements and Layers One of the most important features of CSS is the. Library of WoweBook.Com ptg 574 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Figure 14.23 Absolute positioning. EXAMPLE 14.22 <html> <head> <title>layers</title>. Library of WoweBook.Com ptg 576 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Top, Left, Bottom, Right—Absolute Positions. As shown in Example 14.22, once the position