|
CSS Tip:
Customize Your HTML Tags
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
One of the great things about Cascading Style Sheets is that they allow you to adjust the behavior of HTML tags, giving you more control over your Web page. With a little work, you can customize tags to work the way you want them to. In the past, you pretty much had to live with the way your browser rendered each tag.
For example, take a simple HTML list, like the one shown below.
<UL>
<LI>List Item 1
<LI>List Item 2
</UL>
|
When rendered by your browser, this simple HTML element looks like this:
Two common questions asked by beginning HTML coders are:
- Can I customize the bullets used in my list?
- Can I control the amount of white space above and below my list?
|
With basic HTML, the answer to both questions is "No, you can't." With style sheets, the answer to both is "Yes, absolutely."
In a previous story we showed you how to customize the bullets used in your list. In this story, we'll show you how to control the white space above and below your list.
Under CSS every HTML element is contained in a "block," a rectangle that surrounds the element. This block itself has style properties that you can adjust, letting you control the amount of white space around the element.
For example, if we displayed the block surrounding our HTML list, it would look something like this:
The amount of white space around our bullets is controlled by two properties: padding and margin. The element's padding defines the amount of white space between our bullets and the block border. The element's margin defines the amount of white space between block border and the text above and below the list itself. This is the space we want to adjust to customize our bullet list.
To do this, we can use the STYLE attribute to set a pair of properties called "margin-top" and "margin-bottom." We could use the single property "margin" to define both the top and bottom margins at once, but some versions of Internet Explorer don't handle this property correctly, so we'll set the top and bottom margins separately.
Here's the code:
<P STYLE="background-color:tan">Text
above our list</p>
<UL STYLE="margin-top:0px; margin-bottom:0px;">
<LI>List Item 1
<LI>List Item 2
</UL>
<P STYLE="background-color:tan">Text
below our list</p>
|
Setting "margin-top:0px" tells the browser to set the top margin to zero pixels. If we were using this list in an actual Web page, we'd probably use some value other than zero. But for this example, a zero value helps to dramatize the way we're changing the tag's behavior.
To show the relation of our list to the surrounding text, we've also added a paragraph of text above and below our list, and we've set the background color property of these paragraphs to clearly show where the bullet list element begins.
This makes our list appear as shown below.
Notice that the amount of white space between our list and the surrounding paragraphs hasn't changed yet. That's because our paragraphs also have margins associated with them. To fully control the white space around our list, therefore, we also need to apply a style to each of our paragraphs. The code below shows how to do this.
<P STYLE=" margin-bottom:0px; background-color:tan">Text
above our list</p>
<UL STYLE="margin-top:0px; margin-bottom:0px;">
<LI>List Item 1
<LI>List Item 2
</UL>
<P STYLE="margin-top:0px; background-color:tan">Text
below our list</p>
|
Now the list appears as shown below.
Notice that we've completely eliminated the white space around the bullet list. This effect will work under Internet Explorer Version 4 and higher, as well as under Netscape Navigator Version 6. Version 4 of Netscape doesn't support this effect.
|
