A Complete Guide to Web Design

156 Chapter 9 – Adding Images and Other Page Elements

Horizontal Rules

Web Design in a Nutshell, eMatter Edition

Rule Alignment

If you’ve specified a length of a rule (using thewidthattribute) that is shorter

than the width of the page, you can also decide how you would like the rule

aligned: left, right, or centered. Like all other elements, horizontal placement is

controlled using thealignattribute and the valuesleft,right,orcenter. See

Figure 9-4.

Turning Off 3-D Shading

Thenoshadeattribute allows you to turn off the 3-D shading for horizontal rules.

This will cause the rule to display as a solid black line. See Figure 9-5.

Creative Combinations

By using the available attributes in combination, you can get a little bit creative

with horizontal rules. The most common trick is to set the width and size to the

same value, creating a little embossed square that can be centered on the web

page. Unfortunately, rules cannot be placed next to each other on a line. See

Figure 9-6.

Figure 9-4: Rule positioned flush right

Figure 9-5: Rule with 3-D shading turned off

Figure 9-6: A 15-pixel-thick, 15-pixel-wide rule

<HR WIDTH=100 ALIGN=right>

<HR NOSHADE>

<HR WIDTH=15 SIZE=15>

<P>

<HR WIDTH=15 SIZE=15 NOSHADE>