Horizontal Rulers

Horizontal rules defined in basic HTML look pretty boring on most browsers, so designers have long used graphic images as dividers instead. But you can use Cascading Style Sheets to create attractive custom rules. We'll show you how to use style sheets to design custom rules that download fast and complement your color scheme and page layout.

Increase Page Usability And Readability

Suppose you have a long document to post or you have several diverse topics on a single page. Naturally, you want to make it easy for visitors to scan the page quickly and to find the information they need. There are several ways to do it:

• Header tags provide visual cues to visitors and text cues to search engine spiders.
• Anchor tags give visitors a way to navigate through the page.
• Page dividers provide visual cues to visitors that a new section or topic is about to begin.
• Create dividers by inserting images into the page or use basic HTML to define a horizontal rule.

<HR align="center" width="25%" size="10" color="blue">

Explorer displays a blue horizontal rule that's centered on the page, 10 pixels thick, and covers 25% of the browser window. Netscape displays an empty box that's centered, 10 pixels thick, and encompasses 25% of the browser window.

Which might best suit your site's color scheme and layout? With CSS, you can ensure that visitors browsing with Explorer or Netscape 6.x browsers see the colored rule. WebTV and Netscape 4.x visitors will see a basic horizontal rule specification. If you're concerned that horizontal rules or other CSS and HTML techniques may be breaking your page in some browsers, be sure to test your pages for browser compatibility.

Creating Custom Horizontal Rules You have a lot of options to choose from when you define horizontal rules with CSS. Here are some of the most common:

• Height: Adjust the thickness of the rule
• Width: Sets the width of the rule across the browser window. Set it in pixels or as a percentage.
• Background: Specifies the color of the horizontal rule.
• Margin: Use this to control the horizontal alignment of the custom rule.
• You can't use "right," "left," or "center" like you do in regular HTML, so you'll probably have to play with this some to get it to display properly.

<STYLE>
HR {
    height:10px;
    width:30%;
    background:#446791;
    margin: 0px 150px 0px 150px;  
   }
</STYLE>

This specification creates a dark blue horizontal rule that is 10 pixels high, occupies 30% of the browser window, and is centered on the page. If you want to right or left-justify the line, you'll need to experiment with the margin specifications to find what looks best for your page.

It works in Explorer 5.x and 6.x, and Netscape 6.x browsers. Web TV and Netscape 4.x browsers ignore the style specification and display a plain thin line that occupies 100% of the browser window. Study your server logs to determine what percentage of your audience might see the plain line instead of the custom rule. If it's a substantial percentage, you may need to use an image divider instead.

When you replace your standard horizontal rules or graphic images with CSS-defined horizontal rules, you benefit in several ways. It's an easy way to get comfortable placing CSS elements on your page without ruining your page layout. Less graphic images mean that your visitors see your page more quickly. Finally, your page becomes more standards-compliant, so it will display better in the new generation of browsers.