|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
A newer use of style sheet attributes is to perform positioning of HTML elements through the CSS positioning attributes. Both Microsoft and Netscape support these attributes in their Web browsers—although, as a new standard, neither Web browser offers perfect support for them. This section focuses on how you can use style sheet attributes to specify positioning of HTML elements within a Web page. You will also see how to do this for Netscape Navigator by using Netscape’s <LAYER> and <ILAYER> tags. Finally, you can learn how to create scripts that can dynamically change the positioning information and how to achieve a measure of cross-platform compatibility between the two flavors of Dynamic HTML. CSS PositioningThe following list shows the most important style sheet attributes concerning positioning and manipulation of elements within an HTML document. Through the use and manipulation of these attributes, it is possible to precisely determine the two-dimensional positioning of everything within the Web browser window. In situations where HTML elements overlap, it is also possible to specify the relative three-dimensional placement. The list shows the name of the attribute, followed by its possible values, and a description of what it is used for. The default value for each attribute is shown in bold type.
Listing 24.1 shows an example in Internet Explorer of how to position HTML elements—in this case, three copies of an image and a block of text—using CSS positioning attributes. Styles are defined for two of the images using an embedded style sheet, defined by the <STYLE> tag, and attached to the HTML tags using the CLASS attribute (the third copy of the image uses the default style). The block of text is assigned style parameters using the STYLE attribute of the <DIV> container tag. Listing 24.1 CssPos.htm—Using CSS Attributes to Position HTML Elements
<HTML>
<HEAD>
<TITLE>CSS Positioning</TITLE>
<STYLE TYPE=“text/css”> <!--
.sample1 {
position: absolute;
left: 100px;
top: 100px;
width: 150px;
height: 150px;
}
.sample2 {
position: relative;
left: 275px;
top: -300px;
width: 200px;
z-index: -1;
} -->
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>CSS Positioning</H1>
<HR>
<CENTER>
<IMG SRC=“Tux.jpg” WIDTH=450 HEIGHT=335 BORDER=0>
<BR>
<IMG CLASS=“sample1” SRC=“Tux.jpg” WIDTH=450 HEIGHT=335 BORDER=0>
<BR>
<IMG CLASS=“sample2” SRC=“Tux.jpg” WIDTH=450 HEIGHT=335 BORDER=0>
</CENTER>
<BR>
<DIV STYLE=“position: absolute; top: 1.75in; left: 1.5in;
z-index: 4;color: yellow; font: 36pt Verdana”>
Works With Text, Too!
</DIV>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
This HTML document produces a Web page with three renderings of the same image and a block of text (along with the header and footer information identifying the example and author). As shown in Figure 24.1, one of these images is placed inline, the way images are conventionally placed within a Web page. The second image uses as its class name “sample1,” which attaches the corresponding style to it. As a result, this image is absolutely positioned 100 pixels down and to the left of the upper-left corner of the Web browser window. Also, because the width and height defined in the style are smaller than the actual width and height of the image, it is scaled to fit. Because no value for the z-index attribute is specified, this image appears above the first image defined.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
