File Under: CSS

Mulders Stylesheets Tutorial – Lesson 5

In this final stylesheets tutorial lesson, 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 in this lesson, you can precisely position an element using exact pixel coordinates. Furthermore, you can layer positioned elements on top of one another 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:

  • position
  • left
  • top
  • width
  • height
  • overflow
  • visibility
  • clip
  • z-index

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 4.x and 5.x browsers.

Before we move on, here’s the answer to the bonus question from Lesson 4.

And now, on with the show.

Contents

  1. Absolute Positioning
  2. Relative Positioning
  3. Controlling Positioned Elements
  4. The Power of Invisibility
  5. Layering Text and Images
  6. Stylesheets
  7. Mania
    1. Degrade with Dignity!
    2. CSS2 and a Quick Exercise
    3. Review of Lesson 5

Absolute Positioning

Welcome to the funhouse! Let’s position stuff.

position

The position property is your key to a happier life. Witness:

H4 { position: absolute; left: 100px; top: 43px } 

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. The positioned element does inherit other properties, however — font, size, and so on.

Is there an alternative to absolute positioning? Yes: relative positioning.

Relative Positioning

Relative positioning means that the position you specify for an element is relative to its natural position in the document’s flow.

An example:

I { position: relative; left: 40px; top: 10px } 

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.

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? Then 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 what happens to content that overflows its boundaries.

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 box that contains the element should be.

DIV { position: absolute; left: 200px; top: 40px; width: 150px } 

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 and 5, this property also works on images. You can artificially stretch or compress a graphic by setting width.

height

The height attribute works just like width, only in the vertical direction:

DIV { position: absolute; left: 200px; top: 40px; height: 150px } 

Unfortunately, Communicator doesn’t support height. And watch for occasional bugginess in IE 4 and 5, too.

overflow

What happens if the content of a box is bigger than the height and/or width you’ve defined for it? You can decide with overflow.

DIV { width: 150px; height: 150px; overflow: scroll } 

This works on block-level elements, whether or not they are positioned.

Your choices are:

  • visible — all the content will be displayed, even if it goes outside the declared boundaries of the box.
  • hidden — the browser clips off whatever content goes “over the line.” That is, it won’t display part of the content.
  • auto — the content will be clipped, but this time the browser will display a scrollbar if it’s needed, so the user can get to the rest of the content.
  • scroll — the content will be clipped, but this time the browser will always display a scrollbar, even if it’s not required.

See it in action. The overflow property is supported by IE 4 and 5 for Windows, but that’s it.

Now let’s look at another CSS superpower: the power to be invisible.

The Power of Invisibility

visibility

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

H4 { visibility: hidden } 

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

Your choices are:

  • visible makes the element visible.
  • hidden makes the element invisible.
  • inherit means it will inherit its visibility from its parent element.

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 and 5 users, enjoy!

clip

With clipping, you can control exactly which parts of an element are visible and which are invisible.

H2 { clip: rect(10px 200px 100px 40px) } 

This property works only on those elements that have been absolutely positioned. (Thankfully, it works in Communicator 4.x and IE 4 and 5!)

Clipping affects the display of the element, but not the page layout. So, whatever you clip still takes up room on the page.

The code above sets up a clipping region that is a rectangle (which is the only shape supported so far). Everything within the clipping region will be displayed. The top of our example region is 10 pixels from the top of the box containing the element. The right side is 200 pixels from the left edge of the box. The bottom edge is 100 pixels from the top of the box. And the left side is 40 pixels from the left edge of the box.

That means that if the gray box below were a paragraph (or an image), the clipping region would be the yellow line. Thus, only the black region of the entire paragraph would be visible.

clip-ex.gif

Check out a real example.

You could also use any other length units, or even percentage values if you wish. A value of auto means that no clipping will occur. By the way, negative values for clip are permitted.

Clipping can come in very handy in the world of dHTML, temporarily hiding or exposing elements as needed. (Imagine creating a pulldown menu in dHTML: When a user rolls over a header, the clipping region enlarges to reveal the links below the header.)

OK, Mulder, so now we can position stuff and control it on the page. How about layering things on top of one another? Follow me …

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.

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -45px; z-index: 1 }

Watch these CSS rules play out (I’ve colored the <H2> 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.

(Note: IE 4 and 5 are sometimes buggy with z-index.)

Use plain integers for the values. The z-index property 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 it entails.

So, let’s look at tricks for creating stylesheets-enhanced pages that degrade well in other browsers.

Trick No. 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 effects in older browsers that you’re getting in the newer ones.

Trick No. 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 No. 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> 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 now also starting to get browser support, and you’re gonna love it.

CSS2 and a Quick Exercise

The World Wide Web Consortium, which produced the stylesheets specification, isn’t slowing down. Even though the major browsers do not yet support all of the existing CSS functionality, CSS2 is now making its debut. The specification for version 2 has been finished for some time and support of CSS2 in 5.0 browsers is finally emerging. In the meantime, work on CSS3 has begun.

But first, let’s experiment with what we’ve learned in this lesson.

Look at this page and re-create it using CSS. Remember that you must have at least 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.

Review of Lesson 5

You’ve made it! Welcome to the end of our journey into CSS.

This final lesson covered positioning and layering. Let’s quickly review:

  • position is one of our favorite CSS properties. Now you can put stuff exactly where you want it on a page.
  • left is how you set an element’s horizontal position.
  • top is how you set vertical position.
  • width lets you control the width of an element.
  • height sets the height.
  • overflow enables you to control how content is treated if it goes over its boundaries.
  • visibility is for making something disappear.
  • clip is how you control what parts of an element are visible.
  • z-index enables you to declare what should be on top when things overlap.

I hope this tutorial has been helpful. Believe it or not, we haven’t touched on everything stylesheets has to offer. There are a few properties we didn’t even get to, and a multitude of tiny browser bugs that we didn’t have time to list. That’s why you should know about this:

CSS Resources on the Web

Thanks for sticking with me as we’ve explored the wonders of stylesheets! The clay of the Web is yours to knead and shape. Now go sculpt some cool stuff.