Putting it all together ........................................................................
As you might expect, CSS offers a shorthand format for list formatting. The
list-styleproperty combines the features of the three previously described
properties: style-type, style-image, and style-position. It looks like this:
<style>
li {list-style: circle inside}
</style>
Or, to include your own bullet, use this code, where shadow.jpg is the name
of the graphic file you would like to use as a bullet:
<style>
li {list-style: url(“shadow.jpg”);}
</style>
Or, to define a particular <ul>element:
<ul style=”list-style; square inside”>
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.
The fundamental problem is that HTML did not provide a viable way to
arrange the various components or visual zones within a page. Designers
who work with magazines, in advertising, and other fields expect to be able
to position page elements precisely where they want them to go — down to
the tiniest unit of measurement. (On a computer monitor, that unit of mea-
surement is the pixel.) But with HTML, even when you used tables as a way
to hang your other content, you never got pixel-level control.
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
widthand heightproperties 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.
Chapter 12: Handling Tables and Lists (And Doing Away with Tables) 213
