Toss out your Tables! CSS is the scene!
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
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.
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.
- WDVL Style Sheets Section
- W3C Cascading Style Sheets Home Page
- Web Design Group
Excellent sample layouts with detailed explanations, and lots of links to CSS tutorials.
- The Layout
Another set of excellent sample CSS layouts.
The House of Style
Tutorials, a browser compatibility guide and a massive list of other CSS resources.
This article originally appeared on WDVL.