WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 54. Rehabilitating Horizontal Rules

One of the most useful but least used elements in all HTML is the humble horizontal rule. Its goal is a simple but noble one: to create a visual dividing line between the sections of a page.

The best thing about this element is that it's a free graphic. The browser generates it internally. Your visitors don't have to download it, which reduces the overall graphics load and improves the performance of your site.

Part of the problem with the horizontal rule is that, out of the box, it's too long, too blocky, and too obtrusive, as Figure 54.1 shows. Most designers would rather separate the sections of their page with elegant whitespace, not this ugly thing. But if you take the time to adjust its attributes, you can create some truly classy effects, as in Figure 54.2.

Table 54.1 presents the HTML attributes for the hr tag, which generates horizontal rules. You'll modify most of these attributes to make horizontal rules more respectable.

The first order of business is getting rid of the default shading effect, which accounts for most of the clumsiness of the horizontal rule:

<hr noshade>

The noshade attribute doesn't take a value. It either appears in the hr tag, or it doesn't.

Next, to make the horizontal rule subtler, reduce its height. By default, the rule is 2 pixels tall in Internet Explorer and 3 pixels tall in Netscape. Setting the size attribute to 1 not only standardizes the appearance of the element across browsers, it improves its effectiveness. Slimmer is better; you don't want the horizontal rule calling too much attention to itself. So:

<hr noshade size="1">

The standard horizontal rule is also too long. By default, it fills the entire width of the page or whatever container element it happens to be in, such as a table cell or a CSS div. Truncated horizontal rules work better. They introduce extra whitespace into your design, which helps your layout to breathe.

Some designers prefer to give precise pixel measurements for the width of the horizontal rule, like this:

<hr noshade size="1" width="200">

hr {
color: #FF0000;  /* For IE */
background-color: #FF0000;  /* For Netscape */
}

The precise amount depends on the width of the area that the horizontal rule occupies. If you're working with a fixed-width design, then this option is probably your best bet. However, if you have a liquid design that changes size depending on the size of the browser window, a fixed-width horizontal rule might give you trouble. It may look just right in a maximized browser window, but it might be too big in a smaller browser window.

To solve this problem, just make the horizontal rule liquid, too, by specifying its width as a percentage:

<hr noshade size="1" width="20%">

A value of 20% scales the width of the horizontal rule to 20% of the width of the area it occupies. So if the horizontal rule is in a table cell that happens to be 600 pixels wide, the width of the horizontal rule becomes 120 pixels, or 20% of 600.

The browser centers horizontal rules by defaultnot that you can tell, because the element expands to its full width automatically. Centering becomes more apparent when you shorten the width. Leave the rule centered if you like, but many designs work better when you position the rule to the left or right:

<hr noshade size="1" width="20%" align="left">

The horizontal rules in Figure 54.2 use these precise attributes.