Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Positioning and Layers

Here's the bad news: Neither the official HTML 4 standard nor the official cascading style sheets, level 1 (CSS1) standard gives you any direct way to control the exact position of the images and text on your Web pages. The closest thing you can do is adjust the margins of your page. For example, the following HTML would position the first image on the page exactly 50 pixels to the left and 40 pixels down from the top-left corner of the browser window. It would then indent the text exactly 60 pixels from the left edge of the browser window.

<body>
<span style="margin-left: 50px; margin-top: 40px">
<img src="pretty.gif" /></span>
<span style="margin-left: 60px">
This is a pretty picture.</span>

A lot of Web page designers have prayed to the HTML gods for the power to be more direct about where they want an image to be. Overlapping layers of images and text are high on a lot of wish lists, too. Unfortunately, there is no officially sanctioned way to say, "Put this image at pixel position 100,50 and this text at 200,52."

The good news is that the new cascading style sheets, level 2 (CSS2) standard includes positioning, and both Netscape Navigator and Microsoft Internet Explorer already started conforming to part of that standard as of version 4. It's a simple, elegant extension to the CSS1 style sheet standard, so you'll find it quite easy to use.

Note

Netscape has also created its own unique way of handling positioning and layering: a non-standard tag called <layer>. I don't cover that tag here because it isn't likely to be accepted as a standard. The style-based positioning technique achieves the same results in a way that's more likely to be compatible with non-Netscape browsers.

The following line of HTML shows how to position an image with the top-left corner exactly 50 pixels from the left and 40 pixels down from the top edge of the browser window. Although I use a <span> tag here, you can include a similar style attribute in almost any HTML tag to position some text precisely where you want it.

<span style="position: absolute; left: 50px; top: 40px">
<img src="pretty.gif" /></span>

Note

If you leave out the position: absolute part, measurements will be relative to wherever the text or image would normally appear on the page, rather than relative to the top-left corner of the browser window.

Along with left: and top: positioning, you can also optionally include width: and height: for text blocks.

Figure 16.6 is a simple HTML document with style-based positioning included. You can see the resulting Web page, as displayed by Microsoft Internet Explorer 5, in Figure 16.7. The page would look exactly the same in Microsoft Internet Explorer 4 and Netscape Navigator version 4 or later.

16fig06.gif

Figure 16.6 This HTML page uses inline styles to precisely position images and text.

16fig07.jpg

Figure 16.7 Microsoft Internet Explorer 5 displays the HTML from Figure 16.6.

Notice that elements are drawn onto the page in the order that they occur in the HTML document. For example, the white streak appears to be layered on top of the logo, but is underneath the body text, because of the order they were drawn.

Note

According to the proposed standard, style specifications can go in any tag you like. For example, assume the following:

<div style="position: absolute; left: 300px; top: 60px">
<h2>Refractal</h2></div>

It does exactly the same thing this code does:

<h2 style="position: absolute; left: 300px; top:
60px">Refractal</h2>

These two approaches are indeed equivalent in Netscape Navigator 4. However, putting the positioning information in the <h2> tag doesn't work in Microsoft Internet Explorer 4. This was corrected in version 5 of Internet Explorer, but for maximum compatibility you should always use <span> or <div> tags for positioning.

Although exact positioning control is a great idea, always remember that anyone using Netscape Navigator version 3 or earlier, Microsoft Internet Explorer version 3 or earlier, or almost any other Web browser will not see any of your fancy positioning. The HTML from Figure 16.6, for example, looks like Figure 16.8 when displayed in Netscape Navigator 3.

16fig08.jpg

Figure 16.8 The HTML from Figure 16.6 doesn't look very artistic in Netscape Navigator 3 because none of the positioning shows up.

Also remember that changes in font or window size can easily destroy the appearance of your carefully positioned elements. As with all style sheet stuff, I strongly recommend that you use style-based positioning for fine tuning only—at least until most of your intended audience has moved up to at least version 4 browsers.

Share ThisShare This

Informit Network