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 580 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript bars, content, and a footer. Each of these sections could be placed in its own div container and all of those divs enclosed in one main div. (CSS Class Declaration) .bigblue { border-style: solid; border-width:1px; color: blue; font-family:arial, times, serif; font-size:32pt;color: blue; } (The HTML <div> tags) <div class="bigblue"> This is the text in a container. </div> 14.10.3 Absolute Positioning The div container is not only used to change colors, borders, fonts, and so on, but it is used for absolute or relative positioning of a block of text. For example, it allows you to create a paragraph style independent of the <p> tag. Within the block, the <span> tags can be used to introduce other styles. In the following example, the <div> tag is used to create a block. It is absolutely posi- tioned in the window at position 0,0, which is the top, left corner. Absolute positioning allows you to place an element anywhere on the page separate from the rest of the doc- ument. The top left corner of the document or the elements’ parent originate at coordi- nates 0,0. EXAMPLE 14.24 <html> <head><title>Positioning</title> 1 <style> 2 .divStyle {background-color:blue; 3 position: absolute; width: 250px; height: 150px; } p { color: white; font-size:18pt; position: absolute; left:10px; height:5px; } </style> </head> <body> 4 <div class="divStyle"> 5 <p> From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 581 14.10.4 Relative Positioning Relative positioning places the element in a position relative to the element where it is defined within the document. This type of positioning is used to control the way ele- ments appear in relation to other elements in the document. In the following example the .ParaStyle class is positioned relative to where it should be placed within its con- tainer, a div block. This is a paragraph. </p> </div> </body> </html> EXPLANATION 1 The style sheet starts here with the <style> tag. 2 A class called divStyle is defined. 3 This style will produce a blue box, 250 pixels wide and 150 pixels high. It will be positioned at the top, left corner of the window (0,0) because the top and left properties are undefined. 4 The div element will use the style defined by the divStyle class. 5 The paragraph element is embedded within the <div> tags. The div box is like a mini window. It will placed at the top, left corner of the window, because its po- sition has not been defined. See Figure 14.27. Figure 14.27 The div block is absolutely positioned in the window. EXAMPLE 14.24 (CONTINUED) From the Library of WoweBook.Com ptg 582 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.25 <html> <head><title>Positioning</title> 1 <style> 2 .divStyle { background-color:lightblue; 3 position: absolute; 4 width: 250px; height: 150px; border-style: solid; border-color: darkblue; } 5 .paraStyle { color:darkblue; 6 position: relative; font-size:18pt; } </style> </head> <body> 7 <div style="left:50px; top:50px" class="divStyle"> 8 <p style="left:15%; top:20%" class="paraStyle"> This is a paragraph. </p> </div> </body> </html> EXPLANATION 1 The style sheet starts here. 2 A style class called divStyle is defined for the div element. 3 The div box will be absolutely positioned in terms of the browser window. 4 The dimensions of width and height of the div box are set. The border around the div container is a solid, dark blue border. 5 A style class called paraStyle is defined for the paragraph (p) element. The color of the text will be dark blue. 6 The position will be relative to the div box where the paragraph is contained. If top and left properties are not defined, the paragraph will be in the top, left corner of the box, position 0,0 relative to the div container where it is placed. 7 An inline style is set for the div element, placing the box 50 pixels from both the top and the left side of the browser window. 8 An inline style is set for the p element, placing the paragraph at a percentage of 15% from the left and 30% from the top based on the dimensions of the div box. See Figure 14.28. From the Library of WoweBook.Com ptg 14.10 Positioning Elements and Layers 583 14.10.5 The z-index and Three Dimensions The last type of position sets the precedence of a stack of overlapping elements. The absolute position properties include three coordinates: x, y, and z, where x is the left side of an object, y is the right side, and z is the value of the stacking position. If you have three containers layered on top of each other, the z position of the bottom layer is 0; the next layer, 1; and the top layer in the stack is layer 2. In the next section, JavaScript will allow us to move these objects around, rearranging the stacking order dynamically, by manipulating the z-position. Figure 14.28 The paragraph is positioned relative to the div style. EXAMPLE 14.26 <html> <head><title>layers</title></head> <body bgcolor="lightgreen"> 1 <span style="position: absolute; z-index:0; background-color: red; width: 200;height:250; top: 50px; left:160px;"></span> 2 <span style="position: absolute; z-index:1; background-color:yellow; width: 90;height:300; top: 20px; left:210px;"></span> 3 <span style="position: absolute; z-index:2; background-color: blue; width: 250;height:100; top: 125px; left:134px;"></span> Continues From the Library of WoweBook.Com ptg 584 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 4 <span style="position: absolute; z-index:3; background-color: white; width: 50;height:50; top: 140px; left:230px;"></span> </body> </html> EXPLANATION 1 A span style is used to create a red rectangle, size 200 pixels × 250 pixels, in the top, left corner of the screen. A z-index of 0 means that this rectangle will be the bottom layer in a stack. 2 A span style is used to create a yellow rectangle, size 90 pixels × 300 pixels, posi- tioned above the red rectangle, z-index of 1, or on top of it in the stacking order. 3 A span style is used to create a blue rectangle, size 250 pixels × 100 pixels, posi- tioned above the yellow rectangle, z-index of 2, or on top of it in the stacking order. 4 A span style is used to create a white square, size 50 pixels × 50 pixels, positioned above the blue rectangle, z-index of 3, or on top of it in the stacking order. See Fig- ure 14.29. Figure 14.29 Using the z-index for overlapping elements. EXAMPLE 14.26 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 585 14.11 Where Does JavaScript Fit In? 14.11.1 What Is DHTML? DHTML stands for Dynamic HTML. It is not a programming language, but a technique used when HTML/XHTML, CSS, and JavaScript (and Ajax) work together to make up a dynamic interactive Web page. With CSS we were able to control the style (i.e., color, font, margins, etc.) of the HTML elements and store the style sheets in separate files. All by itself, CSS is presenting a style for your page, but now we need JavaScript to bring the Web page to life, to make it dynamic. Throughout this text we have been using event handlers and functions with JavaScript to create rollovers, slideshows, animation, sub- mit forms, and so on. In the next chapter we discuss how to access every element on a Web page with the DOM. Then you can apply CSS styles and JavaScript to the DOM ele- ments to create what will effectively make it possible to manipulate, create, and delete any part of your page on the fly. 14.11.2 How JavaScript Views Style Sheets Sometimes a page consists of more that one style sheet. When the page is loaded, all external and embedded style sheets are stored in an array in the order in which they are placed within the document, just as are images, forms, and links. The array is called styleSheets, a property of the document object, so document.styleSheets[0] is the first style sheet, normally the general style sheet for the entire page. The next style sheet, maybe one that uses the @import rule, would be document.styleSheets[1], and if you embedded another style within the document, that would be document.styleSheets[2]. Because each of the elements of the styleSheets array has a disabled property that can be turned on and off, you can dynamically toggle between styles, allowing a user to select a style suited to his or her own taste. It is also possible to access a specific rule within a style sheet by using the W3C cssRules array or the Microsoft rules array. Both arrays work with index numbers. The first rule is cssRules[0], the second one cssRulse[1], and so on. Example 14.27 contains two style sheets, one that is imported and one that is embedded. By using JavaScript the user can toggle between two styles. When reverting to the first style, one of the rules is changed; that is, the rule for the h1 selector is changed to purple. EXAMPLE 14.27 <html> <head><title>Stylesheets</title> <style type="text/css"> 1 @import url("pstyle.css"); </style> Continues From the Library of WoweBook.Com . CSS styles and JavaScript to the DOM ele- ments to create what will effectively make it possible to manipulate, create, and delete any part of your page on the fly. 14.11.2 How JavaScript Views. your page, but now we need JavaScript to bring the Web page to life, to make it dynamic. Throughout this text we have been using event handlers and functions with JavaScript to create rollovers,. elements. EXAMPLE 14.26 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 585 14.11 Where Does JavaScript Fit In? 14.11.1 What Is DHTML? DHTML stands for Dynamic HTML. It