List Styles O’ Plenty
Lists, of course, are the simpler cousins of tables. Instead of items spread out in two directions both horizontal and vertical as in a table, a list limits itself to a simpler horizontal stack of items. A list is like a single column in a table. And because it’s a simpler format, lists normally don’t need the help of borders to frame the individual cells. Bullets, dingbats, or numbers generally serve to visually separate one list component from the next.
Getting exotic with the list-style-image property
If you want to use a different graphic as a bullet something more exciting or exotic than the supplied disc, circle, or square use the list-style image property.
You cannot resize the list-style-images using, for example, height and width properties. Instead, you must resize your image in a graphics application such as Photoshop.
Positioning lists
If you want to adjust the way your bulleted or numbered lists indent (when a list item contains multiple lines of text), you can specify inside or outside values for the list-style-position property. The effect is relatively minor, but if you specify the inside value, you get a drop cap-like effect.
Putting it all together
As you might expect, CSS offers a shorthand format for list formatting. The list-style property combines the features of the three previously described properties: style-type, style-image, and style-position. It looks like this.
Managing Tables
Nowadays, tables are used in Web pages for far more than they were originally intended. The plan was to simply use them to display tabular data an ordinary table of information. However, tables have served for years as a grid upon which to build the entire Web page.
Stalking invisible .gifs
Then designers, notably David Siegal, author of Creating Killer Web Sites (Hayden, 1997), came up with the idea of using a single-pixel .gif graphic as a way of positioning content using tables. The graphic can be easily resized to whatever space you need to fill to make your page look good. Just adjust the width and height properties to suit your purposes, as illustrated in Step 5 below. What an invisible table cannot accomplish by positioning your elements on a larger scale, you can fine-tune by inserting invisible graphics images.
Avoiding properties not supported by IE
The caption-side property is intended to add a brief bit of descriptive text or a caption or title, to the top, right, bottom, or left of a table. It doesn’t work in Internet Explorer 6 or earlier, so avoid it. Plus, it’s pretty ugly even when it’s working.
Doing Without Tables
For years, the dream of many Web page designers has been to find some way to avoid relying on the extensive, bloated code required to lay out a Web page using tables and spacer images. CSS positioning brought us much closer to that elusive goal. If you assume that 95 percent of your Web page’s audience is using Internet Explorer, and that very few are using the old renegade Netscape 4, you can move a table-based layout over to CSS style without feeling guilty or worrying that some users see havoc on their screen.
Positioning where you will
Tables are cumbersome and include loads of elements within elements, so avoid resorting to them when possible. When you don’t force tables to do jobs for which other techniques are better suited, pages load faster. Pages have less code to send, less code for browsers to figure out, and the code is more easily understood and modified by the designer and programmer.
Placing content willy-nilly
Sometimes you want to break out of the more formal columnar, grid-like layout so common in Web pages. You want to position a few paragraphs here and there, willy-nilly — wherever your design sense tells you they look good. In this section, I show you that approach first, before doing a more text-heavy, column-based layout.
Last Word
Notice in the following code that I use absolute positioning, which causes each division to be placed independently of all the other divisions. They don’t bump into each other like train cars. Also, because percentages are used to describe position (the top, left, and width properties), when the user resizes the browser, the elements move around to maintain their relationship to the body, as the body element takes on different shapes.
