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.. 14.
Trang 114.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.
Trang 2bars, 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
E X A M P L E 1 4 2 4
<html>
<head><title>Positioning</title>
1 <style>
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>
Trang 314.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 eleele-ments 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>
E X P L A N A T I O N
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.
E X A M P L E 1 4 2 4 (C O N T I N U E D)
Trang 4E X A M P L E 1 4 2 5
<html>
<head><title>Positioning</title>
1 <style>
2 .divStyle { background-color:lightblue;
border-style: solid;
border-color: darkblue;
}
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>
E X P L A N A T I O N
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
Trang 514.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.
E X A M P L E 1 4 2 6
<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
Trang 64 <span style="position: absolute; z-index:3;
background-color: white; width: 50;height:50;
top: 140px; left:230px;"></span>
</body>
</html>
E X P L A N A T I O N
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.
E X A M P L E 1 4 2 6 (C O N T I N U E D)
Trang 714.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
E X A M P L E 1 4 2 7
<html>
<head><title>Stylesheets</title>
<style type="text/css">
1 @import url("pstyle.css");
</style>
Continues