HORIZONTAL RULE EFFECTS

THE <hr> Tag

ATTRIBUTES





WIDTH - Modifies the width of the horizontal rule.
Written as pixels or percentage of page/table width.
Default is 100% of the page width.

ALIGN - Left or right placement on page, if width is less than 100% of page.
Default is center.

INVERTBORDER - Reverses the highlight and shadow.

NOSHADE - "Flattens" the rule (removes the highlight and shadow effect).

These are the only attributes that work for MSNTV (WebTV). Internet Explorer browsers can see different colors. Netscape can not.

Computer browsers can also increase the height of their <hr> tags by using the size="#ofpixels" attribute.




LINE BREAKS AND THE <hr> TAG


The tag has a built in line break below it. For the one above, I wrote:



Two line break tags (<br />) before the <hr /> tag and one after it.
The above works for MSNTV, but not necessarily holds true for other browsers, as each treats the <hr /> tag differently for vertical spacing.

Close font and span style tags before using a <hr /> tag, then open a new font or spanstyle tag after it.




EXAMPLES


WIDTH: 20%, 40%, 80%







ALIGN:




Both rules are width=20%; one aligned left, the other aligned right, as below:



The one on the right is horizontally one line break below the first one, due to the built-in line break of this tag. Even trying to put them in a table cell will not make them line up evenly with each other. The second one written will ALWAYS be lower than the first one.

DEFAULT RULE:



INVERTBORDER:




NOSHADE



For the 2 effects above, write the <hr /> tag this way:



COLORED RULES FOR MSNTV



Some computer users have made colored horizontal rules or lines. Below are some that you can transload. Most of these lines look much better on dark backgrounds. You can add width and height to these images, also. Click on each image to get its url for transloading or downloading.























Visit these other Tutorials by Flo

Thursday 21st of August 2008 09:44:39 PM

Copyright© by Tone By Tone Dot Net
Tandem Tooters

Arbor Hosting