Stylesheets Tutorial - Part 5

by Steve Mulder
In this final part of our stylesheets tutorial, we'll discover what many people believe to be the coolest thing about CSS: positioning and layering.
As we all know, positioning text and images on a Web page with HTML is a pain in the butt. We have to use table tags and invisible spacer GIFs, and even then we're not guaranteed precise positioning because of variations in browsers and platforms.
If you're tired of these limitations, CSS will make you feel like a god. With the properties we'll discuss today, you can precisely position an element using exact pixel coordinates. Furthermore, you can layer positioned elements on top of each other and control what's on top. And there's even more, as you're about to see.

Here are the properties we'll be looking at:

Important note: Because the specification for this CSS-Positioning feature set was developed later than the rest of CSS, IE 3 does not support any of it. For positioning and layering, you're limited to the 4.0 browsers.

Before we move on, here's the answer to the bonus question from Part 4.

And now, on with the show.

Absolute Positioning

Welcome to the funhouse! Let's position stuff.

position (and left and top)
The position property is your key to a happier life. Witness:

This stylesheets rule tells the Web browser to position the beginning of the <H4> box of text exactly 100 pixels from the left edge of the browser window, and exactly 43 pixels down from the top edge. See the code in action.

Note that the only things specified are the left and top edges. That means that the text will flow normally all the way to the right side of the browser window, and will flow normally down the page.
The left and top properties are very straightforward. left defines the amount of space between the element and the left edge of the browser window, and top defines the space between the element and the top of the window.
For defining these distances, you can use length units or percentage values. Length units are the same ones we've talked about previously: pixels, points, ems, inches, and so on. If you use percentage values, the percentage refers to the size of the parent element.
What can you position? Everything. Paragraphs, specific words, GIFs and JPEGs, QuickTime movies, and so on. Things can be positioned all over the place, as this example shows.
What we've been talking about so far is absolute positioning. Hence the position: absolute part of the CSS rule. When an element is positioned absolutely, it's positioned independent of any other object on the page - as we've already noted. It's as if that element doesn't "know" anything about what else is on the page. However, the positioned element does inherit other properties, such as font, size, and so on.
Is there an alternative to absolute positioning? Yes: relative positioning.

Relative Positioning
Absolute positioning enables you to precisely position elements independently of any other elements on the page.
Relative positioning means that the position you specify for an element is relative to its natural position in the document's flow.
An example:

View this rule in action.

Essentially, when you use relative positioning, an element is positioned relative to where it would regularly be. As soon as you stop applying relative positioning, the flow of elements returns to normal, which can cause some overlapping problems, as this example shows.

If you use relative positioning, be careful, because things can get complicated quickly.
In addition to positioning things as absolute or relative, you can also use a value of static. This simply means that the element will be positioned normally within the HTML as we're used to, with no special positioning applied to it whatsoever.
So far so good? Let's look at controlling positioned elements.

Controlling Positioned Elements
In addition to controlling where the upper left corner of an element is positioned, you can also control the width and height of the element and the element's overall visibility on the page.
width
Remember how positioned text on the previous pages would still flow normally to the right? With the width property, you can control how far the text flows - that is, how wide the element should be.

When the Web browser sees this rule, it will position the text as expected, but it will also limit the maximum horizontal size of the paragraph to 150 pixels. Check it out.

The width property works only on absolutely positioned elements. You can use any length unit we've already discussed, or you can use percentage values, which refer to the parent element's width.
In IE 4, this property also works on images. You can artificially stretch or compress a graphic by setting width.
height
Theoretically, height should work just like width, only in the vertical direction:

I say "theoretically" because none of the major browsers yet supports height. (The only thing you can do with it is stretch images in IE 4.)

visibility
With CSS, you can actually make elements invisible on the page. This works on elements whether or not they are positioned.

I would show you an example, but since it would be invisible, there really isn't any point, is there?

Your choices are:

When an element is hidden, it still takes up the same amount of room in the browser window; you just don't see it. So, if you're wrapping text around an image that you've hidden, the text will appear to wrap around an empty space.
Keep this property in mind when you're scripting and using Dynamic HTML. For example, you might want to make a paragraph or image visible only when the mouse rolls over something.
Communicator does not support visibility. IE 4 users, enjoy!

Layering Text and Images
Here's what I've been promising all along regarding the best way to overlap elements on a Web page. It's not a negative margin or small line-height. It's a combination of position and...
z-index
When you position multiple elements and they overlap, use z-index to specify which one should appear "on top."

