| Table of Contents | Previous Next |
2.4 Dimensioning and positioning of elementsWithout CSS, the support for element layout is limited to images, tables, frames, and some elements' aligning attributes. This lacks advanced formatting features and event-handling functionalities. You have seen from earlier sections 2.12.3 that the basic idea behind the CSS styles is fairly simple. It allows you to control how your Web page should be rendered with the latest browsers. You have also seen how to control CSS properties such as the size and color of fonts, or the background color or image of a Web page in a more structural way. You can use it to format blocks of information. The CSS position element and its associated properties allow you to define exactly where your element boxes will appear. Another interesting CSS positioning attribute is the z-index. It provides you with a tool to create "layers" to perform some simple but effective textual effects. CSS positioning is not restricted to just creating static Web pages where the elements are carefully positioned and laid out by the browsers. You will see in Chapter 6 that the CSS styles and properties are constantly used to combine with scripting to create dynamic HTML pages. Some frequently used CSS positioning and its related elements are listed in Table 2.7. Before the discussion of the CSS positioning elements, some other related elements also deserve to be mentioned. They are the CSS elements width, height spacing, and padding.
2.4.1 Width and height spacingAnother popular application of CSS properties is to generate a rectangular box (or element box) bounding an XHTML element. This box describes the amount of space that an element and its associated properties occupy in the layout of the document. The CSS properties width and height set the distances from the left and right edges and the top and bottom edges respectively. These CSS properties can also be applied to an individual element. The example code <div style="width:100px; height:50px; background-color:yellow"> </div> defines the division element to occupy a dimension of length 50 pixels and width 100 pixels with a yellow background. The simple example ex02-15.htm illustrates the width and height elements. Example: ex02-15.htm - Width and Height Spacing 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Width and Height Space ex02-15.htm</title></head> 6: 7: <body style="font-family:arial;font-size:14pt;color:#000000"> 8: 9: <div style="font-family:'Comic Sans MS',times;font-size:24pt; 10: color:#000088;font-weight:bold;text-align:center"> 11: Width and Height Demo <br /> 12: </div> 13: 14: <div style="color:#ffffff;position:absolute;top:0px;left:0px; 15: width:100px;height:auto;background-color:#880000"> 16: <b>Width and Height Demo:</b><br /> 17: You have two rectangular text areas. This one is positioned 18: at the top left hand corner (0px,0px), 100 pixels wide. The height is 19: set to auto. 20: </div><br /> 21: 22: <div style="position:absolute;top:100px;left:300px; 23: width:auto;height:100px;background-color:#ffff00"> 24: <b>Width and Height Demo:</b><br /> 25: You have two rectangular text areas. This one is positioned 26: at (100px,300px) from the top left hand corner, 100 pixels 27: in height. The width is set to auto. 28: </div><br /> 29: 30: </body> 31: </html> In this example you can see that all CSS element boxes are as wide as the content areas. Lines 1415 position the element box at the top left corner and set the element box to have a width of 100 pixels. The height of an element is normally set to auto so that the height is calculated automatically. This is the same for the second rectangular text area as shown in lines 2223. If you need to add extra padding to an element, then you will need to use the CSS padding element. Note also that in lines 14 and 22 the CSS position element is used to control the exact position of the element box. The position element and its related properties will be discussed further in this section. An example of this is shown in Fig. 2.16. Figure 2.16. ex02-15.htm
2.4.2 Element space paddingYou can generate extra space around elements by using the CSS padding element and its associated properties. You can control the padding spaces on a single side of the box without affecting the other sides. Adding padding to an element is not the same as adding margins to an element. Example ex02-16.htm illustrates these differences. Example: ex02-16.htm - Element Padding 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Element Padding ex02-16.htm</title></head> 6: 7: <body style="font-family:arial;font-size:14pt;color:#000000"> 8: 9: <div style="font-family:'Comic Sans MS',times;font-size:24pt; 10: color:#000088;font-weight:bold;text-align:center"> 11: Padding Demo <br /> 12: </div> 13: 14: <div style="margin:25px;color:#ffffff;position:absolute;top:50px;left:10px; 15: padding-top:20px;background-color:#880000"> 16: This paragraph is indented 25 pixels from the margins. It is padded 17: only from the top by 20 pixels. 18: </div><br /> 19: 20: <div style="margin:25px;position:absolute;top:150px;left:10px; 21: padding-right:5cm;background-color:#ffff00"> 22: This paragraph is indented 25 pixels from the margins. It is padded 23: only from the right by 5cm. 24: </div><br /> 25: 26: <div style="margin:50px;position:absolute;top:200px;left:10px; 27: padding-bottom:15pt;background-color:#ccffff"> 28: This paragraph is indented 50 pixels from the margins. It is padded 29: only from the bottom by 15 point. 30: </div><br /> 31: 32: <div style="margin:25px;position:absolute;top:300px;left:10px; 33: padding:1cm;background-color:#66ffcc"> 34: This paragraph is indented 25 pixels from the margins. It is padded 35: on all sides by 1cm. 36: </div><br /> 37: </body> 38: </html> This example explores various padding settings. You can set individual padding space around the element box. For example, codes in lines 1415 use padding-top to set the amount of padding space (i.e., 20 pixels) to the top of an element. A background color with value #880000 is also used to illustrate the difference between the margin and padding properties. With padding, the background of the element extends into the padding. The margin property sets the margin distance of the element it is associated with. Under certain circumstances, it doesn't matter which one you choose. If the element has a background, however, the difference is clear. Similarly, codes in lines 2021 and 2627 set the amount of padding to the right and bottom of an element respectively. Lines 3233 use padding to set the padding space on all sides of an element. A screen shot of ex02-16.htm is shown in Fig. 2.17. Figure 2.17. ex02-16.htm
The next section looks at another two useful CSS positioning elements, left and top. 2.4.3 Left and top positionYou have already seen from examples ex02-15.htm and ex02-16.htm how you could position the element block on your Web page by using the CSS left and top elements. We will now look at these properties in more detail. The left and top CSS elements describe the "offset" of a positioned element's sides with respect to its element block. For example, the code fragment <div style="left:100px; top:50px; padding:5px; background-color:red"> </div> defines the position of the division element to be at (50px,100px) from the top left corner. It also defines a red background with a padding of 5 pixels on all sides of the element. The example ex02-17.htm illustrates the top and left elements with some of their associated properties. Example: ex02-17.htm - Left And Top Position 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Left and Top Position - ex02-17.htm</title></head> 6: 7: <body style="font-family:arial;font-size:14pt;color:#000000"> 8: 9: <div style="font-family:'Comic Sans MS',times;font-size:24pt; 10: color:#000088;font-weight:bold;text-align:center"> 11: Left and Top Position Demo <br /> 12: </div> 13: 14: <div style="border-style:double;border-color:#000000; margin:25px; 15: color:#ffffff; position:absolute;top:50px;left:10px; 16: padding:10px;background-color:#880000"> 17: This paragraph is indented 25 pixels from the margins. It is positioned 18: from the top-left corner at (50px,10px) with padding 10 pixels on all 19: sides. 20: </div><br /> 21: <div style="border-style:solid;border-color:blue;width:350px; 22: margin:25px;position:absolute;top:250px;left:150px; 23: padding:5px;background-color:#00ccff;z-index:-1"> 24: This paragraph has width 350 pixels and is positioned from 25: the top-left corner at (250px,150px). 26: </div><br /> 27: 28: <div style="border-style:solid;border-color:blue;width:350px; 29: margin:25px;position:absolute;top:200px;left:350px; 30: padding:5px;background-color:#ffff00;z-index:-2"> 31: This paragraph has width 350 pixels and is positioned from 32: the top-left corner at (200px,300px). 33: </div><br /> 34: 35: <div style="border-style:solid;border-color:blue;width:250px; 36: margin:25px;position:absolute;top:60%;left:-15px; 37: padding:5px;background-color:#00ff33"> 38: This paragraph has width 250 pixels and is positioned from 39: the left side by a negative value. 40: </div><br /> 41: 42: </body> 43: </html> The top and left elements allow you to control exactly how your element blocks should appear in a Web page. With these properties, it is possible to set everything about an element, e.g., margins, borders, padding, and content, for a positioned element. All these properties will be preserved and kept with the positioned element blocks. In this example, lines 1415 set the first element block to be displayed at a position (50px, 10px) from the top left corner. Lines 2123 define a different top left corner position for a different element block. Note that another CSS element, z-index, is used in line 23. The z-index allows you to "stack" different element blocks together and provides you with "depth" information. This very useful element will be discussed in section 2.4.5. It is also possible to use negative values as shown in lines 3537. The effect of using negative values allows you to position an element outside its element block. A screen shot of ex02-17.htm is shown in Fig. 2.18. Figure 2.18. ex02-17.htm
2.4.4 Positioning a group of elementsWeb page designers have traditionally spent much of their time trying to control the layout and appearance of their Web pages. CSS addresses this need by providing the Web designers with a powerful CSS element, position, for positioning elements. This element, together with its associated properties, gives you total, pixel-level control over the layout of your Web pages. You can easily specify how your Web pages should be rendered by Web browsers. The concept behind the CSS position element is simple. It allows you to specify exactly how element boxes should be positioned on a Web page. The position element sets its position on a page by using absolute or relative positioning values. For example, the code segment
<div style="position:absolute; top:20px; left:30px; width:200px;
height:200px; background-color:yellow">
</div>
defines an element box of dimension width 200 pixels and height 200 pixels, with a yellow background, and is positioned absolutely to the top left corner at coordinates (20px, 30px). In the example code, if position:absolute is replaced by position:relative the element box will be positioned relative to the placement of the previous element box on the page. As already discussed, the CSS's top and left properties are used for specifying, in pixels, the starting position of the top left corner of the element box. Its position is described relative to either the top left corner (0px, 0px) in absolute positioning, or the placement of other content in relative positioning. You have already seen from examples ex02-15.htm to ex02-17.htm how positioning works. Here is another simple one:
Example: ex02-18.htm - Positioning A Group Of Elements
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Positioning ex02-18.htm</title></head>
6:
7: <style>
8: .bst {font-family:'Comic Sans MS',times;font-size:28pt;
9: color:#000088;font-weight:bold">}
10: </style>
11:
12: <body style="font-family:arial;font-size:14pt;color:#000000;
13: background-color:#ccffcc">
14:
15: <div class="bSt" style="position:absolute;top:400px;left:25px">
16: <i>Practical Web Technology</i> <br />
17: </div>
18:
19: <div style="position:absolute;top:100px;left:10px">
20: <img alt="pic" src="logo2.gif" width="250" height="300">
21: </div>
22:
23: <div style="position:absolute; top:150px;left:400px;
24: width:200px;height:auto">
25: You can use the element box as a convenient 'grid' for positioning
26: a block of text by leaving out the background color of the
27: element box.
28: <br /></div>
29:
30: <div style="font-size:28;position:absolute;top:30px;left:350px">
31: <b>The Positioning Demo</b></br />
32: <img alt="pic" src="hline.gif" width="300" >
33: </div>
34:
35: </body>
36: </html>
You will notice in this example that absolute positioning is used throughout. With absolute positioning, the order of the elements in your HTML document doesn't matter: Web browsers will simply put the element boxes at their specified absolute positions. For instance, in this example, lines 1517 define the text to be displayed at the bottom of the page while lines 1921 position an animated image logo at the top left corner. You can also use the position element as a convenient tool to control the position of a block of texts. You do this simply by leaving out the background color of the element blocks so that the default background color of the page is used. This technique is shown in lines 2328. A screen shot of ex02-18.htm is shown in Fig. 2.19. Figure 2.19. ex02-18.htm
2.4.5 One element behind anotherIn many circumstances, you will need to maintain a stack of layers of elements. The CSS property z-index gives you the control you need to alter the way, or order, in which elements overlap each other. The z-index property takes an integer value. An element with a high z-index value is closer to the front, or top, than those with lower z-index values. You can assign any integer value, including negative, to any size of z-index. For example, a value of 1 means that the associated element will be placed behind the default text on the page. This is a useful feature in many situations. For instance, you could use this feature to set a background layer containing images so that your text can appear over it. Similarly a very high z-index value may be used if you want to be fairly certain that an element will always stay in front of everything else. You can create some dynamic, interesting effects when the z-index property is combined with some other Web technologies. For example, you will see later in Chapter 9 how to program a moving object behind another one. Example ex02-19.htm below modifies ex02-18.htm to create some interesting "shadow" effects:
Example: ex02-19.htm - The Use Of CSS z-index
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Z-index ex02-19.htm</title></head>
6:
7: <style>
8: .bSt1 {font-family:'Comic Sans MS',times;font-size:28pt;
9: color:#000088;font-weight:bold;z-index:2"}
10:
11: </style>
12:
13: <body style="font-family:arial;font-size:14pt;color:#000000;
14: background-color:#ccffcc">
15:
16: <div class="bSt1" style="position:absolute;top:380px;left:40px;
17: color:#ffff00;z-index:-1">
18: <i>Practical Web Technology</i>
19: </div>
20:
21: <div class="bSt1" style="position:absolute;top:390px;left:35px;
22: color:#00ffcc;z-index:1">
23: <i>Practical Web Technology</i>
24: </div>
25:
26: <div class="bSt1" style="position:absolute;top:400px;left:30px">
27: <i>Practical Web Technology</i>
28: </div>
29:
30: <div style="position:absolute;top:10px;left:10px">
31: <img alt="pic" src="logo_web.jpg" width="250" height="150">
32: </div>
33:
34: <div style="position:absolute;top:20px;left:20px;z-index:-1">
35: <img alt="pic" src="logo_web.jpg" width="250" height="150">
36: </div>
37:
38: <div style="position:absolute; top:300px;left:150px;
39: padding:15px;background-color:#00ffff;z-index:4">
40: This paragraph has z-index = 4.
41: <br /></div>
42:
43: <div style="position:absolute; top:260px;left:200px;
44: padding:15px;background-color:#ffcccc;z-index:3">
45: This paragraph has z-index = 3.
46: <br /></div>
47:
48: <div style="position:absolute; top:255px;left:450px;
49: padding:15px;background-color:#ff0000;z-index:2">
50: This paragraph has z-index = 2.
51: <br /></div>
52:
53: <div style="position:absolute; top:220px;left:250px;
54: padding:15px;background-color:#ffff00;z-index:-1">
55: This paragraph has z-index = -1.
56: <br /></div>
57:
58: <div style="font-size:28;position:absolute;top:30px;left:350px">
59: <b>The Z-index Demo</b></br />
60: <img alt="pic" src="hline.gif" width="250" >
61: </div>
62:
63: </body>
64: </html>
The code fragments in lines 1619, 2124, and 2628 are almost identical. They differ only in the top left positions and their z-index values. By simply changing their (absolute) positions and their associated z-index values, you can add a third dimension to your element to create some realistic drop shadow effects. Similarly lines 3436 add a third dimension to the logo image. The effect of various z-index values is demonstrated in lines 3856. A screen shot of ex02-19.htm is shown in Fig. 2.20. Figure 2.20. ex02-19.htm
The next example, ex02-20.htm, makes extensive use of absolute positioning and z-index properties. This Web page has a graphics heading built with only carefully positioned text. A screen shot of this example is shown in Fig. 2.21. Figure 2.21. ex02-20.htm
Example ex02-20.htm is listed below:
Example: ex02-20.htm - Absolute Positioning and z-index
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Absolute Positioning & Z-index ex02-20.htm</title></head>
6: <style>
7: .txtSt1 {font-family:arial}
8: .txtSt2 {font-family:'Comic Sans MS',Times;
9: color:#ff0000;font-size:24pt;letter-spacing:4;
10: position:absolute;top:95px;left:50px;z-index:6}
11: .txtSt3 {font-family:arial,Times;padding:5px;
12: font-size:18pt;
13: font-weight:bold;position:absolute;z-index:7}
14: .back1 {background-color: #0000ff;position:absolute;
15: top:50px;left:30px;width:700;height:50px;z-index:3}
16: .back2 {background-color: #8a2be2;position:absolute;
17: top:55px;left:35px;width:705px;height:55px;z-index:2}
18: .back3 {background-color: #5f9ea0;position:absolute;
19: top:50px;left:150px;width:500px;height:50px;z-index:3}
20: #level1 {color:#ffff00;font-size:96pt;position:absolute;
21: top:20px; left:300px;z-index:5}
22: #level2 {color:#000000;font-size:96pt;position:absolute;
23: top:25px; left:305px;z-index:4}
24: .cont {font-family:arial;font-weight:bold;font-size:18pt;
25: padding:20px 15px 10px 5px;z-index:7}
26: </style>
27:
28: <body style="font-family:arial;font-size:14pt">
29: <div id="level1"><img src="mline1.gif"
30: style="width:220pt;height:30px;position:absolute;
31: top:0px" alt="pic"></div>
32: <div id="level1">
33: <p class="txtSt1">PWT</p>
34: </div>
35: <div id="level2">
36: <p class="txtSt1">PWT</p>
37: </div>
38: <div class="back1">
39: <h2> </h2>
40: </div>
41: <div class="back2">
42: <h3> </h3>
43: </div>
44: <div class="txtSt2">
45: <i><b>Practical</b></i> Web Technology</div>
46:
47: <div class="txtSt3" style="font-size:22pt;
48: background-color:#008000;top:180px"><i>Contents</i></div>
49: <div class="txtSt3" style="background-color:#ffff00;
50: padding: 20 15 10 5;top:250px">Chapter 1</div><br />
51: <div class="txtSt3" style="background-color:#ff0000;
52: border-style:double;top:350px">Chapter 2</div><br />
53:
54: <div style="font-size:28;position:absolute;top:180px;left:200px">
55: <img alt="pic" src="vline1.gif" height="250" >
56: </div>
57:
58: <div style="position:absolute;top:200px;left:220px">
59: <img alt="pic" src="bullet1.gif" hspace=50 align=left>
60: You can add introduction here<br />
61: </div>
62:
63: <div style="position:absolute;top:250px;left:220px">
64: <img alt="pic" src="bullet1.gif" hspace=50 align=left>
65: You can add animation here<br /><br />
66: </div>
67:
68: <div style="position:absolute;top:300px;left:220px">
69: <img alt="pic" src="bullet1.gif" hspace=50 align=left>
70: You can add links here<br /><br />
71: </div>
72:
73: <div style="position:absolute;top:350px;left:220px">
74: <img alt="pic" src="bullet1.gif" hspace=50 align=left>
75: + many others ...<br /><br />
76: </div>
77:
78: </body>
79: </html>
This example contains no additional new features. Only a careful study of the codes is needed to understand fully how this example works. Lines 2945 show how you can build a graphical heading by using only text and style sheets. Lines 4776 demonstrate once again various CSS properties such as padding, border, and position |
| Table of Contents | Previous Next |
