background
|
|
RiscOS
Risc OS Info
All you need to know about Risc OS and more.
More icon

bonsai
The Element
A small area for Bonsai related material.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Mulder's Stylesheets Tutorial
Lesson 5

by Steve Mulder

Page 1 — Mulder's 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.

next page»