Watch these CSS rules play out (I've colored the <H3> text green so you can see the difference):

Stylesheets

Mania

Since the <H2> text has the higher z-index value, it appears on top of the <H1> text. (IE 4 for Mac is buggy, and places <H1> on top.)
Use plain integers for the values. z-index works for elements that are positioned absolutely or relatively.
And of course you can also give images a z-index. (With Communicator, it's best to wrap the <IMG> tag in a <SPAN> or <DIV> tag, and then apply the property to the <SPAN> or <DIV>.) Check it out.
Congratulations! You've now made it through all the individual stylesheet properties. But you can't truly master stylesheets until you read the next page.

Degrade with Dignity!
Good Web design degrades well.
Translation: What you build specifically for a 4.0 browser shouldn't look like crap in a 3.0, 2.0, or 1.0 browser. If it's not at least usable, you've failed.
With stylesheets, this is very important because people with non-CSS browsers will be visiting your pages. What will they see? It might not be gorgeous, but is it usable? If it's ugly, can you make it more attractive?
Sure, you can always create different sets of pages for different browsers. But we like to avoid that if at all possible because of how much extra up-front and maintenance work that entails.
So, let's look at tricks for creating stylesheets-enhanced pages that degrade well in other browsers...

Trick #1: Use Styles on Similar HTML Tags
If you want to control the level of boldness using font-weight, why not use the <B> tag for applying the style? That way, the text will be bold in older browsers as well.
Try to find corresponding HTML tags for your CSS declarations, so that you'll end up getting at least some of the same effect in older browsers that you're getting in the 4.0 browsers.

Trick #2: Double Up Styles with HTML Tags
If you want to make absolutely sure a paragraph is blue, use both CSS and HTML to make it so. Double up with both color: blue and <FONT COLOR="blue">. If you want something centered, use both text-align: center and <CENTER>. You get the idea.

Trick #3: Make Unwanted Elements "Invisible"
If you've got a huge decorative font symbol, for example, that looks tiny and silly in an older browser, use <FONT COLOR="xyz"> to give it the same color as the background, thus making it vanish in older browsers. But the CSS rule will still color it red (or whatever) for newer browsers, so people with newer browsers will still see your cool effect.
Making your pages degrade well isn't just something to spend five minutes on at the end. It's something to keep in mind during the entire design process, as you initially create your CSS rules and plan out your goals. And, as always, the most important three words are: test, test, test.
Everything we've talked about for the last five days relates to version 1.0 of CSS. But version 2.0 is coming soon, and you're gonna love it.

The Future Is Coming Soon

The World Wide Web Consortium, which produced the stylesheets specification, isn't slowing down. Even before the major browsers have supported all of the existing CSS functionality, CSS2 is now making its debut. The specification for version 2 is completed; now it's just a matter of what the browser makers will support in their 5.0 browsers.
Here's a quick overview of some of the changes that CSS2 will bring...

Tweaks to CSS1
We're getting some new values to existing CSS properties, and some new options that we can only hope browsers will support. For example, font: icon would mean that text size should match the size of the icon text that a given computer uses. There are also going to be more flexible ways to define selectors and contextual selectors.

New Cool Tricks
The new text-shadow property is going to be a popular one. People love using shadows, and this will make it easy. Want to override the hand icon that appears when you mouse over a link? You'll use the cursor property to specify a different cursor. Remember how we can use A:active to set properties to link text while a user is clicking on it? Well, :hover will enable us to change text when the mouse simply rolls over it. Very cool.
This is just a sampling of the magic to come.

Control over Tables
Hmm, let's see. We use tables all the time for layout, and after this tutorial we can use CSS too. Wouldn't it be nice if we could control tables better through CSS, so it was all integrated? Yes, it would. Watch for it soon.

Different Looks for Different Media
When you print a CSS-enabled page, all hell can break loose. Wouldn't it be nice if we could declare one look-and-feel for on-screen viewing, and a different look-and-feel for hard copy printouts of our pages? Oh yes. The media types in the works include screen and print as well as projection (e.g., slide shows), aural (for speech generation), handheld (for PDAs), and more.
On a related note, you'll be able to control page breaks for documents that are printed. You'll also be able to specify some printing instructions. Desktop publishers can sigh in relief.
And on another related note, as I implied above, you can make your pages accessible by speech-generating systems. New properties such as voice-family and speech-rate will define how your pages will be read aloud. Let's come back down to earth and experiment with what we've learned here.

Part 5 Exercise

Practice makes perfect, or something like that. So, let's try one more "Can you do this?" exercise.
Look at this page. Re-create it yourself using CSS. Or at least figure out exactly how you would do so, remember you must have a 4.0 browser for the examples to work correctly.

(I fully realize that this example page degrades less than gracefully. It's just an example, silly.)
Let's conclude this tutorial so you can go about your business. Oh, and I want to give you some links to great CSS resources too. Follow me... Review of Part 5 You've made it! Welcome to the end of our stylesheets journey.
in this part we covered positioning and layering. Let's quickly review:

CSS Resources on the Web

Thanks for sticking with me as we've explored the wonders of stylesheets!
The power of stylesheets is now yours.
The clay of the Web is yours to knead and shape.
Go sculpt cool stuff.

see also the
CROSSPLATFORM article


original by: Steve Mulder is a Senior Consultant at TSDesign,
and author of Web Designer's Guide to Style Sheets.
Final edit by: Hans Stammel - AVIP.com.au / ShopWA.com.au / YorkWA.com.au.