Toss out your Tables! CSS is the scene!

By Charlie Morris


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

If you've read many CSS tutorials, you know that overlapping layers can create all sorts of wild and crazy stuff. But they also come in handy for some conservative but attractive effects, and for solving a couple of age-old HTML dilemmas. The z-index property defines the vertical stacking order of elements. For example, an element that has {z-index:2} will appear on top of an element that has {z-index:1} if their positions on the page overlap.

The old floating head trick, eh?

A heading, or a graphic, that overlaps two columns is a common sight in the print world, but rare on the Web, because it's a trick that's incredibly hard to pull off using tables. With CSS — you guessed it, it's a piece of cake! Simply create a class for the heading that specifies the desired position, and give it a higher z-index than the classes that you want it to overlap, as in the example above.

Graphic text or HTML text?

Many a sleepless night have I spent considering whether to use a graphic image or plain HTML text for a banner, button or heading. HTML text is easier to change later, and it's friendlier to search engines and non-conventional browsers. But it's awfully nice to incorporate a photo or other image into your logo. Wouldn't it be great if you could combine the two? Thanks to CSS, you can. Simply put your graphic and your text in two different divisions, with the same (or overlapping) x and y coordinates, but different z-indices, as in the example below.

Flags for every occasion

Okay, Now You May Use Background Images.

Of course, the overlapping text 'n image trick can be done with any size image, including a background image for a whole page. Readers of my previous articles know that I have always scorned background images, at least single-image, non-tiling ones. If you use the BODY tag to define a background image, it will often tile whether you want it to or not. In other words, if the user's browser window is wider or taller than the image, then the beginning of a second copy of the image will appear at one or more edges. This looks so abysmally amateurish that I always considered it a good reason not to use background images at all.

Thanks to CSS, this particular problem is history (although there are other reasons not to use backgrounds — harrumph!). You can place a background image exactly where you want it, covering a whole page or any part of a page. Simply place it in a division with the desired coordinates, and put the foreground elements in an overlapping division with a higher z- index.

Further Exploration

If you learn the language carefully, and use your imagination, you can do some amazing things with CSS. We've thrown out the tables — maybe frames are next! Here are some of the best CSS resource sites, each also a springboard to dozens more sites.

This article originally appeared on WDVL.

Page 4 of 4

Previous Page
1 2 3 4

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date